🧛需求

需求：点击展开/折叠复选框，展开全部Tree的所有节点或折叠Tree的所有节点。

🌈效果

效果如下图：

🧐查阅Element-UI官方Tree组件文档

查阅了资料，Element-UI 官方只有

default-expand-all： 是否默认展开所有节点

default-expanded-keys： 默认展开的节点的 key 的数组

两个属性都是组件第一次渲染的时候才生效😵。

但是，就在我以为没有任何办法的时候，突然发现一个方法，getNode，它可以根据 data 或者 key 拿到 Tree 组件中的 node。

打印 获取 到的 node：

发现node是一个对象，并且它里面还有一个expanded属性，意思就是 展开的，瞬间一种从裂缝中看到一丝光的感觉🤩。

然后我就抱着试一试的心态🤪，通过 复选框 的 change 事件拿到 checkbox 的新值，赋值给 expanded。

哎! 居然成功了🥳🥳🥳

⌨具体代码

🔶HTML部分

<!-- template -->
<el-form-item label="角色权限"
              prop="roleIds">
    <el-checkbox @change="expandChange">展开/折叠</el-checkbox>
    <el-checkbox @change="checkAll">全选/全不选</el-checkbox>
    <el-tree :data="treeData"
             :props="defaultProps"
             :default-expanded-keys="defaultExpandedKeys"
             show-checkbox
             node-key="id"
             ref="tree"
             @check-change="checkChange"></el-tree>
</el-form-item>

🔷JS

<script>
/**
 * 根据tree的id属性拿到node，并修改node指定的属性的值
 * @param {Array} treeData 树形结构数据
 * @param {String} propertyName 要修改的node的属性
 * @param {Boolean} value 修改为的值
 */
 function setNodePropertyValue (treeData, propertyName, value) {
  // 循环tree数组
  treeData.forEach(item => {
    // 确保拿到tree的DOM元素对象
    that.$nextTick(() => {
      // 通过treeData元素的id拿到节点
      let node = that.$refs.tree.getNode(item.id)
      // 修改指定属性的值
      node[propertyName] = value
    })
    // 如果item中有children并且长度不为0，调用函数本身，进行递归
    if (item.children && item.children.length !== 0) {
      setNodePropertyValue.call(this, item.children, propertyName, value)
    }
  })
}

export default {
    ...
    methods:{
        // 展开或折叠属性菜单
        expandChange (value) {
            // 调用获取树节点id的函数
            setNodePropertyValue.call(this, this.treeData, 'expanded', value)
        },
        // 树形节点全选或全不选
        checkAll (value) {
            // 调用获取树节点id的函数
            setNodePropertyValue.call(this, this.treeData, 'checked', value)
        }
    }
}
</script>