layui table自动合并相邻相同行需在render函数中用闭包缓存上一行值并比对,相同则返回空字符串,不同则更新并输出;分页时需重置状态;IE11下须正向遍历DOM设置rowspan并移除后续td,且避免操作列参与合并。
layui table 自动合并相同内容的相邻行要改 render 方法
原生 layui.table 不支持自动合并单元格,必须在列定义中用 templet 或 render 手动控制 dom 输出,并配合行号和前后数据比对逻辑。直接设 rowspan 属性没用,表格渲染完才生成 dom,而 layui 的重绘会覆盖手动写的 rowspan。
用 render 函数 + 缓存上一行值判断是否合并
核心是:每列的 render 函数里不能只看当前行,得记住上一次该列值和起始行号,遇到相同值就返回空字符串,直到值变化再输出并重置计数。注意必须所有要合并的列共用同一套“当前值/起始行”状态,否则错位。
- 用闭包或模块级变量存
lastValue、startRow、currentRow -
render中先比对data[字段名]和lastValue,相同则返回'',不同则更新lastValue并返回内容 - 必须按行顺序渲染(layui 默认就是),否则缓存逻辑失效
- 如果表格启用了
page: true,翻页后状态要重置,否则跨页合并出错
合并多列时 rowSpan 计算容易漏掉隐藏列或排序干扰
真正写 rowspan 要在 done 回调里操作 DOM,此时数据已全量加载(不分页也得等 done)。但要注意:layui 的 cols 配置可能含 hide: true 列,这些列不会出现在 tr 的 td 里,但你的合并逻辑如果按列索引硬算 rowspan,就会偏移。
- 别用
$(tr).find('td').eq(i)直接取列,改用layui.table.getColElem或遍历options.cols[0]过滤出hide !== true的列 - 排序后数据顺序变,但 DOM 行序未同步刷新前,
done里拿到的res.data是排序后的新顺序,可直接用 - 合并逻辑必须从第 0 行开始累加,中间断开(比如某行该列为空)就得终止当前合并段
IE11 下 td rowspan 渲染异常的兼容处理
IE11 对动态插入带 rowspan 的 td 支持差,常出现错行或空白。不是 JS 问题,是渲染引擎限制:必须确保 rowspan > 1 的 td 后面对应数量的 tr 确实存在,且这些 tr 里对应列位置没有其他 td 占位。
- 不要在
done里用$('tbody tr').eq(i).find('td')反向塞rowspan,改用正向遍历:从第 0 行开始,对每个要合并的列,计算跨度后,用$('<td rowspan="N">xxx</td>')替换首行对应td,再把后续 N-1 行该列tdremove() - 确保表格有
table-layout: fixed,否则 IE 下rowspan宽度错乱 - 若项目必须支持 IE11,建议合并仅用于展示列(如“部门”“类别”),避免操作列(如开关、按钮)参与合并
最麻烦的其实是分页+排序+搜索三者叠加时的合并状态管理——每次触发都会重走 render 或 done,但缓存变量没清空,或者清早了,结果第一行就合并了两页的数据。这个点不打日志几乎没法定位。











