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