layui table.render()原生支持两级表头，需严格按二维数组结构书写：首行用rowspan/colspan定义跨行跨列，次行每列必须含field和width且不可再设rowspan/colspan，否则表头丢失或功能异常。
layui table.render() 原生支持两级表头，但必须严格按「行级数组嵌套」+ rowspan/colspan 语义书写，任何嵌套错误或属性遗漏都会导致表头丢失、排序失效或列宽错乱。
cols二维数组怎么写才被 layui 正确识别
Layui 的 cols 是“行优先”结构：外层数组每项代表一行表头，内层数组是该行的列配置。它不解析深层嵌套，也不认 children（那是 Vue 或 Ant Design 的写法）。
- 一级表头行里，需要跨行的列必须设
rowspan: N（N 为下级行数），例如合并两行就写rowspan: 2 - 一级表头行里，需要跨列的列必须设
colspan: M（M 为下级列数），例如覆盖后面 3 列就写colspan: 3 - 二级表头行里，所有列必须是叶子节点——即不能带
colspan或rowspan，且每个都得有field和width - 如果某列既没
field又没colspan/rowspan，它会被忽略，对应数据列消失
正确示例：
cols: [
[{title: '用户', rowspan: 2}, {title: '地址', colspan: 3}, {title: '操作', rowspan: 2}],
[{field: 'name', title: '姓名', width: 100}, {field: 'prov', title: '省', width: 80}, {field: 'city', title: '市', width: 80}, {field: 'dist', title: '区', width: 80}]
]
为什么改了 cols 表头没更新
table.render() 初始化后，cols 配置就固化在实例里了。table.reload() 只刷新数据和部分参数，不会重建表头 DOM。
- 直接修改
cols数组内容再 reload，界面毫无反应 - 用 Vue/React 响应式绑定
cols，表格也不会自动重绘 - 唯一可靠方式是先调
table.destroy('yourTableId')销毁实例，再完整执行一次table.render() - 销毁前需手动保存当前页码、筛选条件、排序字段等状态，否则重绘后回到第 1 页且筛选清空
多级表头下 toolbar 和排序为什么失效
toolbar 只能挂载在「叶子列」上——也就是二级表头里那些带 field 的列。一级表头里的合并列（如 {title: '地址', colspan: 3}）无法绑定 toolbar，写了也不显示。
- 想在「地址」区域放操作按钮？只能把
toolbar放到prov、city或dist中某一列，再用 CSS 隐藏其标题文字 - 排序功能依赖
field属性定位数据字段。一级表头列若漏写field，点击标题会报Cannot read property 'sort' of undefined - 所有叶子列（最终显示数据的列）必须设
width，否则列宽由内容撑开，破坏对齐；minWidth不足以替代width在多级场景下的约束力
IE11 或固定列场景下的兼容陷阱
layui 在 IE11 下对 colspan/rowspan 渲染不稳定，固定列（fixed: 'right'）与多级表头共存时极易错位甚至遮挡滚动条。
- IE11 必须加
skin: 'line'降级样式，否则表头线断裂、文字偏移 - 启用
fixed后又用了colspan，右侧固定列会整体右移，原因在于 layui 固定列计算逻辑未适配跨列表头的 DOM 结构 - height + 多级表头 + fixed 组合是高危组合，滚动时表体列宽抖动、th/td 错位概率极高
- 折中方案：放弃
fixed，改用overflow-x: auto包裹表格容器；或把首列（如 ID）抽成独立左侧表，用scrollLeft手动同步滚动位置
真正难的不是写出多级 HTML 结构，而是让 layui 内部机制（排序、导出、重载、固定列）继续认得清每一列对应哪个 field。一旦手动操作 <thead> 却漏掉 <code>data-field 或拼错值，后续所有交互都会静默失败——这种问题往往要调试半小时才发现是属性名大小写错了。
