# 场景：

在做后台页面时，经常用到表格，有时候表格列的内容过长，导致所在行拉的很高，严重影响美观性和可用性。

# 解决方案：

1. 不展示内容过长的列。如果没有必要可以不展示或者另放在一个详情页面，毕竟表格宽度有限，只需要展示关键列。

2. 截取展示，只展示内容的前几个字，比如20字，后面省略号，点击省略号展开详情，这种只适合中等长度的列。

3. 当内容实在很长，可以考虑使用弹出框加滚动条的效果，这样多长的内容都能拿的下。

# 记录第二种截取展示

思路：一般现成的表格组件都对列提供格式化函数，可以在列格式化时，进行判读当内容大于界限时，展示部分内容，但是需要把完整的内容放在td的自定义属性中，并加上一个点击相应行数，再这个函数中判断当前是否是完整内容，部署在获取自定义中的完整内容，在展示出来。

#代码（以data-table为例）

列格式化函数：

createdCell(td, cellData, item, row, col) {if (item.errorRecord) {var part = ''$(td).attr("content",item.errorRecord);if(item.errorRecord.length > 50){//只有超长，才有td点击事件part = getPartialRemarksHtml(item.errorRecord);//显示部分信息$(td).attr('isDetail',false);$(td).attr('onclick','javascript:changeShowRemarks(this);');} else {part = item.errorRecord$(td).attr('isDetail',true);}$(td).html(part);}
}

展开收起函数：

function changeShowRemarks(obj) {//obj是td
    var content = $(obj).attr("content");
    if (content != null && content != '') {
        if ($(obj).attr("isDetail") == 'true') {//当前显示的是详细备注，切换到显示部分
            $(obj).attr('isDetail', false);
            $(obj).html(getPartialRemarksHtml(content));
        } else {
            //当前显示的是部分备注信息，切换到显示全部
            $(obj).attr('isDetail', true);
            $(obj).html(getTotalRemarksHtml(content));
        }
    }
}

//部分备注信息
function getPartialRemarksHtml(remarks) {
    return remarks.substr(0, 50) + '  ...';
}

//全部备注信息
function getTotalRemarksHtml(remarks) {
    return remarks + '  ';
}
 

ps: 参考其它大神的

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！