乐趣区

elementuui-树-默认高亮一个节点

问题描述:每次刷新页面之后都默认高亮显示上次点击的节点。
这里我们默认显示第一个字节点,当项目中实际用到的时候把第一个子节点换成点击的节点就可以了。
实现方式
首先树节点的数据格式如下:

每个节点都包含了一个 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 的节点

原文件地址:https://blog.csdn.net/AXIMI/article/details/101023946

退出移动版