layui原生table不支持字段级自动分组，group/groupcols非官方api，须通过done回调预处理数据实现排序→插入isgroup标记→templet识别渲染三步；fixed列与分组不可共存，动态reload需确保done内完整重执行。

layui 原生 table 不支持字段级自动分组（如 excel 分类汇总），所谓“分组展示”必须靠前端数据预处理 + 自定义渲染实现，没有捷径可走。

为什么直接写 group: true 或 groupCols 没反应

Layui 2.8 及之前所有正式版的 table.render() 配置中，group、groupCols 等字段均非官方 API 支持项。写进去既不会报错，也不会生效——它被静默忽略。你看到的“分组效果”，大概率来自第三方扩展（如 grouptable）或手动干预逻辑。

• 检查控制台是否报 Uncaught TypeError: Cannot read property 'xxx' of undefined —— 很可能是你误把扩展插件的配置当成了原生能力
• 若用了 grouptable，它的 groupCols 是插件私有参数，和 layui 官方 cols 结构不兼容，混用会导致渲染失败
• 原生 table 的 done 回调是唯一可靠的数据加工入口，所有分组逻辑必须从这里开始

手动实现分组的核心三步（原生方案）

核心思路：排序 → 插入分组标记 → 渲染时识别并跨列显示。每一步缺一不可，顺序也不能颠倒。

前端设计优化skill

前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。前端设计与 UI/UX 全方位优化专家。覆盖视觉层次、排版系统、色彩理论、响应式布局、交互体验、动画动效、无障碍访问、性能优化八大维度，帮助开发者将普通页面升级为高品质产品级界面。

下载

• 先确保原始数据按分组字段排序：比如按 category 升序排列，否则相同值的行不连续，插入的分组头就会散落各处
• 在 done 回调里重构 this.config.data：遍历原始 res.data，遇到新 category 值就推一个带 isGroup: true 标记的对象进去，再推真实数据项
• 在 cols 的 templet 或全局 render 钩子里判断 d.isGroup：若是分组行，返回 <td colspan="5">前端</td>；注意 colspan 必须等于你表格实际列数（含 checkbox、操作列等）

fixed 列 + 分组 = 视觉错位，这是硬伤

只要给任意列设了 fixed: 'left' 或 fixed: 'right'，分组标题行（<tr><td colspan="N">...</td></tr>）就会和固定列不同步滚动。因为固定列是独立 DOM 容器，而分组行只存在于主表体 <tbody> 中。 <ul> <li>唯一稳妥解法：禁用 <code>fixed，改用容器级横向滚动（例如给 table 外层加 overflow-x: auto）

若业务强依赖左固定列，又必须分组，只能放弃原生 table，换用 grouptable 这类扩展——它内部重写了渲染流程，把分组头也纳入固定列逻辑

别尝试用 CSS 强制对齐：position: sticky 或 transform 在 layui 表格复杂结构下极易失效，且兼容性差

动态更新分组时最容易漏掉的点

reload 表格后，done 会被再次触发，但很多人只在首次 render 时做分组加工，reload 后数据变了却没重新分组，导致标题错乱或消失。

• 所有分组逻辑必须写在 done 回调内，而不是外部变量或初始化时一次性处理
• 如果用了 table.reload()，确保传入的配置里包含完整的 done 函数，且内部逻辑和首次一致
• 注意 res.data 是当前页数据（开启分页时），不是全量数据；若需全量分组，得关掉 page: true 或自己拉取全量再本地分页

分组本身逻辑简单，但所有细节都卡在 DOM 层级和渲染时机上——isGroup 标记必须由 JS 插入、colspan 必须算准、fixed 和分组不可共存，这三点踩错一个，整个分组就垮掉。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！