layui的table组件表头和行及字段为空错位问题的解决

2021-09-12 13:25 栏目：技术开发 查看(15047)

在使用layui的table组件的时候，会出现两种错位的问题，接下来就分别分析产生这个问题的原因以及对应的解决方案。

1、表头和表内容对不齐，是错开的。

这个问题尤其不加首行的checkbox更为明显，经过仔细对比发现是多余了一个逗号，这样相当于表格内容多了一行，在js操作过程中应该是按逗号进行数据分割了。只需要把对应的逗号删除成规范的格式即可。

2、当表格内容有字段为空白的时候，表格内容错位。

经过分析得知是由于上图中表格中的“所在单位职务”者个栏目为空，然后整个表格就错开了，经过测试只需要改变一个css选择器的属性值即可。在自定义的css中，添加如下css覆盖layui自带的css即可。

.layui-table-cell{display: table-caption;}

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处：layui的table组件表头和行及字段为空错位问题的解决 - 微构网络

新动态