正确绑定方式是用事件委托挂到表格容器上，如layui.$(tableContainer).on('click','tbody tr',handler)；取数据应通过table.cache[id]而非$(this).data()；子表渲染优先前端，后端需注意where函数化和实例销毁。
点击表格行触发弹窗的正确绑定方式
直接在 layui.table.render() 的 done 回调里给 .layui-table-body tbody tr 绑定 click 事件是错的——表格重载、分页、搜索后 dom 会重建，事件就丢了。必须用事件委托，挂到表格容器上。
实操建议：
- 在
render完成后，用layui.$(tableContainer).on('click', 'tbody tr', handler)绑定 -
tableContainer推荐用渲染时传入的elem值（如'#userTable'），别用.layui-table这类通用类名，避免误触其他表格 - 从
tr元素上取数据别用$(this).data('id')——Layui 表格默认不自动写data-属性，得手动在cols配置里加templet注入，或者更稳：用table.cache[<code>id] 查当前页缓存
弹窗加载子表详情的两种可行路径
子表数据量小、结构固定，优先走前端渲染；如果涉及权限过滤、关联查询或数据量大，必须走后端接口。别把所有逻辑塞进一个 layer.open() 的 content 字符串里。
实操建议：
- 前端渲染：用
layer.open({ type: 1, content: $('#subTableTpl').html() })，再用layui.table.render()在弹窗内初始化子表，url设为子表接口，where: { parentId: row.id } - 后端渲染：用
layer.open({ type: 2, content: '/sub/detail?parentId=' + row.id })，后端返回完整 HTML 页面（含 Layui table 模块），注意页面里要重新layui.use('table') - 千万别在
content里直接拼 DOM 字符串渲染子表——没样式、没分页、没事件，后续维护全靠改字符串
子表弹窗里表格分页失效或请求参数丢失
常见现象：点第二页，接口发出去的 parentId 变成 undefined 或空。根本原因是子表 table.render() 的 where 是静态对象，初始化后就不会再读取新值。
实操建议：
- 把
where改成函数：where: function(){ return { parentId: parentRowId }; }，确保每次请求都取最新值 - 如果子表需要支持搜索/排序，记得在
request配置里补全page和limit参数映射，Layui 默认用page/limit，但有些后端习惯用pageNum/pageSize - 弹窗关闭后，务必调用
table.destroy('subTableInsId')清理实例，否则重复打开弹窗会注册多个同名 table 实例，导致事件冲突或内存泄漏
父子表数据联动时容易忽略的边界情况
用户快速连点两行、弹窗还没关又点第三行、网络延迟下多次提交——这些不是“异常场景”，而是真实使用流中的高频操作。
实操建议：
- 点击行后立刻禁用按钮或加 loading 状态：
$(this).addClass('layui-disabled')，弹窗打开后再恢复 - 用
layer.index缓存当前弹窗句柄，下次点击前先layer.close(layerIndex)关掉旧的，避免堆叠多个弹窗 - 子表接口返回 404 或空数据时，别让弹窗空白挂着——在
parseData回调里判断res.data.length === 0，然后用layer.msg('暂无子项')并自动关闭弹窗
最麻烦的其实是父子表权限不一致：主表能看到某行，但子表接口因权限返回 403。这个得在弹窗打开前先发个轻量级校验请求，而不是等子表加载失败才处理。
