Layui表格怎么实现多级表头配置

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 都点开看一遍表头对齐没。