elementui table 添加单选按钮

要在 ElementUI 表格中添加单选按钮，需要使用 `el-radio` 组件和 `selection-change` 事件来处理选项的选择。以下是一个示例：

<template>
  <div>
    <el-table
      :data="tableData"
      :columns="tableColumns"
      @selection-change="handleSelectionChange"
      :selectable="row => !row.disabled"
      :row-class-name="row => row.disabled ? 'disabled-row' : ''"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column prop="name" label="Name"></el-table-column>
      <el-table-column prop="age" label="Age"></el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { name: 'John', age: 24 },
        { name: 'Jane', age: 28 },
        { name: 'Bob', age: 32, disabled: true }
      ],
      selectedRow: null
    }
  },

  computed: {
    tableColumns() {
      return [
        { type: 'selection', width: '55' },
        { prop: 'name', label: 'Name' },
        { prop: 'age', label: 'Age' },
        { label: 'Select', width: '80', render: row => {
          return (
            <el-radio
              v-model={this.selectedRow}
              :label={row}
              disabled={row.disabled}
            />
          )
        }}
      ]
    }
  },

  methods: {
    handleSelectionChange(selection) {
      this.selectedRow = selection.length ? selection[0] : null
    }
  }
}
</script>

在上面的示例中，我们使用了 `type="selection"` 来添加 ElementUI 表格的默认选择列，并使用了 `selection-change` 事件来更新选定的行。我们还使用了 `selectable` 属性来确定哪些行是可选的，使用 `row-class-name` 属性来为不可选的行添加 CSS 类名。

在 `computed` 中，我们添加了一个自定义列 `Select`，使用了 `render` 函数来渲染 `el-radio` 组件。我们将 `v-model` 绑定到 `selectedRow` 变量，将 `:label` 绑定到当前行数据，将 `disabled` 属性设置为当前行是否可选。最后，在 `handleSelectionChange` 方法中，我们将选定的行存储在 `selectedRow` 变量中以供后续使用。

希望这可以帮助你添加单选按钮到 ElementUI 表格中。