背景:
在使用layuitable展示列表数据的时候,有时候单元格的内容有多行,这个时候需要设置单元格的高度自适应,这种情况下,如果有设置表格的某些列固定(fixed)的话,会造成固定列的样式错乱,排序的时候样式也会错乱,需要做特殊处理。
解决方法:
在渲染表格数据的时候,根据单元格的内容高度重新计算并设置表格的每一行的高度。
监听表格的排序事件,在排序事件中根据单元格的内容高度重新计算并设置表格的每一行的高度。
样式错乱效果:
样式正常效果:
源码:
!DOCTYPEhtmlhtmlheadmetacharset="utf-8"metaname="viewport"content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"titlelayuitable单元格高度自适应造成固定的表格列样式错乱/titlelinkrel="stylesheet"href="../src/css/layui.css"stylebody{padding:20px;}/*设置表格单元格内容自适应*/.layui-table-cell{height:auto!important;}/style/headbodyscripttype="text/html"id="toolbarDemo"divclass="layui-btn-container"/div/scriptscripttype="text/html"id="barDemo"/scripttableid="demo"lay-filter="demo"/tablescriptsrc="../src/layui.js"src1="//