layui table 多级表头由rowspan引起的错位问题

前言

在做报表表头时遇到一个问题，如果表头对齐了，下面的数据对不上；如果根据数据顺序情况去修改数据配置时，数据能对上但表头又不是想要的表头了，在请教前辈后发现了问题的所在。目前网上没有关于这个问题的介绍，所以记录一下。
不想看过程的点击目录直接看结论就好了。

过程

要实现的表头效果：

错误配置

按照此表头写出如下配置：

 var co1=[[
     {
         field: "field1",
         title: "1",
         rowspan: 4
     },{
         title: "2",
         colspan: 6
     },{
         field: "field3",
         title: "3",
         rowspan: 4
     }],[
     {
         title: "4",
         rowspan: 2,
         colspan: 2
     },{
         title: "5",
         colspan: 3
     },{
         field: "field6",
         title: "6",
         rowspan: 3
     }],[{
         field: "field9",
         title: "9",
         rowspan: 2
     },{
         title: "10",
         colspan: 2
     }],[
     {
         field: "field7",
         title: "7"
     },{
         field: "field8",
         title: "8"
     },
     {
         field: "field11",
         title: "11"
     },{
         field: "field12",
         title: "12"
     }]];

表头按配置是完好的展示出来了，但是从第二列数据开始与列头无法对应，但是再三检查下，按照表头配置协议上面配置的完全是没有问题的。

修改方法

在前辈的建议下，把表头修改为如下格式，改动为把4号格的两行高改为1行，同时让其下方格7和8占用两行。

按照此表头写出新的配置

var co1=[[
   {
       field: "field1",
       title: "1",
       rowspan: 4
   },{
       title: "2",
       colspan: 6
   },{
       field: "field3",
       title: "3",
       rowspan: 4
   }],[
   {
       title: "4",
       colspan: 2
   },{
       title: "5",
       colspan: 3
   },{
       field: "field6",
       title: "6",
       rowspan: 3
   }],[
   {
       field: "field7",
       title: "7",
       rowspan: 2
   },{
       field: "field8",
       title: "8",
       rowspan: 2
   },{
       field: "field9",
       title: "9",
       rowspan: 2
   },{
       title: "10",
       colspan: 2
   }],[
   {
       field: "field11",
       title: "11"
   },{
       field: "field12",
       title: "12"
   }]];

达到目标效果。

总结

当使用多级表头时，尽可能让占多行的格子位于表头的最下方，也就是带有rowspan的配置项要有field属性，可以避免遇到的这种表头和数据不对应的问题。

layui版本：2.5.6