问题描述

我希望每次刷新页面时，都默认高亮树的第一个子节点。如图所示，树的第一个子节点ap-southeast-1背景是淡蓝色的，处于高亮状态。

实现方式

首先树节点的数据格式如下：

每个节点都包含了一个id和标签label。id用于标记这个节点，label用于节点具体显示的内容。


前端页面的格式如下：

这里我设置了以下内容：

• ref="vueTree"指代这颗树名为vueTree
• node-key="id"表示使用每个节点的"id"对应的值来表示每个节点，例如对于上面的数据，id=0时就指代我的第一个节点"us-east-1"
• highlight-current"表示高亮选中的节点
• props设置为默认格式
• default-expand-all表示默认展开所有节点
  
  

每次加载完树节点的数据后，需要设置一下默认高亮的节点为id=0的节点：

如上图所示，每次加载完树节点的数据后（即在代码this.treeData = res.tree_node执行之后），使用：

this.$nextTick(() => {
     this.$refs.vueTree.setCurrentKey(0);
})

就可以默认让第一个子节点高亮了（也就是id=0的节点）
这里vueTree是页面当中那颗树的名字
因为页面中已经设置了node-key="id"，所以setCurrentKey(0)中的0表示当前选中的节点为id为0的节点。