elementui table 添加单选按钮

要在 ElementUI 的 Table 组件中添加单选按钮，可以使用 Table 的 slot-scope 属性结合 el-radio 组件来实现。

以下是一个示例代码：

<el-table :data="tableData" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="name" label="姓名"></el-table-column>
  <el-table-column prop="age" label="年龄"></el-table-column>
  <el-table-column label="操作">
    <template slot-scope="scope">
      <el-radio v-model="radio" :label="scope.row.id"></el-radio>
    </template>
  </el-table-column>
</el-table>

其中，通过 `type="selection"` 属性设置表格为多选模式，同时通过 `slot-scope` 属性获取到表格单元格的数据对象，然后使用 el-radio 组件来实现单选按钮的功能。在 el-radio 中使用 `v-model` 绑定一个值，这个值即为当前被选中的行的 id，可以在 `@selection-change` 事件中获取到选中的行数据。

data() {
  return {
    tableData: [
      { id: 1, name: '张三', age: 18 },
      { id: 2, name: '李四', age: 20 },
      { id: 3, name: '王五', age: 22 },
    ],
    radio: null,
  }
},
methods: {
  handleSelectionChange(val) {
    if (val.length === 1) {
      this.radio = val[0].id
    } else {
      this.radio = null
    }
  },
}

在 JS 中，定义一个 `radio` 变量来存储当前选中的行的 id，然后在 `@selection-change` 事件中，判断选中的行数量，如果是单选，则将选中的行的 id 赋值给 `radio`。如果没有选中行或选中的行数量大于 1，则将 `radio` 置为 null。