el-tree展开全部和折叠全部

3,529 阅读1分钟

之前做树的展开和折叠都是使用default-expand-all加v-if来实现el-tree的全部展开和折叠,这样虽然可以实现功能但是会比较消耗性能,而且如果加上比较复杂的功能会出现一些不好修复的BUG。

下面教大家一个新的方法不仅可以避免以上问题还可以获得更好的用户体验

      <el-switch
        v-model="switchValue"
        @change="switchCheange"
        active-color="#13ce66"
        inactive-color="#ff4949">
      </el-switch>
      <el-tree
      ref="treeRef"
      :props="props"
      :data="treeData"
      node-key="id"
      show-checkbox
      :default-checked-keys="defaultCheckedKeys"
      :default-expand-all="isExpand"
      @check-change="handleCheckChange">
       // 这里default-expand-all不是响应式的,这行代码可以删掉,这里只做展示
    </el-tree>
    
    switchCheange(){
      this.isExpand = !this.isExpand
      let treeList = this.treeData;
      //关键代码
        for (let i = 0; i < treeList.length; i++) {
          this.$refs.treeRef.store.nodesMap[treeList[i].id].expanded = this.isExpand;
        }
    }