layui解决table页内容显示过长的问题

在写一些table列表页的时候,总会出现一些数据长度过长导致显示不规范的问题

如下:

 id为26的这一行,前两项文字过长,导致最后一列的按钮被挤到了第二行

解决方案:

        指定显示长度,让每一列只占一行.然后被隐藏的名字,鼠标悬浮的时候就显示全名

后端:

        前端也可以显示显示长度,这里,通过后端处理数据

//$list为查询出的列表数据,进行foreach遍历,保留name和cname的原始数据,将变化之后的数据塞入新数里面
foreach($list as $key => $value){
    $list[$key]['name1'] = $list[$key]['name'];
    $list[$key]['cname1'] = $list[$key]['cname'];
            
    //对名字进行判断
    if(strlen($list[$key]['name']) > 32){
        $list[$key]['name1'] = substr($list[$key]['name'],0,32).'...';
    }
    //对储值卡进行处理
    if(strlen($list[$key]['cname']) > 32){
        $list[$key]['cname1'] = substr($list[$key]['cname'],0,32).'...';
    }


}

前端html:

       只需将原来的td项添加上类属性,并且将后端传过来的原值,添加上格外的属性里面

<td class="td-nowrap icon-combined-shape-copy" id_value = "{$vo.name1}">{$vo.name}</td>
<td class="td-nowrap icon-combined-shape-copy" id_value = "{$vo.cname1}">{$vo.cname}</td>

前端js:

$(function () {
    var tips;
    $(".icon-combined-shape-copy").on({
        mouseenter: function () {
           var name = $(this).attr('id_value');
           //console.log(name)
           var that = this;
           tips = layer.tips("<span style='color:#000;'>"+name+"</span>", that, { tips: [2, '#fff'], time: 0, area: 'auto', maxWidth: 500 });
        },
       mouseleave: function () {
          layer.close(tips);
       }
    });
        
})

获取了属性之后,即可将值塞入要显示的tips里面

显示效果: