Layui原生不支持行下展开层，需监听rowClick事件动态插入带colspan的tr并调用table.resize()；应使用e.data获取数据，用data-expanded属性标记状态，注意样式隔离与DOM插入时机。
layui table 如何用 rowClick 事件触发行下展开折叠层
直接结论：layui 原生不支持“行下嵌套展开层”，但可通过监听 table.on('rowclick')，动态操作 dom 插入 tr 并控制显隐实现——关键在插入位置、样式隔离和事件委托。
常见错误是直接用 layer.open 或弹窗，结果浮在表格上方；或用 $(tr).after(...) 但未重绘表格结构，导致边框错位、列宽塌陷、响应式失效。
- 必须插入一个新
tr，且class="layui-table-expand"（自定义类），避免被 layui 样式覆盖 - 该
tr内部只放一个td，colspan必须等于当前表格实际列数（不能写死，需从table.config.cols[0]动态读） - 插入后要调用
table.resize()，否则固定列、滚动条、宽度计算会异常
如何获取当前点击行的原始数据并绑定到展开层
别依赖 e.tr 的 data-index 属性——它不稳定，尤其开启分页或筛选后可能错位。正确做法是用 e.data，它是 layui 渲染时绑定的真实数据对象。
展开层内容通常需要渲染模板或异步加载详情，这时要注意：
-
e.data是只读副本，修改它不会影响表格数据，放心用于传参 - 如果展开层要显示富文本或表单，建议用
laytpl预编译模板，避免字符串拼接 XSS 风险 - 异步加载时，把请求挂到
e.data.id上，失败后记得清空对应tr.layui-table-expand的 innerHTML，防止残留 loading 状态
折叠/展开状态如何持久化且不影响性能
不要用全局数组存“已展开的 rowKey”，每次点击都遍历比对——当表格有 500+ 行时，卡顿明显。推荐用 DOM 属性标记：
- 点击时给原
tr添加data-expanded="true"，收起时设为"false" - 判断状态只需
$(e.tr).attr('data-expanded') === 'true'，毫秒级 - 收起时用
$(e.tr).next('.layui-table-expand').remove()，而不是隐藏——DOM 节点留着会拖慢渲染 - 若需默认展开某几行，初始化后用
table.cache['yourId']遍历匹配，再主动触发一次展开逻辑
样式和兼容性最容易被忽略的三个点
展开层看似简单，但实际部署常因 CSS 导致错位、遮挡、滚动异常。以下三点必须手动处理：
- 给
.layui-table-expand td加padding: 12px 20px; border-top: none;，否则和上一行间距过小，且顶部边框重复 - 表格容器（
.layui-table-box）需加overflow-x: visible;，否则展开层在固定列模式下会被截断 - IE11 下
tr插入后可能不继承table-layout: fixed，需显式给展开tr加style="table-layout:fixed;"
复杂点在于：展开层如果含 iframe 或第三方组件（如地图、图表），它们的初始化时机必须等 tr 真正 append 到 DOM 后再执行，否则尺寸计算为 0。这个时机差几毫秒，得用 setTimeout(fn, 0) 或 MutationObserver 监听节点插入。
