layui table 相关问题汇总

前端 tytrock ⋅ 于 2019-07-13 16:35:24 ⋅ 4878 阅读

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());
    });
}


回复数量: 0
    暂无评论~~
    • 请注意单词拼写,以及中英文排版,参考此页
    • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
    • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
    • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
    • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
    Ctrl+Enter