All expansion and collapse of a-tree

ant-design-vue Trees a-tree It is necessary to realize the function of all expansion and all retraction

 

this.$refs.tree.store This data is printed out , Inside expanded Is to control the function of expanding and folding  

\

Code implementation ：

<div class="expand">
            <a-button size="small" @click="expandHandle">{
   {
              expandAll ? " Put it all away " : " Expand all "
            }}</a-button>
          </div>
          <div class="func">
            <span>name</span>
            <span>value</span>
          </div>
          <a-tree
            :data="treeData"
            show-checkbox
            node-key="id"
            :default-expand-all="expandAll"
            :default-expanded-keys="defaultExpandedKeys"
            :expand-on-click-node="false"
            ref="tree"
            @check="handleCheck"
          >
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span>{
   { node.label }}</span>
              <span>{
   { data.type }}</span>
            </span>
          </a-tree>

methods Method 
expandHandle() {
      console.log(this.$refs.tree.store);
      this.expandAll = !this.expandAll;
      this.expandNodes(this.$refs.tree.store.root);
    },
    //  Traverse tree data , Set the expanded attribute , Realize expansion and collapse 
    expandNodes(node) {
      node.expanded = this.expandAll;
      for (let i = 0; i < node.childNodes.length; i++) {
        node.childNodes[i].expanded = this.expandAll;
        if (node.childNodes[i].childNodes.length > 0) {
          this.expandNodes(node.childNodes[i]);
        }
      }
    },