el-table 表格多行多列单选框 每列只能选一个

要实现 el-table 表格多行多列单选框，每列只能选一个，需要使用 el-radio-group 和 el-radio 组件配合使用。

1. 在 el-table 的 columns 中添加一个 type 为 selection 的列，用于显示单选框。

2. 在 el-table 的 data 中添加一个属性，用于存储每行选中的单选框的值。

3. 在 el-table 的 template 中，使用 el-radio-group 组件包裹 type 为 selection 的列，绑定 v-model 为每行选中的单选框的值。

4. 在 el-radio 组件中，绑定 v-model 为当前单选框的值，并设置相同的 name，以保证每列只能选一个。

示例代码如下：

<el-table :data="tableData" style="width: 100%">
  <el-table-column type="selection"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column prop="gender" label="性别"></el-table-column>
  <el-table-column prop="hobby" label="爱好"></el-table-column>
  <template slot-scope="scope">
    <el-radio-group v-model="scope.row.selected">
      <el-radio :label="1" :name="'gender'+scope.$index"></el-radio>
      <el-radio :label="2" :name="'gender'+scope.$index"></el-radio>
      <el-radio :label="3" :name="'gender'+scope.$index"></el-radio>
    </el-radio-group>
  </template>
</el-table>

export default {
  data() {
    return {
      tableData: [
        { name: '张三', age: 18, gender: 1, hobby: '篮球', selected: '' },
        { name: '李四', age: 20, gender: 2, hobby: '足球', selected: '' },
        { name: '王五', age: 22, gender: 3, hobby: '羽毛球', selected: '' },
        { name: '赵六', age: 24, gender: 1, hobby: '乒乓球', selected: '' },
      ],
    };
  },
};

在上面的代码中，每行数据都添加了一个属性 selected，用于存储选中的单选框的值。在 el-radio 组件中，绑定 v-model 为当前单选框的值，并设置相同的 name，以保证每列只能选一个。