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
      }
    }


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM