vue3 实现el-table单选

要实现el-table单选，可以按照以下步骤进行操作：

1.在el-table组件中添加属性highlight-current-row，设置为true，表示高亮当前行。

2.在el-table组件中添加属性@row-click，绑定一个方法，用于处理行点击事件。

3.在绑定的方法中，使用toggleRowSelection方法进行校验数据默认选中以及切换某一行的状态。

具体代码如下：

<template>
  <el-table
    :data="tableData"
    highlight-current-row
    @row-click="handleRowClick"
    :row-class-name="tableRowClassName"
  >
    <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>
</template>

<script>
export default {
  data() {
    return {
      tableData: [
        {
          date: '2022-01-01',
          name: '张三',
          address: '北京市朝阳区'
        },
        {
          date: '2022-01-02',
          name: '李四',
          address: '上海市浦东新区'
        },
        {
          date: '2022-01-03',
          name: '王五',
          address: '广州市天河区'
        }
      ]
    }
  },
  methods: {
    handleRowClick(row) {
      this.$refs.table.toggleRowSelection(row)
    },
    tableRowClassName({ row }) {
      if (row === this.$refs.table.store.states.currentRow) {
        return 'current-row'
      }
      return ''
    }
  }
}
</script>

<style>
.current-row {
  background-color: #f5f7fa;
}
</style>