layui table 自动合并相邻相同行需在render函数中用闭包缓存上一行值并比对,相同则返回空字符串,不同则更新并输出;分页时需重置状态;IE11下须正向遍历DOM设置rowspan并移除后续td,且避免操作列参与合并。
layui table 自动合并相同内容的相邻行要改 render 方法
如果你想让 layui 表格自动合并内容相同的相邻行,很遗憾,它本身并不提供这个功能。你得自己动手,在列定义的 templet 或 render 方法里,手动控制 DOM 的输出逻辑。这背后需要配合行号计算,以及前后行数据的比对。直接给单元格设置 rowspan 属性是行不通的,因为 layui 的表格渲染是动态生成 DOM 的,你手动加的 rowspan 很可能在表格重绘时被覆盖掉。

用 render 函数 + 缓存上一行值判断是否合并
实现的核心思路其实很清晰:在每一列的 render 函数里,你不能只盯着当前这一行数据看。必须记住上一行该列的值,以及当前合并段的起始行号。当遇到相同的值时,就返回一个空字符串;一旦值发生变化,就输出内容并重置计数器。这里有个关键点:所有需要合并的列,必须共享同一套状态管理(比如当前值、起始行),否则各列独立计算,合并效果肯定会错位。
- 通常的做法是,用一个闭包或者模块级的变量来存储
lastValue(上一个值)、startRow(合并起始行)和currentRow(当前行索引)。 - 在
render函数中,先比较当前数据的字段值和lastValue。如果相同,直接返回'';如果不同,则更新lastValue,并返回需要显示的内容。 - 这个逻辑依赖于表格按行顺序渲染,好在 layui 默认就是如此。
- 特别要注意的是,如果表格开启了分页(
page: true),那么在翻页之后,必须重置这些缓存状态,否则会出现跨页合并的错误。
合并多列时 rowSpan 计算容易漏掉隐藏列或排序干扰
如果你想直接操作 DOM 来设置 rowspan 属性,那么正确的时机是在表格的 done 回调里。这时,数据已经全部加载完毕(即使不分页,也要等这个回调)。但这里容易踩坑:layui 的列配置(cols)里可能包含设置为 hide: true 的隐藏列,这些列不会出现在最终的 tr 的 td 集合里。如果你的合并逻辑是硬编码按列索引去取 td,那就会发生偏移。
- 不要直接用
$(tr).find('td').eq(i)这种方式来定位列。更稳妥的方法是使用layui.table.getColElem工具函数,或者遍历options.cols[0]配置,过滤掉那些hide !== true的列,再计算正确的索引。 - 当用户点击列头排序后,数据的顺序变了,但 DOM 的行顺序可能还没同步刷新。不过,在
done回调里拿到的res.data已经是排序后的新顺序,可以直接基于这个数据源进行计算。 - 合并逻辑必须从第 0 行开始累加计算。如果中间某一行该列的值为空或不同,当前的合并段就必须立即终止,然后开始新的合并计算。
IE11 下 td rowspan 渲染异常的兼容处理
说到浏览器兼容性,IE11 算是个“老大难”。它对动态插入带有 rowspan 属性的 td 元素支持得很差,经常出现错行或者留下空白。这通常不是 Ja vaScript 逻辑的问题,而是 IE 渲染引擎的限制:你必须确保,当一个 td 的 rowspan > 1 时,它后面相应数量的 tr 行确实存在,并且这些行对应的列位置上没有其他 td 占位。
- 因此,在
done回调里,不建议使用类似$('tbody tr').eq(i).find('td')这种反向遍历并设置rowspan的方式。更兼容的做法是正向遍历:从第 0 行开始,对每一列计算需要合并的行数 N,然后用一个新建的$('元素替换掉首行对应的xxx ')td,再把后续 N-1 行中该列的td直接remove()掉。 - 同时,确保表格的 CSS 设置了
table-layout: fixed,否则在 IE 下,rowspan单元格的宽度很容易出现混乱。 - 如果项目必须支持 IE11,一个实用的建议是:只对纯展示性的列(比如“部门”、“类别”)进行合并,而避免让操作列(比如包含开关、按钮的列)参与合并,这样可以减少很多不可预见的布局问题。
说实话,最棘手的场景其实是分页、排序和搜索功能叠加使用时的状态管理。表格的每一次重绘(比如翻页、排序、搜索后)都会重新触发 render 或 done 流程,但如果你的缓存变量没有及时清空,或者清空的时机不对,就可能导致第一行错误地合并了两页的数据。这类问题,如果不借助详细的日志输出,定位起来会非常困难。
