2020-08-26

Element-ui,tree 控件，以递归方式收缩/展开全部节点

 

1.踩坑记

之前看过别人写的方式，用“nodesMap”的或用“_getAllNodes()”的，但是，都不得行啊，不知是我用错了还是版本问题。算了，自己动手丰衣足食。我的版本是2.13.2。

2.寻找解决方法

经过多番查找，发现，tree的store中有一个root属性，再点开来发现就是tree中的节点。在root中，不断地往childNodes下点，就是某个分支下的所有的节点。而且每一个Node都带有一个expanded属性，这个就是控制控件展开或收缩状态的。请看图。

3.解决展开所有和收缩所有

既然这个node是有规律的，那么就可以用递归来处理这个问题，使用时，只需点击调用collapse方法即可。直接上代码。

method:{
recursionCollapse(expanded, index, nodes) 
{      
      if ((!nodes)||index == nodes.length) return;

      nodes[index].expanded = expanded;
      if (nodes[index].childNodes)
        this.recursionCollapse(expanded, 0, nodes[index].childNodes);

      return this.recursionCollapse(expanded, index + 1, nodes);
},
collapse()
{
        //注意，ref要用自己的
      var root = this.$refs.treeNode.store.root;
      var children = root.childNodes;
        //展开或收缩的状态的布尔值属性
      this.expandAll = !this.expandAll;

      this.recursionCollapse(this.expandAll, 0, children);
}
}