vue3 el-table实现单选

### 如何在 Vue3 中使用 Element Plus 的 `el-table` 组件实现单选功能 为了实现在 Vue3 和 Element Plus 中通过 `el-table` 组件提供单选功能，可以通过监听表格的选择事件并控制其行为来完成。以下是具体实现方式： #### 数据绑定与逻辑处理 首先，在组件的数据模型中定义一个变量用于存储当前被选中的行数据。当用户点击某一行时，更新该变量，并清除其他已有的选择状态。 ```javascript <script setup> import { ref } from 'vue'; const selectedRow = ref(null); // 当前选中的行 const tableData = [ { id: 1, name: 'Alice', age: 24 }, { id: 2, name: 'Bob', age: 30 }, { id: 3, name: 'Charlie', age: 28 } ]; function handleSelectionChange(row) { if (selectedRow.value && row.id === selectedRow.value.id) { selectedRow.value = null; // 如果再次点击同一行，则取消选中 } else { selectedRow.value = row; } clearOtherRows(); // 清除其他行的选中状态 } function clearOtherRows() { const rows = Array.from(document.querySelectorAll('.single-select-row')); rows.forEach((row) => { row.classList.remove('active'); }); if (selectedRow.value) { document.querySelector(`[data-id="${selectedRow.value.id}"]`).classList.add('active'); } } </script> ``` #### 自定义样式与模板结构 通过设置 CSS 类名以及 HTML 属性的方式，可以轻松调整 UI 样式以适应需求。例如，将默认复选框替换为圆形图标或其他视觉效果。 ```html <template> <div> <el-table :data="tableData" @row-click="handleSelectionChange"> <el-table-column prop="id" label="ID"></el-table-column> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <!-- 添加额外列显示选中状态 --> <el-table-column width="50px"> <template #default="{ row }"> <span v-if="isSelected(row)" class="circle-selected">●</span> <!-- 圆形表示 --> <span v-else></span> </template> </el-table-column> </el-table> </div> </template> <style scoped> .circle-selected { color: green; font-size: 16px; } .single-select-row.active { background-color: lightblue !important; } </style> ``` 上述代码片段实现了以下几点[^1]: - 使用 `@row-click` 方法捕获用户的点击操作。 - 动态判断哪一行处于激活状态并通过条件渲染展示对应的标记（如绿色圆点）。 - 提供了一个简单的机制允许开发者进一步扩展交互逻辑或者美化界面设计。 #### 注意事项 需要注意的是，如果存在分页或多级嵌套场景下应用此方案可能需要额外考虑全局唯一标识符管理等问题以便准确追踪每一条记录的状态变化情况。 --- ###