element el-tree 默認選中的節點

根據接口獲取樹結構后，設置默認選中的節點，並高亮

效果圖：

 

 官網中對於這兩個節點的解釋如下：說實話，剛開始有帶你沒看懂咋弄！！！

 

 

 

 代碼如下：

<el-tree v-loading="loading"
                   :data="treeData"
                   node-key="value"
                   :props="defaultProps"
                   default-expand-all
                   :expand-on-click-node="false"
                   :current-node-key="currentLivingId"
                   ref="popularTree"
                   highlight-current
                   @node-click="nodeClick"
                   :render-content="renderContent">
            <span class="custom-tree-node"
                  slot-scope="{ node, data }">
              <span>
                <i :class="data.icon"></i>{{ node.label }}
              </span>
            </span>
          </el-tree>

　　

 

 

 

 主要就是這兩行代碼，需要注意的是setCurrentKey函數必須要放到$nextTick里面，要不然tree還未渲染上，是找不到popularTree的

      this.currentLivingId = res.data[0].children[0].value
          this.$nextTick(function () {
            this.$refs.popularTree.setCurrentKey(this.currentLivingId)
      })