Layui table需手动实现行展开功能：在done回调中动态插入colspan覆盖全列的详情行，用data-row-index定位并避免重复；通过事件委托绑定点击，以data-expanded记录状态，配合slideUp/slideDown控制显隐，异步加载时需缓存与错误处理。
layui table 如何启用行展开功能
layui 原生 table 模块不提供“点击行展开详情”的内置功能，必须手动实现。官方没有 rowexpand 或类似配置项，硬加会导致渲染异常或事件失效。
核心思路是：利用 done 回调在表格渲染完成后，为每行绑定点击事件，动态插入/切换一个隐藏的详情行（<tr><td colspan="n">...</td></tr>），并控制其显隐。
- 不能依赖
initSort或cellClick事件做展开——它们触发时机不对，且无法操作整行 DOM -
cols中不要写“展开”列，否则会干扰原列宽计算和响应式布局 - 展开行必须用
colspan覆盖全部列数，否则错位；列数需从cols[0].length动态读取，不能写死
如何安全插入展开行而不破坏 layui 渲染结构
直接用 $("#id").next().after(...) 很容易插到分页栏下面或被 layui 重绘覆盖。正确做法是在 done 回调里，遍历 tbody tr[data-row-index]，对每个 tr 手动追加子节点。
示例关键代码：
table.render({
elem: '#demo',
url: '/api/list',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '名称'}
]],
done: function(res, curr, count) {
// 确保只处理数据行（排除表头、无数据提示等）
$('tbody tr[data-row-index]').each(function() {
const $tr = $(this);
const index = $tr.data('row-index');
const data = res.data[index];
// 插入展开行（仅一次，避免重复）
if (!$tr.next('.detail-row').length) {
const colspan = $tr.find('td').length;
$tr.after(`
<tr class="detail-row" style="display:none;">
<td colspan="${colspan}" style="padding:12px 15px;">
<div>详情：${data.desc || '暂无描述'}</div>
</td>
</tr>
`);
}
});
}
});
- 务必检查
.detail-row是否已存在，否则翻页或重载后会重复插入 -
data-row-index是 layui 自动添加的属性，可用于精准定位对应数据项 - 不要用
append()到tr内部——tr下只能是td/th，否则破坏表格语义，导致样式错乱
点击事件绑定与展开状态管理
推荐用事件委托绑定，避免每次重载都重新 bind；同时用 data-expanded 属性记录状态，比单纯查 display 更可靠。
继续在 done 回调末尾加：
$('tbody').on('click', 'tr[data-row-index]', function() {
const $tr = $(this);
const $detail = $tr.next('.detail-row');
if ($detail.length === 0) return;
if ($tr.data('expanded')) {
$detail.slideUp(200, function() {
$tr.removeData('expanded');
});
} else {
$detail.slideDown(200, function() {
$tr.data('expanded', true);
});
}
});
- 不要用
toggle()—— layui 的 DOM 可能被内部重绘，导致状态不同步 - 展开内容若含表单或按钮，需在
slideDown完成后再初始化（如form.render()），否则 laydate/switch 等组件不生效 - 移动端点击区域小，建议给
tr加cursor: pointer并留出足够点击热区
展开内容异步加载时要注意什么
如果详情数据需单独接口获取（比如字段太多、权限隔离），不能在 done 里一次性拉完所有详情——会触发 N+1 查询，卡顿明显。
- 首次点击时再发请求，用
data-id作为参数，返回后填充.detail-row td div - 请求前加 loading 占位符：
$detail.find('div').html('<i class="layui-icon layui-icon-loading"></i> 加载中...') - 缓存已加载过的详情，避免重复请求：
const cache = {}; if (cache[id]) { ... } else { $.get(...) } - 注意错误处理：请求失败时显示友好提示，而不是留白或报错中断
细节容易被忽略：展开行高度变化会影响分页栏位置，若内容很长，建议限制最大高度 + 滚动，否则撑开整个页面布局。
