vue elementUI实现el-table 复选框默认选中,默认禁用,默认选中且禁用等效果

image.png

1、默认禁用效果
禁用用selectable控制

        

table的list数据需要有个字段标识是否禁用 例如canChoose

selectEnable(row, rowIndex) { // 复选框可选情况
      if (!row.canChoose) { // 禁用
        return false;
      } else {
        return true; 
      }
    },

2、默认选中效果
是否选中: this.$refs.multipleTable.toggleRowSelection(row, boolean)

    // 请求后拿到tableList后
   this.tableData.forEach((item, index) => {
            if (!item.canChoose) {  
              // 默认被选中且禁用
              this.$refs.multipleTable.toggleRowSelection(item, true);  // 如果只需要禁用 不需要这行
            }
            //  selectReady 是默认要选中的数据
            if (this.selectReady.length > 0) { 
              this.selectReady.forEach((obj, key) => {
                if (item.id == obj) { // 如果匹配上  代表当前角色下的用户  高亮选中
                    setTimeout(() => {
                        this.$refs.multipleTable.toggleRowSelection(item, true);
                    }, 100)
                }
              })
            }
          })

你可能感兴趣的:(vue elementUI实现el-table 复选框默认选中,默认禁用,默认选中且禁用等效果)