自我介绍
我,以前一直是一名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()
}
}))
}
这样操作后,表格就正常了
如果大家觉得有帮助,就请点个赞吧