layui table单选需监听row事件并调用table.checkRow()和table.clearCache()同步DOM与缓存,禁用checkCol,不可直接操作radio元素,否则checkStatus返回异常。
layui table 单选模式下如何用 click 行事件控制 radio 勾选
layui 的 table.render() 默认不提供单选行(点击即选中该行、取消其他行)的内置支持,必须手动监听 row 事件并操作表格内部的 input[type="radio"] 元素。关键在于:不能只改数据,得同步触发 dom 状态和 layui 内部的选中状态缓存。
- 确保列配置中启用了
checkbox或radio类型(推荐用type: "radio",更语义化) - 必须关闭
checkCol: false(默认为 true),否则会多出一列 checkbox,干扰 radio 行为 - 监听
row事件而非tool或event,因为它是点击任意行区域都触发的底层事件 - 调用
table.checkRow()是最稳妥的方式——它会自动处理渲染、状态同步、data缓存更新
为什么直接操作 input[type="radio"] 会失效
layui 表格的 radio 行选中不是靠原生 input 的 checked 属性驱动的,而是由 table.checkRow() 和内部 _this.status 对象协同管理。手动设置 elem.checked = true 只改了 DOM,但 table.cache 和当前选中行索引不会更新,后续调用 table.checkStatus() 就拿不到正确结果。
- 现象:点击后视觉上像选中了,但
table.checkStatus("id")返回空数组或旧数据 - 原因:layui 没有监听原生 radio 的
change事件来反向同步状态 - 正确做法:统一走
table.checkRow()接口,它内部会触发重绘、更新缓存、并触发row回调
完整可运行的单选逻辑写法
假设表格实例 ID 是 "userTable",且已启用 type: "radio" 列:
table.on('row(userTable)', function(obj){
// 清除之前所有选中(包括视觉和缓存)
table.clearCache('userTable');
// 仅勾选当前行(注意:index 是 layui 内部索引,非原始 data 数组下标)
table.checkRow('userTable', obj.data);
});
-
obj.data必须传入,不能传obj.tr或obj.index——checkRow()要靠它匹配 cache 中的数据对象 -
table.clearCache()是必须的,否则多次点击后会出现“多个 radio 显示为选中”但实际只有一行在checkStatus中的现象 - 如果表格开启了分页,
checkRow()仍有效,它会把选中状态绑定到数据本身,跨页保持一致(只要没刷新)
兼容性与边界注意点
这个方案在 layui 2.8.x ~ 2.9.x 下稳定,但在 2.7.x 中 table.checkRow() 尚未开放为公共 API,需降级使用私有方法或自行维护选中状态变量。
- 若用的是 layui 2.7.x,可改用:
obj.tr.siblings().find('input[name="layTableRadio"]').prop('checked', false);+ 手动更新一个全局currentSelected变量 - 当表格设置了
height: "full-xx"或使用虚拟滚动时,row事件可能不触发,应改用event绑定到.layui-table-body上 - 不要在
row回调里调用table.reload(),会导致选中状态丢失——如需刷新后保留,得先缓存obj.data.id,reload 完再checkRow()
table.clearCache() 这一步,看起来只是“清缓存”,但它决定了 radio 视觉是否干净、checkStatus 是否可信。


















