自我介绍
我，以前一直是一名90%时间都在写java的后端开发人员，自从来到现在的公司后，被迫营业，写起了前端代码，就问你们，苦不苦逼
简单介绍一下项目
项目采用前后端分离开发，前端采用的是VUE，UI框架使用的layui（吐槽一下，虽然我很喜欢layui的样式，但是它和VUE目前确实没办法兼容得很好，还是elemen-ui好用一些），后端采用的是SSM（OMG，其实都不能算是M，因为用的是ibatis）
接手任务
有一天，老大让开发的一个模块需要使用复杂表头，类似于下面这种
查阅layui的文档，发现layui支持复杂表头创建，于是乎，直接按照文档进行代码编写。
开发
啪啪啪啪...，Ctrl C and Ctrl V，一个星期后，模块写好了，测试使用的死数据（因为当时没有对接后端），能够达到预期效果，看起来一切都是那么正常，没有什么问题，检查一番后，直接commit
任务看似完美完成，但是，不料，一个月后......
一个月时间，转眼即逝，后端接口已完成，所以需要对接接口，然后再进行测试（是的，我们公司没有测试，测试的工作还得自己做）。
对接接口、填充数据、表格渲染，一气呵成。
测试
刚开始还是一切正常，可是后来，多次获取不同的数据进行渲染时，出现了问题，有时候会多渲染出一列，具体如下图
最开始，我真的没有怀疑是框架渲染的问题，只是以为自己渲染数据给错了，然后我花了7 8个小时检查自己的数据（因为数据是动态生成的，所以比较复杂），又是debug，又是console.log，什么方式都试过了，还是没找出数据的问题，最后才思考，是不是框架的问题。
百度一下，我瞬间泪目，果然是框架自身的原因，不知道是bug，还是有意为之，直到我现在的版本layui-v2.5.6，依旧是这样的，所以，各位有长时间解决不了的问题，不妨先问问搜索引擎。
网上查找资料，当复杂表头，子表头只有一列的时候，它会当作普通表头渲染，所以就会多出一列。
解决办法
那么如何解决呢？
网上的方法也不止一种，有改源码的，有利用CSS进行隐藏的。
我这种菜鸟水平，改源码是不可能改源码的，那么，只能从隐藏入手了。只要我能把你隐藏起来，就可以当你不存在。
首先，打开F12，查看这一列元素有何特征
可以看出，这个多出来的一列，他的data-field是数字，那么，我们就可以利用这个特征来处理它
找到官网的文档，可以看到，有一个done的回调函数，当数据渲染完成之后回调，那么，我们可以在数据渲染完成之后，对这一列进行隐藏
具体代码
done: function(res, curr, count) {
// 直接删选出data-field='6'隐藏
// $("td[data-field='6']").hide()
// 或者循环遍历data-field>0的隐藏
$.each($("td"), (function() {
if($(this).attr('data-field') > 0){
$(this).hide()
}
}))
}
这样操作后，表格就正常了
如果大家觉得有帮助，就请点个赞吧