layui 多表头数据显示问题

来源：互联网 2023-03-16 23:56:19 369

我们在做表格的时候很多时候都是复杂表头：两层，三层甚至更复杂的。layui中的表格控件在使用的时候经常会碰到一些问题，在这里分享一下我碰到的一个问题和解决方法，希望对大家有帮助。

问题：在动态加载的多表头表格中，有这样的要求，虽然讲表头分成了两层或以上，但是上下两层的关系是一对一的，就好像是换行。这个时候，会出现数据列数比表头列数多的情况。

工具/原料

先来看看有问题的表格，可以看到表格中数据列和表头没有对应起来，这是因为数据列数比表头数多，当表头拖到最右边的时候数据还没到最右，所以在表头不动的情况下，数据还有向右移动，出现错位。

layui 多表头数据显示问题

我在网上找了很久都没找到这侵伟棍个问槐泉题的解决方法，因此只能自己动手丰衣足食了，我用浏览器的开发者模式找到了这些多余数据的产生是因为，在列里的改调一个属性---datafield,而且这些data-field的值都是数字。

layui 多表头数据显示问题

发现了问题发生的根源，就容易解决了。使用layui表格的监听方法---done，使得这些data-field值是数字的列都隐藏起来。

layui 多表头数据显示问题

3本页面非法爬取自百度经验

现在再来看看结果。下方滚动条的范围变小了，而且不会再出现错位。

layui 多表头数据显示问题

在这里顺带着把表头换行的样式也说明一下，网上有些大神已经有了说明，但是需要注意的是，样式的作用范围。在这里因为字体要换行，所以不能设置固定高度，使用了auto，但是如果对所有的单元格高度都使用auto的话，空行数据的高度会被挤压，表格的美观度会受到影响，需要加一个限定，如

.layui-table-header .layui-table-cell｛...｝,只给表头的单元格高度设置成auto，这样就不会出问题了。

layui 多表头数据显示问题

以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！