layui 布局 table表行高度不一致时导致的固定列行高错乱问题解决

守护大白菜

已于 2022-12-01 10:48:47 修改

阅读量2.3k

点赞数 2

分类专栏： JavaScript 文章标签： layui javascript 前端

于 2022-12-01 10:48:41 首次发布

本文链接：https://blog.csdn.net/qq_34625397/article/details/128077163

版权

JavaScript 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

layui table表格渲染后数据列行高与固定列行高不一致问题如下图:

增加表格样式

<style type="text/css">
    /*这里需要加上 .layui-table 如若不加可能会不生效*/
    .layui-table .layui-table-cell {
        height: auto;
        word-break: normal;
        display: block;
        white-space: pre-wrap;
        word-wrap: break-word;
        overflow: hidden;
        padding: 0 10px !important;
    }
</style>

然后再table渲染的时候增加done函数 (数据渲染完毕的回调:处理样式)


table.render({
            elem: '#dataTable'
            ,url: '{:url()}' //数据接口
            ,page: true //开启分页
            ,skin: 'row'
            ,even: true
            ,limit: 10
            ,text: {
                none : '暂无相关数据'
            }
            ,toolbar: '#toolbar'
            ,cols: [[ //表头  
                {field: 'speed_status', title: '状态',templet: '#speedStatus',width:100}
                ,{field: 'username', title: '姓名',width:100}
                ,{field: 'sex', title: '性别',width:80}               
                ,{field: 'company', title: '工作单位',width:200}              
                ,{field: 'work_type', title: '作业类别',width:100}
                ,{field: 'cre_no', title: '证书编号',width:100}
                ,{fixed:'right', title: '操作', templet: '#buttonTpl', width: 220}
            ]]
            ,done: function (res, curr, count) {
                // 该方法用于解决,使用fixed固定列后,行高和其他列不一致的问题
                $(".layui-table-main tr").each(function (index, val) {
                    $($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
                });
            }
        });