Layui表格本身不支持点击行自动拉取子表，必须手动监听row事件、AJAX请求、动态插入DOM并控制显隐；常见问题源于事件绑定时机错误、skin/even配置不当、DOM插入位置违规或状态未清理。
点击行展开子表时，为什么没请求、没渲染？
根本原因不是代码写错，而是 layui 表格本身不支持“点击某行自动拉子表”这种交互——它没有内置子表机制。你必须手动监听 row 事件，再用 ajax 拉数据、动态插入 dom，并自己控制显隐逻辑。
常见错误现象：table.on('row(myFilter)') 绑定无效、点击后控制台无请求、子表容器始终 display: none、重复点击堆叠多个子表行。
- 必须在
table.render()的done回调里绑定事件，不能写在 render 外或直接传进 init 配置 -
lay-filter值要和table.on('row(XXX)')中的 XXX 完全一致，且id属性必须设置（如id="myTable"） - 表格 skin 必须是
'line'或'nob'，even: false更稳妥；否则row事件可能不触发 - 子表容器不能塞进
<tr>里，Layui 重绘会破坏结构；应紧贴目标行下方插入一个<tr class="layui-table-expand-content">
如何组织 DOM 结构并避免错位
子表行必须是 <tr class="layui-table-expand-content">，且紧跟在被点击的 <tr> 后面，列数要和主表一致，用 colspan 占满整行。否则 Layui 会因 DOM 结构异常导致表格错位、滚动条失效甚至报 Cannot read property 'children' of null。
- 插入位置必须用
$(tr).after(...)，不能append到<tbody>或<table> -
<td colspan="5">中的数字要等于主表列数，可通过layui.table.config['myTable'].cols[0].length动态获取 - 子表容器建议用
<div class="subtable-container">包裹真实表格，避免样式污染主表 - 展开后需调用
layui.table.resize('myTable')，否则固定高度表格下内容会被截断
异步加载子表数据时参数怎么传、后端怎么响应？
子表数据不能靠主表 data 字段预埋，必须走独立接口。关键不是“怎么发请求”，而是“发什么、怎么识别、怎么标记可展开”。
- 前端请求参数由
autoParam控制，例如["id=parentId"]表示把当前行的id字段值作为parentId发过去 - 如果后端字段叫
pid，不要改autoParam，而应在列定义中加parentIdField: 'pid' - 后端返回的子表数据是纯数组，但**父节点原始数据里必须有
isParent: true或hasChild: true**，否则连展开图标都不显示 - 子表接口返回格式就是普通表格数组，如
[{name: "子项1"}, {name: "子项2"}]，无需嵌套children字段 - 浏览器 Network 面板看实际 URL 最准：点开某行后，应看到类似
/api/subtable?id=123的请求
如何防止多次点击导致子表重复加载或错乱？
最常被忽略的是状态管理——没做 loading 标记、没清理旧容器、没防抖，结果用户狂点几下，页面卡住或数据叠成一团。
- 每次点击前先查
$(tr).next('.layui-table-expand-content')是否已存在，存在就.remove() - 用
let loadingMap = new Map()记录id → Promise，相同 id 的请求只发一次 - 子表加载中显示 loading 提示，成功后填充数据；失败时插入错误提示行，别留白
- 详情行的
max-height要设为具体值（如300px），配合transition实现平滑展开，别用height: auto - 如果表格启用了分页，记得子表数据只属于当前页这行，别误把全局缓存当成本地数据源
