vue中tree组件，递归遍历所有树形节点数据，获取节点的id值

需求：

项目需要，tree组件中所有节点要支持一键全部展开，一键全部收起功能。

如下所示，点击某个按钮，所有的节点全部展开，再次点击，所有节点收起。

 

思路很清晰，tree组件中有个 expandedKeys属性，控制展开节点的信息，只要遍历所有的节点信息，把节点的id push到expandedKeys组数中，对应的节点自动会展开。

那么如何遍历所有树形节点信息，获取每个节点的id呢？

没有必要为了获取每个节点的id信息，去后端查一下，因为前端已经有了所有树形节点的信息，只不过是按照层级嵌套成树结构而已。

难点体现在，遍历这样的树形结果，需要递归才行，因为不知道有多少层子节点。

直接上代码：

// 递归获取所有节点id
    getAllNodeId (expandedKeys, moduleDataList) {
      for (let i = 0; i < moduleDataList.length; i++) {
        // console.log('i in getAllNodeId: ', i)
        console.log('moduleDataList[i].id  in getAllNodeId: ', moduleDataList[i].id)
        expandedKeys.push(moduleDataList[i].id)
        if (moduleDataList[i].children) {
          expandedKeys = this.getAllNodeId(expandedKeys, moduleDataList[i].children)
        }
      }
      return expandedKeys
    },
    changeOpenAllModuleFolderVisible () {
      console.log('in changeOpenAllModuleFolderVisible')
      this.openAllModuleFolderVisible = !this.openAllModuleFolderVisible
      if (!this.openAllModuleFolderVisible) {
          this.expandedKeys = []
      } else {
        this.expandedKeys = this.getAllNodeId(this.expandedKeys, this.moduleDataList)
      }
      console.log('this.expandedKeys: ', this.expandedKeys)
    }

getAllNodeId()为递归方法，参数为expandedkeys（存储展开节点的数组），参数moduleDataList是页面中的树形节点数据数组。

递归思路：

1、遍历当前数组中每个节点，获取该节点的id

2、如果该节点子节点不为空，则把当前节点的子节点数据执行第一步操作，把expandedkeys和当前节点的子节点数据传入getAllNodeId()方法； 如果当前节点没有子节点，则继续处理下一个节点

3、把所有的节点处理完之后，返回expandedkeys，即递归处理所有节点后的结果

可以用console.log()打印一下处理过程及结果：