vue3 el-table只能勾选一行数据，大于一行时其他禁用勾选

### Vue3 中 el-table 组件单选限制的实现逻辑 在 Vue3 的 `el-table` 组件中，如果需要实现仅允许勾选一行的功能，并且当选择超过一行时禁用其他行的勾选，则可以通过监听 `selection-change` 事件并动态控制每一行的选择状态来完成。 以下是具体的实现方法： #### 动态设置复选框的状态 通过绑定 `el-table-column` 的 `selectable` 属性，可以定义某一行是否可被选择。此属性接收一个函数作为参数，该函数返回布尔值以决定当前行是否可用[^1]。 ```javascript // 定义 selectable 函数 isSelectable(row, index) { // 如果已经有选中的行，并且不是当前行，则不可选 return !this.selectedRow || this.selectedRow === row; } ``` #### 处理选择变化 利用 `@selection-change` 事件监听用户的操作行为，在回调函数中更新已选中的行数据，并清除之前的选择项。 ```javascript handleSelectionChange(selection) { if (selection.length > 1) { const lastSelected = selection.pop(); this.$refs.table.clearSelection(); // 清除所有选择 this.$refs.table.toggleRowSelection(lastSelected, true); // 只保留最新的一次选择 } this.selectedRow = selection[0]; } ``` #### HTML 部分 将上述逻辑应用到模板中，确保每一步都按照预期执行。 ```html <template> <div> <el-table ref="table" :data="tableData" @selection-change="handleSelectionChange"> <!-- 添加 select 列 --> <el-table-column type="selection" width="55" :selectable="isSelectable"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> <el-table-column prop="age" label="年龄"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 28 }, { name: '李四', age: 30 }, { name: '王五', age: 25 } ], selectedRow: null, }; }, methods: { isSelectable(row, index) { return !this.selectedRow || this.selectedRow === row; // 控制是否可以选择 }, handleSelectionChange(selection) { if (selection.length > 1) { const lastSelected = selection.pop(); this.$refs.table.clearSelection(); // 清空之前的选项 this.$refs.table.toggleRowSelection(lastSelected, true); } this.selectedRow = selection[0]; // 更新当前选中的行 } } }; </script> ``` 以上代码实现了如下功能： - 当用户尝试选择多于一行的数据时，自动取消前面所有的选择，只保留最新的那一行。 - 使用 `selectable` 方法进一步增强用户体验，防止误触未满足条件的行[^2]。 --- ###