第一步：首先我们先去查看element ui官方文档，发现并没有提供这个方法，没办法，只能手写一个了，先给大家看看功能

点击前效果：

点击后效果：

第二步：废话不多说直接上代码，然后我们简单解释下代码

页面部分：这里是简单的数结构渲染，不多讲，$refs.Reftree获取的是el-tree的实例，具体作用请看下面的方法。

<div style="width: 500px;height: 300px;border: 5px solid #eee;overflow: auto;margin: 0 auto;"> <el-button type="primary" @click="El_treeExpand($refs.Reftree)">展开/折叠</el-button> <el-tree ref="Reftree" :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree></div>

data: [{ label: '一级 1', children: [{ label: '二级 1-1', children: [{ label: '三级 1-1-1' }] }] }, { label: '一级 2', children: [{ label: '二级 2-1', children: [{ label: '三级 2-1-1' }] }, { label: '二级 2-2', children: [{ label: '三级 2-2-1' }] }] }, { label: '一级 3', children: [{ label: '二级 3-1', children: [{ label: '三级 3-1-1' }] }, { label: '二级 3-2', children: [{ label: '三级 3-2-1' }] }] }], defaultProps: { children: 'children', label: 'label' },

方法部分：该方法传入el-tree实例，直接点击按钮即可实现展开或者关闭，这里简单讲解一下

1、ref.store.root.childNodes 通过实例来调用tree组件的方法，可以获取到所有的数据源

2、node.expanded 循环遍历出通过expanded属性来判断是否展开

3、expandNode 和 collapseNode 使用递归来进行控制展开属性

export function El_treeExpand(ref) { if (!ref) { this.$modal.alertWarning("未传入el-tree实例"); return; } ref.store.root.childNodes.forEach((node, index) => { console.log(node.expanded); if (node.expanded) { collapseNode(node); } else { expandNode(node); } })}function expandNode(node) { node.expanded = true; if (node.childNodes) { node.childNodes.forEach(childNode => { expandNode(childNode); }); }}function collapseNode(node) { node.expanded = false; if (node.childNodes) { node.childNodes.forEach(childNode => { collapseNode(childNode); }); }}

第三步：此时我们已经设置成功，进入页面进行测试一下

本来节点1.2是打开，3关闭，点击后就变成了1.2关闭，3打开了，还不是我们想要的效果

第四步：对代码进行简单的修改，思路是根据第一个节点的展开状态来决定所有的 

1、用来记录第一个节点的状态    let record = null;   

2、循环的过程中添加index,在index=0的时候，保存第一个节点值的状态

  if (index == 0) {

            record = node.expanded

        }

//全局 展开\折叠 el-tree方法 //参数：ref (tree实例)export function El_treeExpand(ref) { if (!ref) { this.$modal.alertWarning("未传入实例,报错位置utils/rhis.js 495"); return; } let record = null; //记录第一个节点的状态 ref.store.root.childNodes.forEach((node, index) => { //第一个是打开就所有打开，第一个是关闭就所有的关闭 if (index == 0) { record = node.expanded } console.log(record); if (record) { collapseNode(node); } else { expandNode(node); } })}function expandNode(node) { node.expanded = true; if (node.childNodes) { node.childNodes.forEach(childNode => { expandNode(childNode); }); }}function collapseNode(node) { node.expanded = false; if (node.childNodes) { node.childNodes.forEach(childNode => { collapseNode(childNode); }); }}

修改完成，测试效果

我们将第1.3节点设置为展开状态，第2节点设置为关闭状态

点击展开/折叠按钮，此时按照逻辑，根据第一节点的展开状态，所以点击之后所有的节点都会关闭

通过反复测验：成功搞定，方法可以注册到全局，在使用的页面传入ref实例就行了

下面是作者推荐的几篇文章，都是基础知识，有兴趣的都可以试试呀，大家共同学习，都很简单，都很实用

1. 发布WebApi到IIS服务的基本操作，小白必看篇

WebApi发布到IIS服务器的流程-详细解析-百分之百成功_webapi服务器-CSDN博客

2.发布WebApi到IIS服务出现访问权限的问题，已解决，详细请看下面文章

解决：WebApi发布到IIS服务器时，出现的HTTP 错误 500.19 - Internal Server Error无法访问请求的页面，因为该页的相关配置数据无效。_无法访问请求的页面,因为该页的相关配置数据无效。-CSDN博客

3.（入门级）开发第一个Java程序，只需要跟着做一遍就能理解Java程序运行的原理了

（入门级）开发第一个Java程序，只需要跟着做一遍就能理解Java程序运行的原理了-CSDN博客