el-table 单选

<template>
  <el-table
    :data="tableData"
    @select="handleSelect"
    @select-all="handleSelectAll"
    ref="singleTable"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      prop="date"
      label="日期"
      width="180">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="address"
      label="地址">
    </el-table-column>
  </el-table>
</template>

<script>
  export default {
    data() {
      return {
        tableData: [{
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }, {
          date: '2016-05-04',
          name: '张小刚',
          address: '上海市普陀区金沙江路 1517 弄'
        }, {
          date: '2016-05-01',
          name: '李小红',
          address: '上海市普陀区金沙江路 1519 弄'
        }, {
          date: '2016-05-03',
          name: '周小伟',
          address: '上海市普陀区金沙江路 1516 弄'
        }],
        selectedRow: null
      }
    },
    methods: {
      handleSelect(selection, row) {
        // 当选择项发生变化时，清空已选中的项，并选中当前项
        if (selection.length > 1) {
          this.$refs.singleTable.clearSelection();
          this.$refs.singleTable.toggleRowSelection(row);
        }
        this.selectedRow = row;
      },
      handleSelectAll(selection) {
        // 禁用全选功能
        if (selection.length > 0) {
          this.$refs.singleTable.clearSelection();
        }
      }
    }
  }
</script>

1. type=“selection” 创建了一个选择列，其中包含单选框。
2. @select 事件监听器 handleSelect 被用来处理选择行的逻辑。当用户选择一个行时，如果已经有行被选中，则取消之前的选择，并选中当前行。
3. @select-all 事件监听器 handleSelectAll 被用来禁用全选功能，确保只能单选。
4. ref=“singleTable” 是为了在 Vue 组件中能够引用 el-table 实例，从而可以调用 clearSelection 和 toggleRowSelection 方法。