el-table排序后，单选选项不跟着变

### 关于 Element Plus 中 `el-table` 排序后单选框状态不同步的问题 在 Vue 3 和 Element Plus 的项目开发中，当使用 `el-table` 实现单选功能并启用排序时，可能会遇到排序后单选框的状态无法保持同步的情况。这是因为排序操作会重新渲染表格数据，而未绑定正确的唯一标识符可能导致选中的状态丢失。 以下是解决问题的具体方法： #### 绑定唯一的 `row-key` 为了确保每一行的数据具有唯一性，在 `el-table` 上设置 `row-key` 属性是非常重要的。通过指定每行的唯一键值（通常是数据库中的主键 ID），可以保证即使经过排序或其他操作，选中状态仍然能够正确关联到对应的数据项[^1]。 ```html <el-table :data="tableData" @selection-change="handleSelectionChange" row-key="id"> <el-table-column type="selection" width="55"/> <!-- 其他列 --> </el-table> ``` 上述代码片段展示了如何配置 `row-key` 属性来绑定每行的唯一标识符 `id`。 #### 动态管理选中状态 除了设置 `row-key` 外，还需要手动维护当前被选中的行。可以通过监听 `@selection-change` 事件获取最新的选中状态，并将其存储在一个变量中以便后续恢复。 ```javascript import { ref } from 'vue'; export default { setup() { const selectedRow = ref(null); function handleSelectionChange(selection) { if (selection.length > 0) { // 如果有新的选择，则更新selectedRow selectedRow.value = selection[0]; } } return { selectedRow, handleSelectionChange }; } }; ``` 此部分逻辑用于跟踪当前用户所选中的具体某一行记录。 #### 自定义复选框行为 为了让 `el-table` 支持真正的“单选”模式而不是默认的多选模式，可以在初始化阶段禁用所有其他行的选择状态，仅允许最新的一次点击生效。 ```javascript function toggleSingleSelect(row, tableRef) { const currentSelected = tableRef.value.selection; if (currentSelected.length === 0 || !currentSelected.includes(row)) { tableRef.value.clearSelection(); tableRef.value.toggleRowSelection(row); } } ``` 调用该函数时需传入目标行对象以及指向实际 DOM 节点实例化的引用 `tableRef`，从而精确控制哪一选项可被激活或清除其已有的标记。 最后记得将这些增强型交互机制集成至模板层面上去应用它们的效果: ```html <template> <div> <el-table ref="tableRef" :data="tableData" @cell-click="(row) => toggleSingleSelect(row, tableRef)"> <el-table-column type="selection" width="55"></el-table-column> <!-- 更多字段展示 --> </el-table> </div> </template> <script lang="ts"> // 定义组件脚本... </script> ``` 以上就是针对您提到的需求给出的一个较为完整的解决方案说明文档。