layui table 实现字段分组需先按目标字段排序，再在 done 回调中插入带 isGroup 标记的分组头行，render 钩子中用 colspan 渲染标题行；fixed 列会导致分组错位，建议禁用 fixed 改用容器滚动。
layui table 如何用 group 参数做字段分组？
layui 2.8+ 原生不支持表格按字段自动分组（类似 excel 分类汇总），group 不是内置配置项，直接写在 cols 或 init 里会静默失效。所谓“分组显示”，实际得靠前端数据预处理 + 自定义行渲染配合实现。
怎么让同一字段值的行视觉上聚合成一组？
核心思路是：先按目标字段（比如 category）对原始数据排序，再遍历插入带合并标题的“分组头行”，最后用 render 钩子控制每行 DOM 结构。
- 必须确保原始数据已按分组字段升序/降序排列，否则分组错乱
- 用
done回调拿到完整数据后，手动插入分组标记对象，例如：{isGroup: true, groupName: "前端", field: "category"} - 在
rowElem渲染时判断isGroup，用tr的colspan跨列显示分组名，同时隐藏该行的普通单元格 - 注意
cellMinWidth和cellMaxWidth可能影响分组标题换行，建议显式设minWidth: 120
render 钩子里怎么区分普通行和分组行？
不能只靠 d 数据对象是否存在某个字段来判断——因为原始数据里本来就没有 isGroup。得在 done 中统一加工，给分组行打标，再在 render 里识别。
- 示例片段：
done: function(res, curr, count){<br> const grouped = [];<br> let last = '';<br> res.data.forEach(item => {<br> if (item.category !== last) {<br> grouped.push({isGroup: true, categoryName: item.category});<br> last = item.category;<br> }<br> grouped.push(item);<br> });<br> // 替换原始 data<br> this.config.data = grouped;<br>} -
render中判断：if(d.isGroup){ return '<td colspan="4">' + d.categoryName + '</td>'; } - 注意：
colspan值必须等于你表格实际列数（含操作列），否则布局塌陷
为什么用 fixed: 'left' 列后分组标题会错位？
因为固定列是独立于主表体的 DOM 结构，而分组标题行是插在主表体里的 tr，两者不同步滚动，视觉上就脱节了。
- 唯一稳妥解法：放弃固定列，改用
scrollbar: false+ 容器横向滚动，或接受分组标题不随左固定列冻结 - 若必须用
fixed，只能把分组标题也做成固定列的一部分——但这需要重写整个表头逻辑，超出 layui 原生能力范围 - 另一个坑：
height设为数字时，分组行高度可能被截断，建议用'full-xx'或不设固定高度
last === item.field 判断就完全不可靠。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
