526互联

ElementUI tree 折叠全部节点

发布时间 2023-05-22 10:47:53作者: chccee

第一 引入树组件，需要通过按钮来控制展开/折叠必须要配置 ref 属性和node-key，树数据要和node-key能匹配

<template>
　<el-button @click="foldTree">折叠全部节点</el-button>
  <el-button @click="expandTree">展开全部节点</el-button>
<el-tree ref="treeNode" :data="treeData" :props="defaultProps" :default-expand-all="isExpand" node-key="id"> </el-tree> </template>

第二 定义变量

data(){
    return{
        isExpand: false,  // 默认折叠全部节点  
    }
}

第三 定义方法

methods：{
    foldTree(){
        this.$nextTick(() => {
        for (let i = 0; i < this.$refs.tree.store._getAllNodes().length; i++) {
          this.$refs.tree.store._getAllNodes()[i].expanded = false;
        }
      })
    },
}