博客

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

<template>
 <el-tree 
    ref="treeNode" 
    :data="treeData" 
    :props="defaultProps" 
    :default-expand-all="isExpand"  
    node-key="id">
 </el-tree>
</template>

树相关数据：

isExpand:false,
defaultProps: {
            children: 'children',
            label: 'label'
          },
treeData:[
            {
              id: 1,
              label: '一级 1',
              children: [
                {
                  id: 4,
                  label: '二级 1-1',
                  children: [
                    {
                      id: 9,
                      label: '三级 1-1-1'
                    }, {
                      id: 10,
                      label: '三级 1-1-2'
                    }
                  ]
                }
              ]
            }, {
              id: 2,
              label: '一级 2',
              children: [
                {
                  id: 5,
                  label: '二级 2-1'
                }, {
                  id: 6,
                  label: '二级 2-2'
                }
              ]
            }, {
              id: 3,
              label: '一级 3',
              children: [
                {
                  id: 7,
                  label: '二级 3-1'
                }, {
                  id: 8,
                  label: '二级 3-2'
                }
              ]
            }
          ],

折叠与展开的方法如下：

//展开树 
expandTree(){
        this.isExpand = true
        this.buildData()
 },
//折叠树
 foldTree(){
        this.isExpand = false
        this.buildData()
 },
//遍历树的所有子节点，展开的时候给子节点展开状态赋值true，折叠时候赋值false
 buildData(){
        for(let i=0;i<this.$refs.treeNode.store._getAllNodes().length;i++){
          this.$refs.treeNode.store._getAllNodes()[i].expanded=this.isExpand;
        }
 },

最后给按钮添加点击事件

 <el-button type="primary"  @click="expandTree">展开</el-button>
 <el-button type="primary"  @click="foldTree">折叠</el-button>