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()打印一下處理過程及結果：