el-table单选按钮

### 在 el-table 中实现单选按钮功能 为了在 `el-table` 中实现单选按钮功能，可以通过结合表格的 `selection-change` 事件和手动控制选中状态的方法来完成。以下是实现该功能的具体方法： 1. **使用 `type="selection"` 列**：虽然这是为多选设计的，但可以通过编程方式限制用户只能选择一行。 2. **监听 `@selection-change` 事件**：当用户选择某一行时，触发此事件，并通过逻辑确保只有一行被选中。 3. **调用 `clearSelection` 和 `toggleRowSelection` 方法**：这些方法可以用来清空当前选择并设置新的选中行。 以下是一个完整的代码示例： ```vue <template> <el-table ref="singleTable" :data="tableData" @selection-change="handleSelectionChange" style="width: 100%"> <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="name" label="名称" width="120"> </el-table-column> <el-table-column prop="age" label="年龄" width="120"> </el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: '张三', age: 24 }, { name: '李四', age: 30 }, { name: '王五', age: 28 } ], selectedRow: null // 用于存储当前选中的行 }; }, methods: { handleSelectionChange(selection) { if (selection.length > 0) { const currentRow = selection[0]; // 获取当前选中的行 this.$refs.singleTable.clearSelection(); // 清空所有选中状态 this.$refs.singleTable.toggleRowSelection(currentRow, true); // 手动设置当前行为选中状态 this.selectedRow = currentRow; // 更新当前选中的行 } else { this.selectedRow = null; // 如果没有选中行，则将选中行置为空 } } } }; </script> ``` #### 说明 - 使用 `el-table-column` 的 `type="selection"` 属性添加一个复选框列[^2]。 - 监听 `@selection-change` 事件，在事件处理函数中确保每次只能选中一行[^2]。 - 调用 `clearSelection` 方法清空所有选中状态，并通过 `toggleRowSelection` 方法重新设置当前选中的行。 ### 注意事项 - 如果需要完全自定义单选按钮样式，可以不使用 `type="selection"`，而是通过普通列渲染单选按钮，并结合点击事件手动控制选中状态。 - 确保在切换选中状态时更新相关数据模型以保持一致性。