vue+element：current-node-key和setCurrentKey设置默认选中并高亮节点，附带全部展开，全部关闭，重新渲染树结构函数render-content

最新推荐文章于 2025-06-07 20:00:00 发布

Crazy_GirlLL

最新推荐文章于 2025-06-07 20:00:00 发布

阅读量2.4w

点赞数 15

CC 4.0 BY-SA版权

分类专栏： VUE elementUI 插件的使用文章标签： vue elementui

本文链接：https://blog.youkuaiyun.com/Crazy_GirlLL/article/details/114083685

VUE 同时被 3 个专栏收录

40 篇文章

订阅专栏

插件的使用

16 篇文章

订阅专栏

elementUI

9 篇文章

订阅专栏

博客围绕Vue展开，介绍根据接口获取树结构后，设置默认选中节点并高亮的操作，强调setCurrentKey函数要放在$nextTick里。还给出树结构全部展开、收起及重新渲染的函数代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

效果图：

官网中对于这两个节点的解释如下

代码如下

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

然后下面是树结构全部展开，全部收起的函数

template：

//设置一个按钮，点击它，全部收起，或者全部展开
<el-button type="danger"
                       size="small"
                       class="collapseBtn"
                       @click="setAllExpand">{{btnText}}</el-button>

js：

setAllExpand() {
      this.loading = true
      var nodes = this.$refs.popularTree.store.nodesMap
      if (this.btnText == '全部展开') {
        this.btnText = '全部折叠'
        for (var i in nodes) {
          nodes[i].expanded = true
        }
      } else {
        this.btnText = '全部展开'
        for (var i in nodes) {
          nodes[i].expanded = false
        }
      }
      this.loading = false
    },

下面是树结构，重新渲染的函数render-content，比如效果图中每个节点的id展示

renderContent(h, { node, data, store }) {
      return (
        <span class="custom-tree-node">
          <span>
            {node.label}
            <i style="color:#999;margin-left:5px">(id:{node.key})</i>
          </span>
        </span>
      )
    },