Layui如何实现在表格中点击某个字段后在下方弹出该行的子表数据-Layui教程-PHP中文网

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> 需添加 <code>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 不提供内置折叠管理，得自己记状态。

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

一款深蓝色网站后台管理系统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 开销