Layui table 原生不支持 group 字段分组，group 非内置配置项，直接使用会静默失效；必须前端预处理数据为“分组头+子项”嵌套结构，并通过 templet 模板识别 isGroupHeader 渲染标题行与普通行。
layui table 如何用 group 实现字段分组？
layui 原生 table 组件不支持服务端或前端自动分组（即类似 excel 分类汇总的效果），group 并非内置配置项，直接写 group: 'category' 会完全无效。必须靠前端预处理数据 + 自定义 render 或 cols 中的 templet 来模拟视觉分组。
怎么手动预处理数据生成分组结构？
核心是把原始扁平数组转成「分组头 + 子项」嵌套结构，再用 table.render() 渲染时识别层级。注意：Layui 表格本身不理解父子关系，所以得靠 templet 控制行高、合并单元格、插入分组标题行。
- 先用
Array.prototype.reduce()按目标字段（如'type'）聚合成对象：{'A': [...], 'B': [...]} - 再用
Object.entries()转为数组，并对每组生成一个「标题行对象」+ 多个「数据行对象」，统一 push 到新数组 - 给标题行加标识字段，比如
isGroupHeader: true和groupName: 'A'，方便模板判断 - 最终传入
data的是这个混合数组，不是原始数据
如何用 templet 渲染分组标题和普通行？
在列定义中对需要展示分组信息的列（通常是第一列）写 templet，根据是否为标题行动态返回不同 HTML；其他列保持原样或设为 hide: true 避免重复。
{field: 'type', title: '类型', templet: function(d) {
if (d.isGroupHeader) {
return '<div style="font-weight:bold;background:#f8f8f8;padding:8px 12px;">' + d.groupName + '</div>';
}
return d.type;
}}
- 标题行不能有
lay-data或事件绑定，否则影响排序/选中逻辑 - 如果需展开收起，得额外加图标和点击事件，用
layui.jquery手动控制后续行的display - 固定列、合计行等高级功能与分组混用时，CSS 容易错位，建议避免同时启用
为什么不用 done 回调里操作 DOM？
因为 done 触发时表格已渲染完成，此时插入标题行会导致 tr 层级混乱，翻页、排序、重载后状态丢失，且无法响应内置事件（如 rowDouble）。必须把分组逻辑前置到数据层，让 table “以为”这就是原始数据结构。
前端设计优化skill
下载
前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。
-
done只适合做纯视图增强（比如加 tooltip），不适合结构性修改 - 分页时若用前端分组，记得在
page: true下对「整个分组块」做切片，不能只对子项分页，否则组头可能被截断 - IE11 下
Object.entries需要 polyfill，或者改用for...in+hasOwnProperty
分组的本质是数据形态改造，不是样式 hack。最容易被忽略的是：分组后导出 Excel、打印、列宽自适应都会异常，这些地方必须单独适配。
立即学习“前端免费学习笔记（深入）”；
