vue3+elementplus el-table表格实现单选

在Vue 3和Element Plus中，要实现el-table的单选功能，你可以使用el-table的@select和@select-all事件来处理行的选中状态。以下是一个简单的例子：

<template>
  <el-table
    :data="tableData"
    @select="handleSelect"
    @select-all="handleSelectAll"
    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 setup>
import { ref } from 'vue';
 
const tableData = ref([
  {
    date: '2016-05-03',
    name: 'Tom',
    address: 'No. 189, Grove St, Los Angeles',
  },
  // ...更多数据
]);
 
const handleSelect = (selection, row) => {
  // 单选逻辑处理
  console.log('选中的行:', row);
};
 
const handleSelectAll = (selection) => {
  // 全选逻辑处理
  console.log('全选的行:', selection);
};
</script>

在这个例子中，handleSelect方法会在用户选中表格中的某一行时被调用，并接收选中的行数据。handleSelectAll方法会在用户选择全选或取消全选时被调用，并接收到所有选中行的数组。你可以在这些方法中实现你的逻辑，比如设置一个单选的状态变量，或者进行其他的操作。