Element-UI的Tree树形组件控制全部展开和全部折叠

前言

一、在v-if中使用

在使用Tree组件时，需求是可以动态切换全部展开和全部折叠的功能，寻找到了解决方案，但是屡次没有成功，这时，我一直怀疑这个方案的可行性，以为是这个方案有问题，最终才知道，其实是因为我的Tree是在Element-UI的Dialog组件中使用的缘故，详见问题原因，也就是说是因为外层组件Dialog使用了v-if的原因，以致获取不到$refs的缘故，如下图所示，是Dialog的源码：

如图所示，确实是使用了v-if，而v-show和v-if的区别，可以看这篇文章VUE中的v-if与v-show

实现代码：

// tree为Tree组件的ref值，isexpand为true或false
this.$nextTick(() => {
    for(var i=0;i<this.$refs.tree.store._getAllNodes().length;i++){
           this.$refs.tree.store._getAllNodes()[i].expanded=this.isexpand;
        }
});

二、在v-for中使用

在v-for中使用Tree组件时，就会发现this.$refs.tree显示报错，并没有获取到。这是因为：