layui表格不支持原生分组，需手动预处理数据：推荐用2.8.0+的treeMode实现折叠分组，要求数据为树形结构（含id、pid、children）；或用done回调+rowspan合并单元格实现无折叠分组；避免第三方插件破坏layui内部状态。
layui表格不支持原生分组，必须手动预处理数据
layui 的 table.render() 本身没有 groupBy 或分组折叠功能。你看到的“分组效果”，其实是把原始数据按某个字段（比如 category）提前聚合成嵌套结构，再用 tree 模式或自定义 templet 渲染出来的——不是表格自动分组，是人先分好组、再喂给表格。
用 treeMode 实现带折叠的分组（推荐）
从 layui 2.8.0+ 开始，table 支持 tree 模式，适合做父子层级分组展示。关键点：数据必须是树形结构，且每行需有 id、pid、children 字段（或通过 parseData 补全）。
实操建议：
- 后端返回扁平数据（如 [{id:1, category:"前端", name:"Vue"}, {id:2, category:"后端", name:"Java"}]），前端用 JS 按
category归类并生成树结构 - 设置
tree: {enable: true, iconIndex: 0}，并指定id和pid字段名（如id: "key",pid: "parentKey"） - 分组标题行用
templet判断是否为父节点：if(!d.children) return d.name;，子行正常渲染 - 注意：若用
url加载数据，必须在parseData中完成扁平→树形转换，不能依赖后端直接返回树
不用 treeMode，纯前端分组 + 合并单元格（简单但无折叠）
如果只要视觉上“分组标题+明细”，不要折叠交互，可用 rowspan 合并首列单元格实现。但 layui 表格不自动合并，得靠 done 回调 + DOM 操作。
常见错误现象：Uncaught TypeError: Cannot set property 'rowspan' of null —— 因为 done 触发时 DOM 可能未完全渲染，需加 setTimeout(..., 0) 延迟执行。
实操要点：
- 先对原始数据按分组字段排序（如
data.sort((a,b) => a.category.localeCompare(b.category))） - 在
done回调里遍历tr，统计相同category连续出现次数，用$(tr).find("td:eq(0)").attr("rowspan", count)设置 - 跳过重复行的首列（设
display: none或直接remove()），只留第一行显示标题 - 性能影响：数据量 >500 行时，DOM 遍历+修改会卡顿，不建议用于大数据场景
为什么别用第三方插件强行“增强”layui table
有人尝试用 jQuery 插件（如 jquery-tablegroup）叠加在 layui 表格上，结果常出现：Cannot read property 'config' of undefined、分页失效、重载后分组丢失。根本原因是 layui table 内部维护了完整的 DOM 生命周期和数据映射关系，外部插件直接操作 tbody 会破坏其状态一致性。
更稳妥的做法：
- 小项目：用上面的
treeMode方案，兼容性好，代码可控 - 中大型项目：放弃 layui table，改用
element-plus的el-table或ant-design-vue的a-table，它们原生支持show-summary、expand-row-keys、group等特性 - 真要保留 layui UI 风格？可只用其 CSS 类名（如
layui-table、layui-btn），搭配 Vue/React 自研表格组件
最易被忽略的一点：分组字段值含空格、特殊字符或前后空格时，=== 对比会失败，务必在分组前用 String(d.category).trim() 统一清洗。
