elementUI框架的樹el-tree搜索高亮並展開

最近有個需求用到elementUI框架樹el-tree來管理數據，帶搜索功能，並且搜索出來的結果展開，並高亮顯示。

展開好解決，根據官方文檔，在el-tree上綁定default-checked-keys和default-expanded-keys，並且把搜索的結果push到綁定好的的checkList就好了

 

難點是怎麼高亮顯示。看到網上說各種方便，改樣式啥的，其實不用那麼麻煩，只有設置每個節點node的isCurrent爲true就好了

怎麼設置node的isCurrent爲true呢？那就用到el-tree本身自帶的store.nodesMap了，遍歷nodesMap找到每個節點node，再把node的isCurrent設置true就好了。

如獲取nodesMap：this.$refs.categoryTree.store.nodesMap（categoryTree綁定el-tree的ref）

var nodes = this.$refs.categoryTree.store.nodesMap
          for (var z in nodes) { // 清除之前的選中樣式
            nodes[z].isCurrent = false
          }
          for (var i in nodes) {
            for (var y in res) { // res爲搜索框搜索出來的結果數組
              if (res[y].categoryCode === nodes[i].data.categoryCode) {
                nodes[i].isCurrent = true // 加現在選中樣式
              }
            }
          }

 

 

想節點高亮關鍵點是：找到nodesMap，然後遍歷nodesMap來設置每個node的isCurrent爲true