Layui多级表头需用二维cols数组实现：首行用colspan合并，次行对齐列数并确保每列有field；colspan仅首行生效，rowspan无效，结构错误或列数不匹配会导致合并失效。
layui table 的 cols 里怎么写多级表头
多级表头本质是嵌套数组，不是加个属性就能出效果。layui 的 cols 配置必须是二维数组，外层数组是「行」，内层数组是「列」；要实现合并，就得让某列的 colspan 或 rowspan 生效，而 layui 只认 colspan（且仅对首行生效），rowspan 不起作用。
实操建议：
- 第一行写顶层标题，用
colspan指定跨几列（比如「用户信息」跨 3 列，就设colspan: 3） - 第二行写具体字段列，不设
colspan，但必须和第一行的跨列数对齐（如第一行列数总和是 5，第二行也得有且仅有 5 个列配置） - 每一列必须有
field（哪怕只是占位），否则渲染会错位或报错Uncaught TypeError: Cannot read property 'field' of undefined - 不要在非首行写
colspan——Layui 不解析，反而可能让后续列丢失
示例片段：
cols: [[
{ title: '用户信息', colspan: 3 },
{ title: '操作', colspan: 2 }
], [
{ field: 'username', title: '姓名' },
{ field: 'age', title: '年龄' },
{ field: 'city', title: '城市' },
{ field: 'edit', title: '编辑', templet: '#editTpl' },
{ field: 'del', title: '删除', templet: '#delTpl' }
]]
为什么设置了 colspan 但表头没合并
最常见原因是 cols 数组结构不合法：要么少了一层中括号，要么某一行列数对不上。Layui 对数组嵌套非常敏感，扁平写法（如把两行写成一个一维数组）或漏掉空列占位都会导致回退成单级表头。
排查要点：
- 确认
cols是二维数组，不是一维或三维——console.log(cols)看输出是不是形如[ [row1], [row2] ] - 检查每行的列总数是否一致：第一行
colspan总和必须等于第二行元素个数（例如colspan: 2+colspan: 3= 5，那第二行就得刚好 5 个对象） - 确保没有字段缺失
title或field——哪怕只是空字符串也要写上，否则 Layui 内部校验会跳过该列 - 避免在列配置里写
width同时又设colspan，某些版本下 width 会干扰布局计算
多级表头下 fixed 列和排序图标错位怎么办
当某列设了 fixed: 'left' 或 fixed: 'right'，且它位于多级表头的中间行（即第二行），Layui 容易把固定列的表头和内容列对不齐，排序箭头也只出现在第一行对应位置，点不生效。
根本原因：Layui 的 fixed 机制只认「第一行」的列结构，第二行的列不参与 fixed 锚点计算。
可行解法：
- 把
fixed加在第一行的占位列上（哪怕它没实际数据），同时第二行对应位置保持field一致 - 放弃对多级表头中非首行列启用
sort: true——排序只能挂载在第一行有field的列上（推荐挂到最末一级字段列） - 如果必须固定中间字段，考虑用 CSS 手动微调：
.layui-table-fixed-l .layui-table-header th:nth-child(2)这类选择器补偏移，但需配合table.reload()后重算
导出 Excel 时多级表头丢失或错乱
Layui 的 table.exportFile() 默认只导出第二行及以下的数据行，完全忽略第一行的多级标题。导出结果就是没「用户信息」「操作」这些顶层分组，看着像少了一层语义。
这不是 bug，是设计如此——导出逻辑压根不读 colspan 和多行 cols 结构。
绕过方式：
- 导出前手动拼接表头：用
table.cache['yourId']拿数据，再用原cols数组生成带合并信息的二维表头数组，喂给 SheetJS（xlsx）生成文件 - 改用服务端导出：前端只传参数，后端按同样逻辑渲染多级表头并生成 Excel，更可控
- 接受现状，在导出文件里用合并单元格+加粗文字模拟多级效果——但需额外写导出 hook，Layui 原生不支持
真正难的不是写法，是维护：一旦 cols 结构变，导出逻辑也得同步改，而且不同浏览器对 colspan 渲染细节有差异，测试时得拿 IE11、Chrome、Edge 都点开看一遍表头对齐没。
