el-table 用 el-radio 实现单选功能

el-table 是 Element UI 中的一个表格组件，用于展数据。而 el-radio 是 Element UI 中的一个单选框组件，用于在多个选项中选择一个。

要使用 el-radio 实现 el-table 的单选功能，可以通过以下步骤实现：

1. 在 el-table 的列定义中添加一个列，用于显示单选框。可以使用 el-table-column 组件，并设置 type 属性为 'selection'，这样就会在每一行的最前面显示一个单选框。

2. 在 el-table 的配置项中，设置属性 @selection-change，绑定一个方法来处理单选框的选择变化事件。在这个方法中，可以获取到当前选中的行数据。

3. 在 el-table 的配置项中，设置属性 :row-key，指定每一行数据的唯一标识符。这样在选择变化事件中可以通过这个标识符来获取到选中的行数据。

下面是一个示例代码：

<template>
  <el-table
    :data="tableData"
    :row-key="row => row.id"
    @selection-change="handleSelectionChange"
  >
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        { id: 1, name: '张三', age: 20 },
        { id: 2, name: '李四', age: 25 },
        { id: 3, name: '王五', age: 30 },
      ],
      selectedRow: null,
    };
  },
  methods: {
    handleSelectionChange(selection) {
      this.selectedRow = selection[0];
    },
  },
};
</script>

在上面的示例中，el-table 组件绑定了一个名为 tableData 的数组作为数据源，每一行数据都有一个唯一的 id 属性。el-table-column 组件设置了两个列，一个是用于显示单选框的列，另外两个是用于显示姓名和年龄的列。在 @selection-change 事件中，通过 selection 获取到选中的行数据，并将其赋值给 selectedRow 变量。