Layui表格实现单选需监听table.on('checkbox')事件,在勾选时反选其他行,并在done回调中为每行checkbox绑定原生click事件以支持取消;禁用行需用templet渲染并过滤checkStatus结果。
监听 table.on('checkbox') 拦截勾选行为
单选不是靠配置开关,而是每次有行被勾选时,立刻反选其他已选项。必须用 table.on('checkbox') 事件监听,不能只改列定义或加 css。obj.checked 为 true 时说明当前行正被选中,这时要马上调用 table.checkstatus() 拿到当前页所有已选项,再遍历它们,对非当前行的数据调用 table.uncheckrow()。
- 必须依赖行数据里的唯一字段(如
id),别用index,翻页或排序后索引会失效 - 事件监听一定要写在
table.render()之后,且确保表格已渲染完成;推荐放在done回调里执行绑定 - 不要在列定义中写
type: 'radio'—— Layui 完全不识别这个值,会直接忽略
点击已选行时也要支持取消
Layui 默认点击已勾选项不会触发 checkbox 事件,所以你写的反选逻辑根本不会运行。这是最常漏掉的一环。
- 得在
done回调里,给每行的 checkbox 元素单独绑定原生click事件 - 在 click 处理函数中,先判断该 checkbox 是否已勾选(
e.target.checked === true),再手动调用table.uncheckRow() - 记得加
e.stopPropagation(),否则会冒泡触发外层的checkbox事件,造成重复操作
禁用多选本质是“强制修正状态”,不是隐藏或多选属性
所谓“禁用多选”,实际是让 UI 和内部状态始终维持单选:哪怕用户快速连点两行,第二行勾选后第一行必须立刻取消。这和浏览器原生 radio 不同,Layui 没有单选组概念,全靠 JS 主动干预。
- 不能只靠
disabled属性或禁用 DOM,那只是视觉禁用,用户仍可通过全选框、键盘操作等方式绕过 - 如果表格开了
height虚拟滚动,table.checkStatus()在 >2000 行时会有明显延迟,建议限制单选场景的数据量,或换用分页+ID 缓存方式优化 - 服务端若需提交单选结果,注意只取
table.checkStatus().data[0],别用.data数组长度做判断,它可能为空(没选中时)或超长(状态未及时清理)
禁用某几行的 checkbox 需配合 templet 渲染
单选模式下,某些行可能天生不可选(比如状态为 closed 的记录)。这时不能只靠事件拦截,得从渲染源头控制:用 templet 替代默认 type: 'checkbox' 列,手动生成带 disabled 属性的 <input>。
- 模板里必须保留
name="layTableCheckbox",这是 Layui 内部识别多选/单选行为的关键标识 - 禁用行的
checked属性也得显式写,否则即使数据里layChecked: true也不会生效 -
table.checkStatus()返回结果仍包含禁用行,使用前务必手动过滤:checkStatus.data.filter(d => !d.status === 'closed')











