layui table单选应优先用type: 'radio',需确保每行有唯一id;若强制用checkbox模拟单选,须监听checkbox事件,清空其他行LAY_CHECKED并调用setRowChecked或reload同步视图。
layui table 复选框默认是多选,怎么改成单选
layui 的 table.render() 默认开启复选框列(type: 'checkbox')时,行为是多选 —— 这不是 bug,是设计如此。要实现“单选”,本质是**禁用多选逻辑,手动接管点击行为,确保同一时间最多一个 checked 状态**。
用 type: 'radio' 替代 type: 'checkbox' 最简单
layui 从 2.8.0 开始原生支持 type: 'radio',它会渲染为单选按钮,自动处理互斥逻辑,无需额外监听或干预。
- 仅适用于「整行单选」场景,不支持跨页记忆(每页独立)
- 必须配合
id字段(用于唯一标识行),否则 radio 无法分组,会全部可选 - 如果数据没带
id,得在cols中用templet手动写<input type="radio">,但失去 layui 内置的事件绑定和样式统一
table.render({
elem: '#demo',
cols: [[
{type: 'radio', width: 40}, // 关键:这里改用 radio
{field: 'name', title: '姓名'}
]],
data: [
{id: '1', name: '张三'},
{id: '2', name: '李四'}
]
});
不用 radio 时,如何用 checkbox 模拟单选
当 UI 规范强制要求显示为复选框图标(✓),但逻辑要单选,就得拦截默认行为。核心是:点击任意 checkbox 时,先清空所有已选,再勾选当前行。
- 必须监听
table.on('checkbox(test)')事件,不能只靠click绑定 —— layui 的 checkbox 是动态生成的 - 事件回调里调用
table.checkStatus('test')获取当前状态,再用table.cache['test']遍历所有行并重置LAY_CHECKED属性 - 别忘了调用
table.reload()或手动触发table.setRowChecked()(v2.9+)来同步视图,否则界面不更新 - 注意分页:跨页单选需自己维护全局选中 ID,
table.cache只存当前页数据
为什么不要直接操作 DOM 的 checked 属性
layui 的 checkbox 状态不完全依赖原生 DOM 的 checked,它还依赖行数据对象上的 LAY_CHECKED 标记和内部索引。直接改 DOM:
- 会导致
table.checkStatus()返回结果与界面不一致 - 翻页后状态丢失(因为没同步到数据源)
- 全选/反选功能失效(它们依赖
LAY_CHECKED) - 在 IE 或低版本浏览器中可能触发重复渲染或卡顿
真正可靠的路径只有两条:用 type: 'radio',或者用 layui 提供的 API(setRowChecked / reload + 数据层更新)做状态同步。
单选这事看着小,但混用 DOM 操作和 layui 数据流是最容易埋坑的地方 —— 表面能点,一翻页、一搜索、一 reload 就露馅。











