layui table 相关问题汇总

前端 ⋅ tytrock ⋅ at 2019-07-13 16:35:24 ⋅ 8845 Reads

1、表格内容自动换行完美解决

默认情况下,layui table表格内容超出表格宽度会自动省略号隐藏

image.png

需要鼠标放到单元格上,出现次图标

image.png

然后再点击,才会显示全部,用起来不方便

image.png


解决方法:

未页面添加css,便可解决

.layui-table-cell {
    font-size:14px;
    padding:0 5px;
    height:auto;
    overflow:visible;
    text-overflow:inherit;
    white-space:normal;
    word-break: break-all;
}

效果如下:

image.png


2、固定列的行高和table行高不一致

当使用fixed时,固定列的高度与其他列高度不一致,如下图

image.png

解决方法:

只需在done回调函数执行以下方法

,done: function(res, curr, count){
    $(".layui-table-header  tr").each(function (index ,val) {
        $($(".layui-table-fixed .layui-table-header tr")[index]).height($(val).height());
    });
    $(".layui-table-main  tr").each(function (index ,val) {
        $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
    });
}


Total Reply Count: 0
    No comments~~
    • publish_typography
    • publish_markdown
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • publish_image
    • publish_draft
    Ctrl+Enter