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

Z时代
2024-01-10
分类：综合

vue

需求：

项目需要，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)
    }