elementui单选表格带勾选框

### ElementUI 实现单选表格带勾选框的功能 在 ElementUI 中实现单选表格并带有勾选框功能，可以通过 `toggleRowSelection` 方法来控制行的选中状态。当用户选择某一行时，首先清空之前的所有选中状态，然后仅选中当前行[^1]。此外，还可以通过监听 `@select` 事件来获取当前选中的行数据，并确保只有一行被选中[^2]。 以下是一个完整的示例代码： ```vue <template> <el-table :data="tableData" height="400" tooltip-effect="dark" style="width: 100%" border ref="multipleTable" @select="handleSelectTable" > <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-column prop="address" label="地址" show-overflow-tooltip></el-table-column> </el-table> </template> <script> export default { data() { return { tableData: [ { name: "张三", age: 28, address: "北京市朝阳区" }, { name: "李四", age: 24, address: "上海市浦东新区" }, { name: "王五", age: 30, address: "广州市天河区" }, ], multipleSelection: null, }; }, methods: { handleSelectTable(selection, row) { if (this.multipleSelection !== row) { this.$refs.multipleTable.clearSelection(); // 清空之前的选中状态 } if (selection.length === 0) { return; } this.$refs.multipleTable.toggleRowSelection(row, true); // 设置当前行为选中状态 this.multipleSelection = row; // 更新当前选中的行 }, }, }; </script> ``` ### 功能说明 - **`type="selection"`**：此列用于显示复选框。 - **`@select` 事件**：当用户点击复选框时触发该事件，参数 `selection` 表示当前选中的行数组，`row` 表示当前行的数据。 - **`clearSelection` 方法**：清除所有已选中的行。 - **`toggleRowSelection` 方法**：设置某一行的选中状态，参数 `row` 表示目标行数据，`true` 表示选中，`false` 表示取消选中[^1]。 ### 注意事项 - 如果需要支持动态更新或复杂逻辑（如父子节点关联），可以参考更高级的实现方式[^4]。 - 确保 `ref="multipleTable"` 被正确绑定到 `<el-table>` 元素上，以便调用其方法。 ---