layui table 无法原生支持多级展开，需用 templet 渲染触发器+动态插入 tr 实现；注意 colspan、事件委托、form.render 显式初始化、禁用虚拟滚动或改用浮层；展开状态需手动缓存。
layui table 如何嵌套展示多级展开区域
layui 的 table.render() 本身不支持原生树形或折叠式子表格，但淘宝订单列表那种“主行 + 点击展开详情区块”的效果，完全可以通过 templet 配合手动控制 DOM 实现。关键不是靠表格功能，而是把「展开区域」当成单元格内容的一部分来渲染。
常见错误是试图用 children 字段让 layui 自动递归渲染——它只对「静态树形数据」有效，且不支持自定义展开区块（比如带操作按钮、分隔线、多字段布局的详情区）。
- 必须在列定义中使用
templet返回完整 HTML 字符串，包含主行内容 + 展开触发器（如<div class="order-toggle"></div>） - 展开区域不能写死在模板里，得用 JS 动态插入到当前行下方：
$(tr).next('.order-detail-row').remove()+$(tr).after('<tr><td colspan="6">...</td></tr>') - 注意
colspan值要和实际列数一致，否则会错位；建议用table.config.cols[0].length动态读取 - 避免重复绑定 click 事件：每次重载表格后，要先解绑再重新绑定，或用事件委托到
table.elem
如何让展开区域里的表单元素正常响应（如开关、下拉框）
直接在 templet 里写 <input type="checkbox" lay-skin="switch"> 是无效的——layui 的组件初始化只在页面加载时执行一次，动态插入的内容不会自动渲染。
正确做法是在插入展开区域后，显式调用对应模块的 render 方法：
- 开关控件：执行
form.render('checkbox', 'order-form')，其中'order-form'是你给展开区域外层加的 form 容器的lay-filter - 下拉框：用
form.render('select', 'order-form') - 日期组件：需单独对新插入的
<input type="text" lay-key="date-picker-xxx">调用laydate.render({elem: ...}) - 所有动态生成的组件，
lay-key必须唯一，否则多次 render 会冲突
表格滚动时展开区域错位或消失
这是最常被忽略的坑：layui 表格开启 height 后会启用虚拟滚动，只渲染可视区域的 <tr>。一旦你手动插入了 .order-detail-row，它大概率会被滚动逻辑移除或错位。
解决方案只有两个，且必须二选一：
- 关闭虚拟滚动：去掉
height配置，改用外部容器设置max-height+overflow-y: auto，这样所有行始终在 DOM 中，展开区域才稳定 - 如果必须用
height，就别用tr插入展开区，改用layer.open()或tooltip浮层展示详情，数据传进去即可 - 切勿尝试监听
scroll手动修复位置——layui 滚动是节流+transform 实现的，DOM 结构随时可能重排，修复不可靠
数据量大时点击展开卡顿怎么办
不是渲染慢，是模板字符串拼接 + DOM 插入 + 多次 form.render() 导致的累积延迟。尤其当展开区域含大量字段或嵌套表格时更明显。
优化点很具体：
- 把展开区域的 HTML 模板提前存在变量里，用
JSON.stringify(data)+template字符串替换，而不是每次用$.each拼接 -
form.render()尽量合并调用：比如同时有 checkbox 和 select，就只调一次form.render(null, 'order-form') - 展开前先判断该行是否已渲染过详情区，避免重复插入和重复 render：
if ($(tr).next('.order-detail-row').length) return; - 非首屏数据（比如第 500 行）首次展开时，可加 loading 状态，避免用户误以为卡死
复杂点在于：展开逻辑和表格重载、分页、搜索都耦合在一起，任何一次 table.reload() 都会让已展开的状态丢失，需要自己用 data.id 缓存展开状态并重置。
