Layui 2.8版本如何实现表格的单选模式并获取选中行数据-Layui教程-PHP中文网

需在cols中显式配置{type: 'radio', fixed: 'left'}，name属性统一、value唯一且初始化即存在；默认选中靠数据字段驱动；获取选中行应使用table.on('radio')事件回调中的obj.data，避免checkStatus().data[0]时机错误。

怎么配出单选列，而不是复选框

必须在 cols 里显式声明 {type: 'radio', fixed: 'left'}，不能只写 {type: 'checkbox'} 然后指望它变单选。layui 不会自动转换类型，type 值写错就根本不会渲染单选按钮。

常见错误是漏掉 fixed: 'left' —— 虽然不加也能显示，但点击时可能触发多次事件或状态错乱；加了能确保 radio 在左侧固定列，行为更稳定。

radio 列必须放在 cols 数组最前面（或至少是 fixed 列），否则样式和事件绑定容易异常
别在 templet 里手动写 <input type="radio">，Layui 会接管并清空 checked 属性
如果用了 toolbar，radio 列要避开 toolbar 操作区，否则点击工具栏按钮可能误触发单选

如何让某一行默认被选中

靠数据字段驱动，不是靠 API 调用。比如原始数据里有 {id: 101, name: "张三", is_selected: true}，就在 radio 列的 templet 函数里判断：

{field: 'id', title: '操作', templet: function(d) {
  return '<input type="radio" name="selectRow" value="' + d.id + '" checked :>';
}}

注意三点：

name 属性必须一致（如 name="selectRow"），否则浏览器无法实现单选互斥
value 必须有且唯一，后续取值全靠它；没 value 就算点了也拿不到标识
初始化前就得把 is_selected 字段塞进原始 data 或接口返回的数据里，渲染完再改没用

点击行时怎么同步选中对应 radio

启用 rowClickToCheck: true 是最简方案，但仅在配置了 type: 'radio' 的前提下生效。它本质是模拟点击该行 radio，所以必须确保 radio 列已存在且可交互。

如果需要自定义逻辑（比如禁用某些行的点击选中），就换监听 row(filter) 事件：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

table.on('row(test-table)', function(obj) {
  // 手动触发 radio 选中：先清空所有，再设当前行
  var cache = table.cache['test-table'];
  cache.forEach(function(row) { delete row.layuiTableRadioChecked; });
  obj.data.layuiTableRadioChecked = true;
  table.reload('test-table', { done: function() {
    // 重载后调用 checkStatus 才能拿到最新选中项
  }});
});

不过更推荐的做法是：直接用 table.checkStatus('test-table').data 取值，它天然只返回当前页唯一选中行（radio 模式下 data 数组长度最多为 1）。