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

使用setCheckboxRowapi来设置表格项选中状态

 /** 获取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"
   >

clearCheckboxRowapi清除所有选中,再设置用户选中的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);
 },

猜你喜欢

转载自blog.csdn.net/qq_42611074/article/details/136056058