Layui表格实现点击字段展开子表需：每行tr添加data-id，紧邻后置display:none的subtable-container；用table.on('row')监听并判断目标字段，ajax按需加载子表数据至对应容器；通过classList控制subtable-open显隐，保持单展开且复用实例。
点击表格字段触发子表展开的 DOM 结构怎么组织
必须让 layui 的 table.render() 渲染出的每行都带唯一标识（比如 data-id），同时在对应行下方预留一个隐藏的 <div class="subtable-container"></div> 容器。layui 表格本身不支持原生嵌套，所以不能依赖 children 字段或 tree 模式——那是树表用的，和“点击某字段弹出本行子表”是两回事。
常见错误是直接在 cols 里写 templet 返回子表 HTML，结果所有子表一起渲染、无法按需控制显隐，还破坏了 Layui 表格的事件委托机制。
- 每行
<tr>需添加data-id="{{d.id}}"（假设后端返回主键为id） - 子表容器必须紧邻该行之后，且用类名统一标记，如
class="subtable-row-{{d.id}}" - 子表容器初始状态必须是
style="display:none"，不能靠layui-hide—— 因为它可能被全局样式干扰
如何监听字段点击并动态加载子表
不能绑定在 td 上做原生 click，要走 Layui 的 table.on('tool') 或更稳妥的 table.on('row') ，再结合 e.target 判断是否点中了目标字段（比如 class="show-sub"）。否则在分页、重载后事件会丢失。
子表数据建议用 layui.ajax() 单独请求，传参带当前行 id，避免把全部子表数据塞进主表 JSON 导致体积膨胀和首屏卡顿。
- 在
templet中给目标字段加class="show-sub"和data-id="{{d.id}}" - 用
table.on('row(test)', function(obj){ ... })监听整行，再用if(e.target.classList.contains('show-sub'))过滤 - 子表用
table.render()单独渲染到对应.subtable-row-{id}容器内，elem必须是具体 DOM 节点，不能是选择器字符串 - 每次展开前先检查该子表是否已渲染过，避免重复请求和重复初始化
子表渲染后如何控制显隐与收起逻辑
展开和收起不是简单 toggle，因为子表是异步渲染的：第一次点开要加载 + 显示；第二次点同一行，如果已加载就只显示/隐藏；点其他行时，得先隐藏之前展开的子表（保持单展开）。Layui 不提供内置折叠管理，得自己记状态。
容易踩的坑是用 $(...).slideToggle()，会导致子表表格错位——Layui 表格高度依赖 table-layout: fixed 和真实 DOM 尺寸，CSS 动画过程中宽度计算异常。
- 用
classList.toggle('subtable-open')控制显隐，配合 CSS.subtable-open { display: table-row; } - 维护一个变量
currentSubId = null，每次点击新行前先对currentSubId对应的容器执行el.classList.remove('subtable-open') - 子表容器的
display初始设为none，激活时设为table-row（不是block），否则会破坏表格结构流 - 收起时不要 destroy 子表实例，只需隐藏 DOM；再次展开可复用，省去重复 render 开销
兼容性与性能要注意的几个硬伤
Layui 2.8+ 的 table 在虚拟滚动（height: 'full-xx'）下不支持插入任意 DOM 到行间，子表会被截断或错位。必须关闭虚拟滚动，或改用固定高度 + 原生滚动容器包裹整个表格。
另一个隐蔽问题是：子表列宽若没显式设置 width，会受父表列宽影响而挤压变形，尤其当子表列数多于父表时。
- 主表设置
height: null（禁用虚拟滚动），子表容器才能正常插入 - 子表的
cols中每一列必须写死width，例如{field:'name', width:120} - 如果主表启用了
skin: 'line'，子表也要同步加该 class，否则边框对不齐 - 移动端小屏下子表容易横向溢出，需给子表容器加
overflow-x: auto和white-space: nowrap
最麻烦的是父子表分页不同步——子表翻页不会影响主表，但用户可能误以为是联动的。这点没法靠 Layui 自动解决，得在子表工具栏加文字提示，比如「仅本行数据」。
