layui表格合并单元格怎么写代码-Layui教程-PHP中文网

layui表格合并需在cols中对首行列显式设rowspan/colspan，其余行对应列设hide:true；数据须预处理分组计算跨行数，跨页合并不支持。

layui表格合并单元格怎么写代码

layui table 的 `cols` 配置里怎么写合并逻辑

layui 表格本身不支持自动跨行/跨列合并，得靠 cols 里的 rowspan 和 colspan 手动控制。关键不是“怎么写代码”，而是“在哪写”——必须在列配置中对目标列显式声明 rowspan 或 colspan，且只对「首行」生效；后续行对应位置的列要设为 hide: true 或直接不定义，否则会重复渲染。

常见错误是把 rowspan 写在所有行的同一列里，结果每行都占满行数，表格错乱。正确做法是：只在需要“作为合并起点”的那行、那列写 rowspan: N，其余 N−1 行对应列必须隐藏。

rowspan 必须是整数，且不能超过当前数据总行数
合并列（colspan）用法类似，但更少见，多用于表头分组
如果数据是异步加载的，rowspan 值需在后端或前端预处理时算好，不能依赖渲染时动态判断

实际合并前必须预处理数据结构

layui 的 data 是扁平数组，而合并依赖相邻行字段值是否相同。所以得先对原始数据按合并字段分组，再转成带 rowspan 标记的嵌套结构。比如按 category 合并，就要遍历数组，统计每个 category 连续出现几行，然后给第一行的 category 列赋 rowspan: 3，后面两行该列设为 hide: true。

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

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

下载

别试图在 render 回调里改 DOM —— layui 会重绘，你的修改会被清掉。唯一可靠的位置是构造 data 数组时就塞好 rowspan 字段，再传给 table.render()。

推荐在 AJAX 成功回调里做分组计算，而不是用 done 回调二次处理
注意空值或 undefined 会导致分组断裂，建议统一转成空字符串再比较
如果合并逻辑复杂（如多级嵌套），建议封装一个 groupDataByFields(data, ['a', 'b']) 工具函数

`rowspan` 和 `colspan` 在 `cols` 中的具体写法

它们不是列的属性，而是列配置项里的字段，只对当前列生效。例如要让第一列在前三行合并显示，就在第一列的配置对象里加 rowspan: 3；如果要让表头第二列横跨两列，则在对应表头列配置里写 colspan: 2，同时下一行该位置要留空或设 children: []。

cols: [[
  {field: 'category', title: '分类', rowspan: 3}, // ✅ 第一列跨3行
  {field: 'name', title: '名称'},
  {field: 'price', title: '价格'}
], [
  // 第二行表头：因为第一列已 rowspan=3，这里从第二列开始填
  {field: 'spec', title: '规格'},
  {field: 'unit', title: '单位'}
]]

rowspan 只影响 tbody 中的单元格，不影响表头；表头用 colspan 控制横向合并
如果某列既需要 rowspan 又要内容居中，得额外加 style: 'text-align: center; vertical-align: middle;'
合并后若内容过长被截断，需配合 cellMinWidth 或 CSS white-space: normal

容易被忽略的兼容性坑

layui 2.8+ 对 rowspan 支持更稳定，但老版本（如 2.5.x）在开启 height 或使用 scrollbar 时可能失效。最隐蔽的问题是：当表格启用了 page: true 分页，而合并跨页了（比如第10行和第11行属于同一组，但分页后它们不在同一页），此时 rowspan 会直接失效甚至报错 Cannot read property 'rowspan' of undefined。