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-columntype="selection"width="55"></el-table-column><el-table-columnlabel="日期"width="120"><template #default="scope">{{ scope.row.date }}</template></el-table-column><el-table-columnlabel="姓名"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> 的单选行筛选功能。