el-table 单选按钮回显

### 实现 el-table 单选按钮回显功能 在 Vue 中使用 Element UI 的 `el-table` 组件时，如果需要实现单选按钮的回显功能，可以通过以下方式完成： #### 数据准备 为了实现回显功能，首先需要确保表格数据中有唯一的标识符（如 `id` 或其他唯一键）。通过该标识符匹配已选中的项。 ```javascript // 假设这是表格的数据源 const tableData = [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }, { id: 3, name: 'Item 3' } ]; // 已选中的项，默认情况下可能从接口获取 const selectedId = 2; ``` #### 初始化回显逻辑 在页面加载完成后，利用 `this.$nextTick()` 方法遍历表格数据并设置初始选中状态。以下是具体的实现代码： ```javascript methods: { initSelection() { this.$nextTick(() => { const selectedRow = this.tableData.find(row => row.id === this.selectedId); if (selectedRow && this.$refs.singleTable) { this.$refs.singleTable.toggleRowSelection(selectedRow, true); // 设置选中状态 } }); }, handleSelectionChange(val) { if (val.length > 1) { this.$refs.singleTable.clearSelection(); this.$refs.singleTable.toggleRowSelection(val.pop(), true); // 只允许单选 } else { this.selectedRow = val[0]; } } } ``` #### 表格模板配置 在模板部分定义 `el-table` 并绑定相关事件和属性： ```html <el-table ref="singleTable" :data="tableData" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55"></el-table-column> <el-table-column prop="name" label="名称"></el-table-column> </el-table> <!-- 调用初始化方法 --> <script> export default { data() { return { tableData: [{ id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' }], selectedId: 2, selectedRow: null }; }, mounted() { this.initSelection(); // 页面加载后调用初始化函数 } }; </script> ``` 以上代码实现了如下功能： - **回显**：当页面加载时，自动根据 `selectedId` 找到对应的行并将其标记为选中状态[^1]。 - **单选控制**：监听 `@selection-change` 事件，在用户选择多于一项时清空之前的选项只保留最后一项[^2]。 #### 注意事项 - 确保 `tableData` 和 `selectedId` 的数据结构一致，否则可能导致无法正确匹配。 - 使用 `$nextTick` 是因为 DOM 更新可能存在延迟，需等待渲染完毕后再操作表格实例[^3]。 --- ### 示例总结 最终效果是一个支持单选且能够正确回显的 `el-table` 组件。通过合理处理数据匹配与事件响应机制，可以满足大多数场景下的需求。 ```python print("El-table 单选回显成功") ```