使用setCheckboxRow
api来设置表格项选中状态
/** 获取table的数据 */
async getTableData() {
const {
data: res } = await http.get("/api/list");
if(res.code !== 200) return
this.tableList = res.data;
// 回显选中表格项
this.$nextTick(() => {
const row = this.tableList.find(
(item) => item.id === this.selectedId
);
if (row) {
this.$refs.xTable.setCheckboxRow(row, true);
}
});
},
不使用radio单选框,使用函数来限制复选框只能单选
<vxe-table
...
-change="checkboxChange"
>
clearCheckboxRow
api清除所有选中,再设置用户选中的row选中
async checkboxChange({
row, rowIndex }) {
await this.$refs.xTable.clearCheckboxRow();
this.$refs.xTable.setCheckboxRow(row, true);
},
复选框只能单选,并且再次点击可取消
async checkboxChange({
row, rowIndex }) {
const isCheckedByCheckboxRow =
this.$refs.xTable1.isCheckedByCheckboxRow(row);
await this.$refs.xTable1.clearCheckboxRow();
this.$refs.xTable1.setCheckboxRow(row, isCheckedByCheckboxRow);
},