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