layui table单元格高度自适应造成固定的表格列样式错乱
背景：
在使用layui table展示列表数据的时候，有时候单元格的内容有多行，这个时候需要设置单元格的高度自适应，这种情况下，如果有设置表格的某些列固定（fixed）的话，会造成固定列的样式错乱，排序的时候样式也会错乱，需要做特殊处理。
解决方法：
在渲染表格数据的时候，根据单元格的内容高度重新计算并设置表格的每一行的高度。
监听表格的排序事件，在排序事件中根据单元格的内容高度重新计算并设置表格的每一行的高度。
样式错乱效果：
样式正常效果：
源码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui table单元格高度自适应造成固定的表格列样式错乱</title>
<link rel="stylesheet" href="../src/css/layui.css">
<style>
body {
padding: 20px;
}
/* 设置表格单元格内容自适应 */
.layui-table-cell {
height: auto!important;
}
</style>
</head>
<body>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container"></div>
</script>
<script type="text/html" id="barDemo"></script>
<table id="demo" lay-filter="demo"></table>
<script src="../src/layui.js" src1="//www.layuicdn.com/layui-v2.5.3/layui.js" charset="utf-8"></script>
<script>
layui.use(['table'], function () {
var table = layui.table, $ = layui.$;
// 服务端返回的原始数据(数据中的tagName字段内容有多行)
var productListData = {
"status": 0,
"message": "ok",
"total": 5,
"data": {
"list": [
{
"id": 1,
"productName": "短袖",
"tagName": "服装<br />夏季上衣",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 2,
"productName": "长袖",
"tagName": "服装",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 3,
"productName": "长裤",
"tagName": "男装",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 4,
"productName": "衬衣",
"tagName": "男装<br />夏装",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
},
{
"id": 5,
"productName": "电脑",
"tagName": "电子产品<br />办公",
"createTime": "2022-07-01 12:30:12",
"updateTime": "2022-07-01 12:30:12"
}
]
}
};
// 由于是演示程序, 这里直接取出商品数据用于表格渲染
var listData = productListData.data.list;
// 表格渲染
window.ins1 = table.render({
elem: '#demo',
// url: 'http://localhost/getProductList', // 这里是服务端接口的地址
data: listData, // 直接赋值静态数据。真实数据需要通过请求服务端接口获取, 由于是演示程序, 这里直接使用data字段设置静态数据
limit: 20,
toolbar: '#toolbarDemo',
cols: [[
{ field: 'id', title: 'ID', fixed: "left", sort: true }, // ID列固定左侧
{ field: 'productName', title: '商品名称' },
{ field: 'tagName', title: '商品标签' },
{ field: 'createTime', title: '创建时间', sort: true },
{ field: 'updateTime', title: '最近一次更新时间', sort: true }
]],
parseData: function (res) {
return {
"status": res.status,
"msg": res.message,
"count": res.total,
"data": res.data.list
};
},
done: function () {
// layui表格单元格设置高度自适应后, 设置为fixed的表格列的高度无法自适应的处理
$(".layui-table-main tr").each(function(index, val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
},
error: function (res, msg) {
console.log(res, msg)
}
});
table.on('sort(demo)', function(obj){ // sort 是工具条事件名, demo是table原始容器的属性
// 如果你的表格列表里有设置排序sort, 需要添加一个sort监听事件, 根据单元格内容的高度重新计算表格的行高
$(".layui-table-main tr").each(function(index, val) {
$($(".layui-table-fixed .layui-table-body tbody tr")[index]).height($(val).height());
});
});
});
</script>
</body>
</html>
