Layui table.render()不支持真正多级表头，仅靠二维cols数组+colspan模拟两级表头；rowspan无效，fixed列必须置于首行，reload不更新表头需destroy后重render，复杂场景应在done回调中手动重写thead并保留data-field属性。

layui 的 table.render() 原生不支持真正意义上的多级表头，所谓“两级”只是靠 cols 二维数组 + colspan 模拟出来的视觉效果，rowspan 在绝大多数版本中完全无效。

cols 必须是严格二维数组，且行间列数要对齐

Layui 只认两层结构：cols: [ [第一行], [第二行] ]。任何三维、children 或扁平写法都会被忽略或降级为单级表头。

• 第一行用于顶层标题，靠 colspan 合并列（如 {title: '用户', colspan: 2}）
• 第二行必须是具体字段列，个数必须等于第一行所有 colspan 值之和（比如 colspan: 2 + colspan: 3 = 5，那第二行就得刚好 5 个对象）
• 第二行每个列都必须有 field（哪怕只是占位），否则报 Cannot read property 'field' of undefined
• 第二行不能写 colspan 或 rowspan，写了也不解析，还可能导致后续列丢失

fixed 列必须放在第一行对应位置

如果你用了 fixed: 'left'，它必须出现在第一行的某个列配置里，而不是第二行。否则排序图标错位、点击无响应——因为 Layui 的固定列锚点只基于首行 DOM 结构计算。

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 错误写法：cols: [[{title:'用户'}], [{field:'name', fixed:'left'}]] → 固定失效
• 正确写法：cols: [[{title:'用户', fixed:'left'}, {title:'订单'}], [{field:'name'}, {field:'id'}]]
• 如果固定列属于子列（如“用户 > 姓名”），只能把 fixed 写在第一行对应合并列上，第二行字段列不参与 fixed 定位

表头更新不能靠 reload，得 destroy 后重 render

table.reload() 不会重建表头 DOM，改了 cols 数组再 reload，界面毫无反应。

• 唯一可靠方式是先调 table.destroy('myTable')，再完整执行一次 table.render()
• 销毁前务必手动保存当前页码、排序字段、筛选条件等状态，否则重绘后回到第 1 页且全部清空
• Vue/React 响应式绑定 cols 也无效，Layui 不监听数组变更

复杂场景直接在 done 回调里重写 thead

当需要三级以上表头、自定义样式、IE11 兼容或带 toolbar 时，二维 cols 已经力不从心，最稳的做法是放弃原生渲染，在 done 回调里用 jQuery 替换 。

• 先让 layui 渲染出默认单级表头，拿到 $('table[lay-id="myTable"] thead')
• 构造新 HTML，关键要保留所有 data-field 和 data-key 属性（排序/导出全靠它）
• 示例： 用户 订单 姓名 年龄 ID 金额
• 执行 $thead.html(newHtml) 后，立刻调 table.resize('myTable')，否则滚动时列宽错位

最容易被忽略的是：所有叶子列（即最终绑定数据的列）必须显式设 width，minWidth 不足以约束多级表头下的列宽；另外，导出 Excel 时 colspan 完全不生效，需用 SheetJS 手动构建 !merges 区域。