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

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

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

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

QQ截图20210927123953

 

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

QQ截图20210927124251

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

QQ截图20210927132254

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

.layui-table-cell{display: table-caption;}
与我们的项目经理联系
扫二维码与项目经理沟通

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

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

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