解决layui-table复杂表头数据错位问题

Posted 2021-03-03 phper8

如果每个colspan > 1 的时候 应该是没问题 如果colspan=1的时候会导致错位

 

 

 

 检查表头代码发现colspan=1 在去检查表格内容代码发现会把 合并的头 td也显示出来

解决方案:

在lay-data里面合并的数据里面增加一个 [,colGroup:true]参数,版本测试2.5.6可以解决问题 2.3版本没有效果 其他版本没有测试

比如3层表头colspan合并  第一层和第二层需要增加colGroup:true参数,第三层不需要增加

colGroup:true在官方文档里面并没有写,通过查看源码 [https://gitee.com/sentsin/layui/blob/master/src/lay/modules/table.js] 399行

//这里定位到 colGroup参数 等于true进去判断 如果colspan=1的时候 并不能进入
//第二种解决方法 就是修改这里的 >1 判断 改成 >=1 的时候就会进来(不推荐这种方法)
if(item2.colGroup || item2.colspan > 1){
          var childIndex = 0;
          layui.each(options.cols[i1 + 1], function(i22, item22){
            //如果子列已经被标注为{HAS_PARENT}，或者子列累计 colspan 数等于父列定义的 colspan，则跳出当前子列循环
            if(item22.HAS_PARENT || (childIndex > 1 && childIndex == item2.colspan)) return;
            
            item22.HAS_PARENT = true;
            item22.parentKey = i1 + ‘-‘ + i2;

            childIndex = childIndex + parseInt(item22.colspan > 1 ? item22.colspan : 1);
          });
          item2.colGroup = true; //标注是组合列
        }