Layui.table需在done回调中为每行tr手动插入带layui-table-expand-content类的展开行，先移除已有展开行再插入，用data-expanded记录状态，异步加载后调用resize，翻页后需重新绑定。

layui.table 原生不支持展开行，必须手动插入 tr 并控制显隐；直接写 rowExpand 或在 cols 里加“展开”列会破坏渲染、错位甚至报错。

怎么安全插入展开行而不被 layui 覆盖或错位

不能用 $("#tableId").next().after() 插入 —— 容易插到分页栏下面，或被 layui 重绘清空。正确时机是在 done 回调中操作 DOM：

• 遍历 $("tbody tr[data-row-index]")，对每一行 tr 手动调用 .after() 插入新 tr
• 新 tr 必须带 class layui-table-expand-content（Layui 默认隐藏该类）
• td 必须设 colspan，值取自 layui.table.config["yourTableId"].cols[0].length，不能写死
• 避免在 cols 中配置任何“展开”列，否则干扰列宽计算和响应式

点击后如何控制展开/收起并防止重复插入

每次点击都 .append() 会导致多个展开行堆叠。必须先清理再插入：

• 用 $(tr).next('.layui-table-expand-content') 查找当前行下方是否已有展开行
• 存在则先 .remove()，再 .after() 新的展开行
• 用 data-expanded="true" 记录状态，而不是仅靠 class 判断（避免 class 被其它逻辑污染）
• 展开内容建议用
  ...
  包裹，方便后续 CSS 控制内边距与过渡

长备注内容怎么显示得自然又不卡顿

纯文本可直接塞进 td，但含 HTML 或需异步加载时容易出问题：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

• 如果备注字段本身是富文本（含
、
  ），记得在插入前用 $(...).html(content) 渲染，而非 .text()
• 若需异步加载（如点击才请求备注详情），务必在 AJAX success 后调用 layui.table.resize("yourTableId")，否则表格高度不自适应
• 避免在展开行里初始化子表格或复杂组件（如 laydate），Layui 不保证 DOM 稳定性，易触发 Cannot read property 'children' of null
• 动画靠 CSS 实现：.layui-table-expand-content { transition: max-height .2s ease, padding .2s ease; }，展开时设 max-height: 300px，收起时设 max-height: 0，不要用 height

最易被忽略的是：翻页后新加载的行不会自动绑定展开逻辑 —— done 回调必须每次都执行插入和事件绑定，不能只在首次 render 时做一次。