利用layui创建二级表头

一般情况下，使用一级表头已经够用了，但是，如果我想在一级表头的内容再进行细化的时候，一级表头显然不够用了，如图所示：出现了重复的单价、合计，但这两个单价合计放的数据是不一样的，无法知道这是具体的哪个单价合计，如果在换成xx单价xx合计的话，又会影响表格的美观，那怎么解决呢

当然是使用二级表头啦，你看使用二级表头之后，想表达的内容是不是展现的一清二楚：

具体是怎么实现的呢，和一级表头写法差不多，就多了两个参数rowspan和colspan，rowspan纵向跨越的单元格数，colspan横跨的单元格数(设置了colspan不用设置field和width)

比如我这里的，rowspan: 2纵向跨两格、colspan: 2横向跨两格即占了两份，我这里四个colspan: 2，所以后面要加上对应的8个表格，它会按顺序分的；

和一级表头一样，声明变量、初始化table组件，剩下的区别在于表头的写法了

二级表头代码：
var layuiTable;
var daySellListdetail;//日销售明细表

$(function () {
    //加载&&初始化layui组件
    layui.use(['table'], function () {
        layuiTable = layui.table;
      //日销售明细表
      daySellListdetail = layuiTable.render({
          elem: '#DaySellListdetail',
          cols: [[
              { type: 'numbers', title: '序号', width: 60, align: 'center', rowspan: 2 },
              { field: '', title: '商品编码', align: 'center',rowspan: 2 },
              { field: '', title: '商品名称', align: 'center',rowspan: 2 },
              { field: '', title: '款号', align: 'center', rowspan: 2 },
              { field: '', title: '颜色', align: 'center', rowspan: 2 },
              { field: '', title: '折扣', align: 'center', rowspan: 2 },
              { title: '数量', align: 'center', colspan: 2 },
              { title: '吊牌', align: 'center', colspan: 2 },
              { title: '成本', align: 'center', colspan: 2 },
              { title: '库存报警', align: 'center', colspan: 2 },
          ], [{ field: '', title: '已销', align: 'center' },
              { field: '', title: '库存', align: 'center' },
              { field: '', title: '单价', align: 'center' },
              { field: '', title: '合计', align: 'center' },
              { field: '', title: '单价', align: 'center' },
              { field: '', title: '合计', align: 'center' },
              { field: '', title: '上限', align: 'center' },
              { field: '', title: '下限', align: 'center' }
        ]],
        data: [],
    });
});

});
注意！要在colspan之前的表头都加上rowspan，不能少加或不加，不然表格就会全乱，你就会很难受

如果你想在二级表头后面再加一级表头的话，别在二级表头内容下加，比如在“下限”后加“备注”，不然表格就会变成这样

所以正确的做法是在“库存报警”“已销”之间加“备注”（记得也加上rowspan），当然你想在“备注”后加二级表头的话也是同理，这样二级表头就做出来啦