elementui禁用树形结构全部复选框

需求:编辑回显数据后,禁用树形结构复选框,不可选中,无复选框也不可选中

    <el-tabs v-model="activeName" @tab-click="handleClick" >
        <el-tab-pane label="左侧复选框" name="user" :disabled="userdisabled">
          <el-tree class="erTree" ref="tree" :data="trees" show-checkbox node-key="id" @check="handleNode" default-expand-all
            :props="defaultProps" highlight-current :expand-on-click-node="autoNode">
          </el-tree>
        </el-tab-pane>
        <el-tab-pane label="右侧无复选框" name="org" :disabled="orgdisabled"> //disabled阻断tab切换
          <el-tree class="erTree" ref="tree1" :data="trees" node-key="id" @node-click="handleNodeClick" default-expand-all
            :props="defaultProps" highlight-current :expand-on-click-node="autoNode">
            <span class="el-tree-node__label" slot-scope="{ node, data }">
              <span>
                  <i :class="node.icon"></i>{{ node.label }}
              </span>
            </span>
          </el-tree>
        </el-tab-pane>
      </el-tabs>

//data-----------
  defaultProps: {
        label: 'name',
        disabled: this.disabledFn,
      },
//methods----------
    disabledFn() {
      if (this.dialogtitle == "编辑") {
        return true
      } else if (this.dialogtitle == "新建") {
        return false
      }
    }
posted @ 2019-11-08 15:04  Edith6  阅读(4528)  评论(0编辑  收藏  举报