Layui table多级表头需通过cols二维数组实现：外层数组为行，内层用colspan合并或children拆分子列；叶子列必须设field和width，children不可设fixed；表头更新须destroy后render；IE11需skin:'line'降级布局。
layui table 的 cols 里怎么写多级表头
多级表头不是靠嵌套 html，而是靠 cols 数组的层级结构实现。最外层数组是「行」，每项是一个「列配置对象」；如果某列要合并单元格（比如跨两列），就用 colspan；如果要拆成子列，就用 children 数组。
常见错误是把 children 写在了顶层，或者漏掉 field 导致排序/导出异常；更隐蔽的是：子列没设 width，渲染后宽度挤成一团，看着像没生效。
-
colspan和rowspan是互斥的——设了colspan就别设rowspan，否则表头错位 - 所有叶子节点（即最终显示数据的列）必须有
field，否则点击排序会报Uncaught TypeError: Cannot read property 'sort' of undefined - 建议给每级
title都写上，哪怕只是空字符串，不然某些版本的 Layui 会把undefined渲染成文字
cols: [[
{ title: '用户信息', colspan: 2, align: 'center' },
{ title: '操作', colspan: 1, align: 'center' }
], [
{ field: 'name', title: '姓名', width: 120 },
{ field: 'age', title: '年龄', width: 80 },
{ title: '', toolbar: '#actionBar', width: 160 }
]]
为什么改了 cols 表头不刷新
因为 Layui 的表格初始化后，cols 是只读的。直接改数组再调 table.reload() 不会更新表头结构——它只重载数据和部分配置，不重建 DOM 结构。
真实场景：你在调试时临时 push 一个子列进去，发现页面毫无反应；或者用 Vue 响应式数据绑定 cols，但表头始终是旧的。
- 必须用
table.destroy(id)销毁原表格，再用table.render()全量重绘 - 如果用了
id，销毁前记得先存好当前页码、筛选条件等状态，否则 reload 后回到第 1 页 - 注意：
destroy后绑定的事件（如tool、sort）全部失效，需重新绑定
toolbar 和 title 在复杂表头里的位置陷阱
很多人想在合并列（比如「用户信息」）里加 toolbar，结果发现按钮不显示，或者点不动。根本原因是：toolbar 只支持挂在「叶子列」上，也就是没有 children 的列。
另一个坑是：用 title: '' 占位的列，如果同时写了 fixed: 'right'，会导致右侧固定列整体偏移，甚至遮挡滚动条。
- 需要操作栏的合并列，正确做法是：把
toolbar放在某个子列上，再用 CSS 隐藏该子列的标题文字（.layui-table-col-scan{display:none}） -
title为空字符串时，务必配width，否则该列宽度由内容撑开，破坏表头对齐 - 不要给带
children的列设fixed，Layui 不支持固定多级表头
IE11 下复杂表头错位或空白的兼容处理
Layui 2.8+ 默认用 flex 布局渲染表头，IE11 对 flex-wrap 和 min-width 支持差，导致多级表头列宽计算错误，看起来像“少了一行”或者“最后一列被截断”。
这不是你 cols 写错了，是渲染层的兼容问题。线上环境遇到最多的是：Chrome 正常，IE11 表头和内容列完全不对齐。
- 强制关闭表头 flex 布局：在
table.render()配置里加skin: 'line'（虽然名字叫 line，但它会切回传统 table 布局） - 或者手动覆盖样式：
.layui-table-header .layui-table-box{display:table!important} - 避免在
title里用换行符\n或<br>，IE11 无法正确测量高度
复杂表头真正的难点不在写法，而在“改完之后要不要清缓存、要不要重绑事件、IE 下要不要降级布局”——这些细节不试一遍，光看文档永远踩坑。
