element el-tree 默认选中的节点

小蔚

发布于 2021-09-14 10:25:41

3.8K0

发布于 2021-09-14 10:25:41

文章被收录于专栏：小蔚记录小蔚记录

根据接口获取树结构后，设置默认选中的节点，并高亮

效果图：

官网中对于这两个节点的解释如下：说实话，刚开始有带你没看懂咋弄！！！

代码如下：

<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)
      })

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2021-09-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

渲染