layui原生仅支持两级表头，需用二维cols数组严格对齐：首行用colspan定义跨列总数，次行必须含相同数量的带field和width的叶子列，缺一不可。
layui table.cols二维数组结构必须严格对齐
layui 原生支持两级表头，但不是靠嵌套对象或children，而是靠cols的二维数组行级结构 + colspan语义。第一行是顶层标题，第二行是叶子列（带field的列），两行的“逻辑列数”必须完全一致——即第一行所有colspan值之和，必须等于第二行元素个数。
常见错误：写成[[{title:'A'},{title:'B', colspan:2}], [{field:'a'}, {field:'b'}]]，第一行列数总和是 3，第二行只有 2 个对象，Layui 直接退化为单级表头，且不报错。
- 第一行每个项必须设
title，可选colspan（跨列）或rowspan（跨行），但rowspan在多级中基本无效，只用colspan - 第二行每个项必须有
field和width，不能设colspan或rowspan，否则该列被忽略或报Cannot read property 'field' of undefined - 如果某列只是占位（比如合并区里的空列），也要写一个空对象
{field: '', title: ''}，否则列数对不上
colspan生效但表头没合并？检查三处硬性约束
设置了colspan: 2却看到两个独立表头，大概率是以下其一：
-
cols不是二维数组：比如漏了外层中括号，写成[{...}, {...}]（一维）或[[[...]]]（三维），console.log(cols)应输出形如[ [row1], [row2] ] - 第一行
colspan总和 ≠ 第二行对象个数：例如colspan: 2+colspan: 3= 5，第二行就必须恰好 5 个列配置，少一个或多一个都会崩 - 第二行某列缺
field：哪怕你只是想放个空操作列，也得写{field: 'action', title: ''}，Layui 内部校验时会跳过无field的项，导致列数错位
排序、toolbar、导出失效？data-field必须穿透到叶子列
一级表头（如{title: '用户信息', colspan: 3}）本身不绑定数据，它只是视觉容器；真正承载字段逻辑的是第二行的叶子列。所有交互功能都依赖data-field属性挂载在<th>上，而这个属性由<code>field字段自动生成。
- toolbar只能加在第二行的列上：写在第一行的
{title: '用户信息', colspan: 3, toolbar: '#toolBar'}完全无效 - 点击表头排序报错
Cannot read property 'sort' of undefined，说明对应列没写field，或拼写与data中字段名不一致 - 导出 Excel 时列名乱序或缺失，是因为导出逻辑按
cols[1]（第二行）顺序取field，若你把field写在第一行，导出就找不到字段
table.reload()不更新表头？必须destroy后重新render
table.render()初始化后，cols结构就被固化进实例里。table.reload()只会刷新数据、页码、排序状态，不会重建<thead> DOM。改了<code>cols数组再reload，界面毫无反应。
- 唯一可靠方式是先调
table.destroy('yourTableId')，再完整执行一次table.render() - 销毁前需手动保存当前状态：
curr（当前页）、where（筛选条件）、initSort（排序字段和类型），否则重绘后回到第 1 页且筛选清空 - 如果用了
done回调做表头重写（比如动态生成），记得在destroy前清理 jQuery 绑定或定时器，避免内存泄漏
多级表头真正难的不是写法，而是所有交互能力（排序、筛选、导出、toolbar）都强依赖第二行列结构的完整性。一旦field、width、列数对齐这三点有一处松动，整个表格就从“可用”滑向“不可维护”。
