layui table怎么实现子母表（嵌套表格）展开收起-Layui教程-PHP中文网

Layui table原生不支持子母表，需通过renderRow注入展开按钮并手动DOM操作实现：监听点击，在当前行下插入带唯一ID容器的独立子表实例，预加载数据、状态缓存及分页重载时主动恢复展开态。

layui table怎么实现子母表（嵌套表格）展开收起

layui table 原生不支持子母表，得靠 `renderRow` + 手动 DOM 操作实现

layui 2.9.x 及之前所有版本的 table 都没有内置嵌套表格（子母表）功能。所谓“展开收起”，本质是监听行点击，在当前行下方动态插入一个新 tr，里面放另一个 table 实例。不能依赖 children 或 tree 等伪嵌套配置——那些只适用于树形数据，不是真正的子表。

关键点在于：主表每行必须有唯一标识（如 id），子表数据需提前按主键组织好，避免每次展开都发请求（除非你明确要懒加载）。

怎么用 `renderRow` 插入可展开的「展开按钮」列

renderRow 是 layui table 行内自定义内容的唯一可靠入口，它在每一行渲染时触发，返回 HTML 字符串。这里不能用 templet（它不支持事件绑定），必须靠 renderRow 注入带 data-id 的按钮，并绑定点击逻辑。

在 cols 中加一列，type: 'numbers' 或空列，用 renderRow 返回折叠图标：
注意 d 是当前行原始数据对象，确保它含 id 或其他能关联子数据的字段
不要在 renderRow 里直接调 table.render() 渲染子表——会重复初始化、内存泄漏；只负责插入按钮和绑定事件

展开时怎么插入子表并避免重复渲染

点击按钮后，要找到当前行的 tr，在其后插入一个 tr，再在 td 内用 table.render() 初始化子表。核心是控制生命周期：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

先查是否存在已展开的子表：$(this).closest('tr').next('.sub-table-row').length > 0，有则 remove() 收起
插入子表 tr 时，务必加唯一 class（如 sub-table-row）和 data 属性（如 data-parent-id="{{d.id}}"），方便后续定位
子表 elem 必须是独立容器（如），不能复用同一 ID；否则 table.render() 会报错或覆盖
子表的 data 应从预加载的 Map 中取：subDataMap.get(d.id) || []，别每次都 filter 主数组，性能差且易出错

收起/刷新/分页时子表状态容易丢失，怎么保持一致性

layui table 分页、重载（table.reload()）、排序都会销毁并重建 DOM，导致手动插入的子表行被清空。这不是 bug，是设计使然——你插的 DOM 不在 layui 的管理范围内。

必须监听 table.on('page(...) 和 table.on('sort(...) 事件，在回调里调用 closeAllSubTables()（自己写的清空函数）
如果用了 table.reload()，要在 reload 的 done 回调中，重新遍历当前页所有行，对已展开的项再次触发展开逻辑（但跳过渲染，只 show/hide）
更稳妥的做法：把「哪些行已展开」的状态存到变量（如 expandedIds = new Set()），每次重绘后根据该状态批量恢复 UI，而不是依赖 DOM 是否存在
子表本身不要设 height，否则可能撑破父容器；用 maxHeight 或 CSS max-height + overflow-y: auto