頁面跳轉，el-tree動态設定選中節點樣式

需求就是從A頁面點選名稱，跳轉到B頁面，選中B頁面的樹節點并查詢對應的資料。

這裡的樹形結構，并沒有使用勾選框，選中的樣式也進行了一些修改。

一開始沒發現el-tree有設定預設選中的屬性，還在想怎麼操作dom實作該功能。

仔細看文檔還是很重要的~

current-node-key可以實作我們想要的功能。但是有些坑需要注意。

1.先重寫el-tree-node 選中的預設樣式.。觀察dom發現點選樹節點後該節點會加上is-current樣式，是以主要是修改is-current的樣式類。

/deep/ .el-tree-node.is-current > .el-tree-node__content {
        background: rgba(22, 119, 255, 0.1);
        border-right: 3px solid #1677ff;
        color: #187aff;
        /deep/ .el-tree-node__expand-icon {
          color: rgb(0, 112, 255);
        }
        /deep/ .is-leaf {
          color: rgba(0, 0, 0, 0);
        }
      }
           

2.el-tree設定 node-key 和 currentNode

3.監聽路由，并執行查詢函數

watch: {
    $route(from, to) {
      console.log('route to', from, to)
      console.log('params', this.$route.params)

      if (this.$route.params.row) {
        const row = {
          value: from.params.row.acc_name,
          id: from.params.row.acc_code
        }
        this.clickQuery(row)
      }
    }
  },

  // 查詢資料
    clickQuery(row) {
      console.log('query', row)
      if (row) {
        this.acc_name = row.value
        // 根據編碼去查詢資料
        this.popoverForm.acc_code = row.id
        // 設定選中的節點
        this.currentNode = row.id
        // 隻是修改current-node-key的值，達不到效果。需要使用setCurrentKey屬性，才能選中并高亮
        this.$refs.tree.setCurrentKey(row.id)

        this.refreshEvent()
      }
    },
           

注意事項：

這裡有個坑，正常想法就是， 直接使用this.xxx 的方式去改變current-node-key的值，但是沒有效果、

要實作選中該節點，并顯示選中樣式。需要使用setCurrentKey( )方法。

詳細請看這篇文章的采坑實錄

Element樹形控件Tree踩坑：修改current-node-key無效