问题描述:每次刷新页面之后都默认高亮显示上次点击的节点。
这里我们默认显示第一个字节点,当项目中实际用到的时候把第一个子节点换成点击的节点就可以了。
实现方式
首先树节点的数据格式如下:
每个节点都包含了一个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的节点
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。