antd design vue2 表格 添加单选框

在 Ant Design Vue2 表格中添加单选框可以通过以下步骤实现：

1. 首先在表格的 columns 属性中添加一个固定宽度的列，用于显示单选框。例如：

<template>
  <a-table :columns="columns" :data-source="dataSource" row-key="id">
    <!-- 其他列的配置 -->
  </a-table>
</template>

<script>
export default {
  data() {
    return {
      columns: [
        // 单选框列
        {
          title: '选择',
          width: '50px',
          customRender: (record, index, table) => {
            return <a-radio v-model={table.selectedRowKeys[0]} value={record.id}></a-radio>
          }
        },
        // 其他列的配置
        {
          title: '姓名',
          dataIndex: 'name'
        },
        {
          title: '年龄',
          dataIndex: 'age'
        }
      ],
      dataSource: [
        {id: 1, name: '张三', age: 18},
        {id: 2, name: '李四', age: 20},
        {id: 3, name: '王五', age: 22}
      ],
      selectedRowKeys: []
    }
  }
}
</script>

2. 在 data 中定义一个 selectedRowKeys 数组用于存储选中行的 key 值。

3. 在单选框的 customRender 函数中，使用 v-model 绑定 selectedRowKeys 数组，并将当前行的 id 值作为单选框的 value 属性值。

4. 最后，在表格的属性中使用 rowSelection 属性，并将 selectedRowKeys 数组传入 selectedRowKeys 属性中。例如：

<a-table :columns="columns" :data-source="dataSource" row-key="id" :row-selection="{selectedRowKeys: selectedRowKeys}">
  <!-- 其他列的配置 -->
</a-table>

这样就可以在 Ant Design Vue2 表格中添加单选框了。