el-table selection 单选

### 实现 `el-table` 单选功能

为了实现在 Element UI 的 `el-table` 中的单选选择功能，可以自定义表格列并绑定点击事件来控制每一行的选择状态。下面是一个具体的实现方法：

#### HTML 部分
创建一个带有唯一键属性的数据表，并移除默认多选框配置。

<template>
  <div>
    <!-- 移除了type="selection" -->
    <el-table :data="tableData" @row-click="handleRowClick">
      <el-table-column prop="date" label="日期"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="address" label="地址"></el-table-column>
    </el-table>
  </div>
</template>

#### JavaScript 部分
通过 Vue 组件的方法处理行点击逻辑，在数据对象中维护当前被选中的项。

<script>
export default {
  data() {
    return {
      tableData: [
        { date: '2016-05-03', name: 'Tom', address: 'No. 189, Grove St, Los Angeles' },
        { date: '2016-05-02', name: 'John', address: 'New York No. 1 Lake Park' }
      ],
      selectedRow: null // 存储当前选中的行
    };
  },
  methods: {
    handleRowClick(row) {
      this.$refs.table.clearSelection(); // 清空之前的选择
      if (this.selectedRow === row) {
        this.selectedRow = null;
      } else {
        this.selectedRow = row;
        this.$nextTick(() => {
          this.$refs.table.toggleRowSelection(row); // 切换选中状态
        });
      }
    }
  }
};
</script>

注意这里使用了 `$refs.table.clearSelection()` 来清除之前的任何已选项，从而确保每次只有一行处于选中状态[^1]。

此外还需要给 `<el-table>` 添加 `ref="table"` 属性以便于调用其 API 方法。