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

image.png

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

        <el-table-column type="selection" width="55" :reserve-selection="true" :selectable="selectEnable" />

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)
                }
              })
            }
          })
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容