Layui表格无原生rowClick事件，需在done回调中用setTimeout延时绑定tbody tr点击事件，并从layui.table.cache读取对应行数据；须用命名空间解绑或事件委托避免重复触发，推荐以data-id匹配真实数据而非依赖index。
layui table 的 rowClick 事件怎么绑定
直接用 done 回调或 initdone 都没法捕获单行点击——layui 原生表格没提供 rowclick 事件。必须靠监听渲染后的 dom 元素，且要等表格重绘完成后再挂事件。
正确做法是在 done 回调里用 layui.table.cache 获取当前页数据，并给 .layui-table-body tbody tr 绑定事件：
table.render({
elem: '#demo',
url: '/api/list',
cols: [[{field:'id', title:'ID'}, {field:'name', title:'姓名'}]],
done: function(res, curr, count){
// 注意：这里必须用 setTimeout 或 nextTick，否则 DOM 还没更新
setTimeout(() => {
$('.layui-table-body tbody tr').on('click', function(){
const index = $(this).index();
const data = layui.table.cache['demo'][index]; // 'demo' 是 table 的 id 参数
layer.open({content: JSON.stringify(data), area: ['400px', '300px']});
});
}, 10);
}
});
- 别在
initDone里绑，它触发时表格 body 可能还没生成 -
layui.table.cache的 key 是你传给elem的选择器对应的 id（如#demo→ cache key 是demo） - 如果启用了分页，
index是当前页的行号，不是全量数据索引；需要结合curr和limit手动算真实下标
如何避免重复绑定导致多次弹窗
每次翻页、重载表格都会重新触发 done，若不清理旧事件，点一次就会弹出 N 个 layer。
解决方式只有两个：要么每次绑定前先解绑，要么只绑一次。
- 推荐用命名空间解绑：
$('.layui-table-body tbody tr').off('click.rowDetail').on('click.rowDetail', ...) - 或者把事件委托到父容器（更稳妥）：
$(document).on('click', '.layui-table-body tbody tr', ...)，但要注意避免跨页点击误触发 - 如果用了
table.reload()，记得同步调用$(document).off('click', '.layui-table-body tbody tr')再重绑
弹窗内容怎么匹配当前行的真实数据
直接读 $(this).find('td').eq(0).text() 不可靠——字段可能被格式化、隐藏、合并单元格，甚至带 HTML 标签。
必须从缓存里取原始数据，而不是 DOM 文本：
// ✅ 正确：从 cache 拿结构化数据 const cacheKey = 'demo'; // 表格实例名 const rowIndex = $(this).index(); const rowData = layui.table.cache[cacheKey][rowIndex];
- 如果用了
toolbar自定义工具栏，event参数里会带data，比 DOM 绑定更准 - 开启
id字段且设为lay-id属性时，可用$(this).attr('data-index')获取缓存下标（但依赖 layui 内部实现，不建议强依赖） - 如果表格开启了
loading: true，done触发时数据已就绪，可放心读 cache
移动端点击区域太小怎么办
默认只响应 <tr> 的点击，手指点不准，尤其在 iOS 上容易失焦。
- 加 CSS 扩展点击热区：
.layui-table-body tbody tr { padding: 12px 0; } - 把事件代理到
td更灵敏：$(document).on('click', '.layui-table-body tbody td', function(){...})，再用$(this).parent('tr')找行 - 避免在
td里放button或a标签，否则会拦截冒泡；需要的话，给它们加stopPropagation()
缓存索引和 DOM 索引的映射关系在分页/筛选后容易错位，最稳的方式是给每行 tr 加一个唯一 data-id，再用它查数据，而不是依赖 index()。这点很多人忽略，直到上线后发现第 3 页点第 1 行弹出的是第 1 页的数据。
