vue3 el-table 行筛选 设置为单选

在 Vue 3 中，使用 Element Plus 的 <el-table> 组件时，如果你想实现行筛选功能，并且要求这种筛选为单选（即每次只能选择一行），你可以通过结合使用 selection 模式和一些额外的逻辑来实现。

1. 设置表格为单选模式

首先，确保你的 <el-table> 组件设置了 @selection-change 事件监听器，并开启了行选择（selection）模式。

<template>
  <el-table
    :data="tableData"
    @selection-change="handleSelectionChange"
    ref="multipleTableRef"
    @row-click="handleRowClick"
    style="width: 100%">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="日期"
      width="120">
      <template #default="scope">{{ scope.row.date }}</template>
    </el-table-column>
    <el-table-column
      label="姓名"
      width="120">
      <template #default="scope">{{ scope.row.name }}</template>
    </el-table-column>
    <!-- 其他列 -->
  </el-table>
</template>

2. 实现单选逻辑

在 <el-table> 的 @selection-change 事件中，你可以控制最多只能选择一个选项。同时，你也可以通过 @row-click 事件直接设置单选效果。

<script setup>
import { ref } from 'vue';
import { ElTable } from 'element-plus';
 
const tableData = ref([/* 数据列表 */]);
const selectedRow = ref(null); // 用于存储当前选中的行数据
const multipleTableRef = ref(null); // 引用表格，用于调用 clearSelection 方法
 
// 处理行选择变化
const handleSelectionChange = (selection) => {
  if (selection.length > 1) {
    // 如果尝试选择多行，则取消之前的所有选择，只保留当前选中的行
    multipleTableRef.value.clearSelection(); // 清除所有选择
    if (selection[0]) { // 只保留第一项的选择状态，实现单选效果
      multipleTableRef.value.toggleRowSelection(selection[0], true); // 重新选择第一项
      selectedRow.value = selection[0]; // 更新选中行数据
    } else {
      selectedRow.value = null; // 如果没有选中任何行，则清空选中行数据
    }
  } else {
    selectedRow.value = selection[0]; // 更新选中行数据
  }
};
 
// 处理行点击事件，实现单选效果（可选）
const handleRowClick = (row, column, event) => {
  if (selectedRow.value !== row) { // 如果点击的行不是当前选中的行，则更新选中行数据和选择状态
    multipleTableRef.value.clearSelection(); // 清除所有选择
    multipleTableRef.value.toggleRowSelection(row, true); // 选择当前行
    selectedRow.value = row; // 更新选中行数据
  } else { // 如果点击的行就是当前选中的行，则不作处理（保持选中状态）或者可以选择取消选中（根据需求）
    multipleTableRef.value.clearSelection(); // 可选：取消选中状态，实现点击已选行不取消选择的效果（注释此行以保持点击已选行不取消选择）
  }
};
</script>

3. 使用 selectedRow 控制显示或逻辑处理

你可以根据 selectedRow 的值来控制某些逻辑或显示特定的UI元素。例如，你可以在表格下方显示当前选中行的详细信息：

<template>
  <div v-if="selectedRow">选中行的详细信息：{{ selectedRow }}</div>
</template>

通过这种方式，你可以实现在 Vue 3 和 Element Plus 中使用 <el-table> 的单选行筛选功能。