点击列触发子表格本质是监听cellClick事件并动态创建独立table实例，需唯一ID容器、脱离原表DOM结构、正确销毁实例且数据需接口获取或本地计算。
点击列触发子表格，本质是监听 cellClick 事件
layui 的 table 不支持原生嵌套子表格，必须手动在 cellclick 回调里动态插入 dom 并渲染新表格。关键不是“展开”，而是“点击后新建一个独立的 table 实例”。
常见错误是直接用 layui.table.render() 在当前单元格内 render，结果样式错乱、事件冲突、多次点击重复渲染。
- 必须给子表格容器加唯一 ID（比如基于行数据的
id或索引拼接），避免重复绑定 - 子表格不能复用同一
elem，每次都要新建<div id="sub-table-xxx"></div> - 渲染前先检查该 ID 是否已存在，存在则
layui.table.destroy("sub-table-xxx")销毁再重建
子表格数据得靠接口或本地计算，不能直接取父行所有字段
二级表格的数据通常和父行某字段强关联（如订单号查明细、用户 ID 查权限列表），不是简单把父行对象展开。Layui cellClick 回调只提供 trData（当前行原始数据），不自动帮你请求子数据。
典型场景：点击「操作」列的「详情」按钮 → 拿 trData.order_id 调 $.get("/api/order/items", {order_id: trData.order_id}) → 成功后渲染子表格。
- 如果子数据已存在（比如提前合并到父数据的
items字段），可以直接用trData.items，但要注意数据结构是否符合子表格cols定义 - 接口返回格式必须是数组，且字段名要和子表格
cols中的field严格对应 - 别忘了加 loading 状态，否则用户会误以为卡死——可在
cellClick里先显示加载中...文本
子表格容器必须脱离原 table 结构，否则会被 layui 样式重置
Layui 表格的 CSS 规则（如 .layui-table td）会污染子表格的 td，导致边框、内边距、文字对齐全乱。最稳妥的方式是把子表格插入到 <body> 下，用绝对定位锚定到当前单元格下方。
示例定位逻辑：
const $cell = $(e.tr).find('td').eq(e.colIndex);
const offset = $cell.offset();
$('#sub-table-container').css({
position: 'absolute',
top: offset.top + $cell.outerHeight(),
left: offset.left,
width: $cell.outerWidth()
}).show();
- 不要把子表格塞进
<td>或<tr>内部，Layui 会重绘整个 table 导致子表格消失 - 子表格容器需设
z-index: 9999，否则可能被其他弹层遮挡 - 点击空白处关闭子表格？监听
document.click时记得排除子表格容器本身，否则点子表格内部就关闭了
销毁子表格比创建更关键，否则内存泄漏+重复渲染
每次点击新行，旧子表格必须彻底清理：DOM 移除 + Layui 实例销毁 + 事件解绑。漏掉任意一项都会导致后续点击失效或页面变慢。
- 销毁顺序：先
layui.table.destroy("sub-table-xxx")，再$("#sub-table-xxx").remove() - 不要用
$("#sub-table-xxx").empty()，这只会清空内容，Layui 实例还在内存里 - 如果子表格用了分页，
page: true会导致destroy后分页器残留，务必确认 destroy 是否成功（可打印layui.table.getTableElem("sub-table-xxx")看是否为 null）
真实项目里，子表格的复杂度往往卡在数据联动和销毁时机上，而不是渲染本身。多试几次点击不同行，用浏览器内存面板看是否持续增长，就能验证销毁逻辑是否到位。
