vue3中el-table 复选框设置为单选

在Vue 3中，要将el-table中的复选框设置为单选，可以通过@selection-change事件来控制。以下是一个简单的实现方法：

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>
 
<script setup>
import { ref } from 'vue';
 
const tableData = ref([{...}, {...}, ...]); // 表格数据
const selectedRow = ref(null); // 当前选中的行
 
// 处理选择变化
function handleSelectionChange(selection) {
  if (selection.length > 1) {
    // 如果已经有选中项，再次选中会清除之前的选择
    this.selectedRow = selection[0];
    this.$refs.multipleTable.clearSelection();
    // 选中当前参数中的第一项
    this.$refs.multipleTable.toggleRowSelection(this.selectedRow, true);
  } else {
    this.selectedRow = selection[0];
  }
}
</script>

在这个例子中，我们定义了一个名为selectedRow的响应式引用来保存当前选中的行。我们通过@selection-change事件处理函数handleSelectionChange来控制选中项的数量，当选中项超过一个时，清除之前的选择，并且只保留最新选中的那一项。这样就实现了复选框的单选功能。