vxe-table回显选中的表格项、不使用radio单选框，使用函数来限制复选框只能单选

### vxe-table 单选回显选中行解决方案 为了实现 `vxe-table` 的单选并且回显选中的行，可以采用以下方法： #### 绑定当前选中项的数据模型 通过绑定一个数据属性来存储当前选中的行。当表格加载完成或者有新的数据更新时，遍历数据源并与已保存的选择状态对比。 ```javascript // 假设这是 Vue 实例的一部分选项配置 data() { return { selectedRowId: null, // 存储被选中行的唯一标识符 tableData: [ { id: '1', name: 'Alice' }, { id: '2', name: 'Bob' } ] }; }, methods: { handleSelectionChange(selection) { this.selectedRowId = selection.length ? selection[0].id : null; }, loadTableWithSelectedRow() { const foundIndex = this.tableData.findIndex(item => item.id === this.selectedRowId); if (foundIndex !== -1) { this.$nextTick(() => { this.$refs.xTable.setCurrentRow(this.tableData[foundIndex]); }); } } } ``` #### 初始化完成后设置默认选中行 在组件挂载之后调用自定义的方法去恢复之前的状态，在此期间可以通过 API 设置某一行作为初始状态下已被选中的记录[^1]。 ```html <template> <div> <!-- ... --> <vxe-table ref="xTable" :data.sync="tableData" @select-change="handleSelectionChange"> <!-- 列定义省略 --> </vxe-table> </div> </template> <script> export default { mounted() { this.loadTableWithSelectedRow(); } }; </script> ```