Layui table原生不支持子母表，需通过renderRow注入展开按钮并手动DOM操作实现：监听点击，在当前行下插入带唯一ID容器的独立子表实例，预加载数据、状态缓存及分页重载时主动恢复展开态。
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返回折叠图标：<button class="layui-btn layui-btn-primary layui-btn-xs fold-btn" data-id="{{d.id}}">▶</button> - 注意
d是当前行原始数据对象，确保它含id或其他能关联子数据的字段 - 不要在
renderRow里直接调table.render()渲染子表——会重复初始化、内存泄漏；只负责插入按钮和绑定事件
展开时怎么插入子表并避免重复渲染
点击按钮后，要找到当前行的 tr，在其后插入一个 tr，再在 td 内用 table.render() 初始化子表。核心是控制生命周期：
- 先查是否存在已展开的子表：
$(this).closest('tr').next('.sub-table-row').length > 0，有则remove()收起 - 插入子表
tr时，务必加唯一 class（如sub-table-row）和 data 属性（如data-parent-id="{{d.id}}"），方便后续定位 - 子表
elem必须是独立容器（如<div id="sub-table-{{d.id}}"></div>），不能复用同一 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或 CSSmax-height+overflow-y: auto
最麻烦的不是展开，而是让子表行为跟主表生命周期对齐。只要没把子表纳入 layui 的渲染闭环，就得自己扛住所有重绘场景。
