监听 radio 事件而非 checkbox:配置 {type: 'radio'} 后必须用 table.on('radio(filter)', callback) 监听,filter 需与 lay-filter 严格一致;obj.data 直接返回当前选中行原始数据,无需 checkStatus;仅点击圆点触发,rowClickToCheck: true 可扩展为整行点击选中。

监听 radio 事件而不是 checkbox
如果你在表格列中配置了 {type: 'radio'},但 table.on('checkbox(filter)', ...) 一直不触发,那是因为事件名写错了。单选框必须用 radio 事件名,不是 checkbox —— 这不是兼容写法,是硬性要求。
常见错误:列设了 type: 'radio',却还监听 checkbox,结果回调函数完全不执行,控制台也无报错,容易误以为是绑定时机或 filter 名不一致的问题。
-
table.on('radio(test-table)', callback)是唯一有效的监听方式 - filter(如
test-table)必须和table.render({ lay-filter: 'test-table' })中的值严格一致 - 事件只在用户**点击 radio 圆点**时触发,代码调用
setRowChecked不会自动触发该回调(除非手动加callbackFlag: true)
obj.data 就是你要的整行数据,别再查 checkStatus
单选场景下,radio 事件回调的 obj 参数里已经直接提供了当前被选中行的原始数据对象:obj.data。它只包含你在 cols 中定义了 field 的那些字段(比如 field: 'id' 对应后端返回的 id 字段),不是渲染后的 DOM 文本,也不是模板加工结果。
- 不需要、也不应该在
radio回调里再调table.checkStatus('test-table')去“取数据”——这是冗余且低效的 -
obj.value是该行的唯一标识,默认取lay-id或你传入的id字段值,可用于后续接口请求 - 如果
obj.data缺字段,检查是否后端没返回、或parseData没注入,而不是怪事件没拿到
必须有 type: 'radio' 列,且只能有一列
layui 表格不会因为监听了 radio 事件就自动渲染单选框。它完全依赖列配置。没有显式声明 {type: 'radio'},哪怕监听了 radio 事件也永远收不到回调。
- 该列建议放在
cols[0]或靠左位置,避免被fixed: 'left'的其他列遮挡 - 不能和
type: 'checkbox'混用在同一张表里,否则行为不可控 - 如果用了
fixed: 'left',注意总宽度别超限,否则 radio 列可能渲染失败或错位,导致点击无效
点击整行触发单选?得靠 rowClickToCheck: true 或手动模拟
默认情况下,只有点击 radio 圆点才触发 radio 事件。如果想实现“点击任意位置都选中该行”,有两个选择:
- 最简方案:在
table.render()配置中加上rowClickToCheck: true,但它**只在存在type: 'radio'列的前提下生效** - 自定义逻辑(如禁用某些行):监听
row(filter),然后手动清理旧选中、标记新行、再调table.reload()触发 UI 更新——注意 reload 会重绘,慎用于大数据量表格 - 别在
row回调里直接改obj.data.layuiTableRadioChecked = true就完事,这不会同步到 UI,必须 reload 或调setRowChecked
最容易被忽略的是:radio 事件不提供“取消”语义,上一行自动取消但不会再次触发回调;如果你需要感知“从 A 行切到 B 行”的全过程,得自己缓存上一次的 obj.data 并做比对。


















