el-tree 设置目录树中的某个节点为高亮状态
现在可以实现,点击某个节点,该节点会红色高亮,那怎么让这个树加载出来的时候 默认某个节点高亮呢?element ui里面带勾选框的可以默认勾选上,这个没有勾选框
其实很简单。element ui的树形控件支持setCurrentKey()方法,只需要将你要设置的节点的key值设置进去就可以了,前提是要设置好node-key属性。然后在created()或mounted()钩子里写上代码就可以了。
<template>
<section class="p-10">
<el-tree :data="data" ref="vuetree" :props="defaultProps" @node-click="handleNodeClick"
highlight-current node-key="id" default-expand-all />
</section>
</template>
<script>
export default {
data() {
return {
data: [{
id: 1,
label: '一级 1',
children: [{
id: 4,
label: '二级 1-1',
children: [{
id: 9,
label: '三级 1-1-1'
}, {
id: 10,
label: '三级 1-1-2'
}]
}]
}, {
id: 2,
label: '一级 2',
children: [{
id: 5,
label: '二级 2-1'
}, {
id: 6,
label: '二级 2-2'
}]
}, {
id: 3,
label: '一级 3',
children: [{
id: 7,
label: '二级 3-1'
}, {
id: 8,
label: '二级 3-2'
}]
}],
defaultProps: {
children: 'children',
label: 'label'
}
};
},
methods: {
handleNodeClick(data) {
console.log(data);
}
},
mounted() {
this.$nextTick(function(){
this.$refs['vuetree'].setCurrentKey(10);
})
}
};
</script>

嗯,就酱~~
el-tree 设置目录树中的某个节点为高亮状态的更多相关文章
- 剑指Offer(第二版)面试案例:树中两个节点的最低公共祖先节点
(尊重劳动成果,转载请注明出处:http://blog.csdn.net/qq_25827845/article/details/74612786冷血之心的博客) 剑指Offer(第二版)面试案例:树 ...
- 2019.5.13-5.17知识点:文件管理、目录操作、索引节点、软硬链接,vim文本编辑 知识点
文件管理 ● cp 复制文件 cp /路径(原文件) /路径(复制文件)/文件重命名(可选) -i:覆盖前询问 -r:递归复制目录及内部内容 -a:归档,相当于-dr --preser ...
- eclipse 中过滤空包,目录树中不显示。
1.导入maven工程,目录树中显示空包. 在Package Explorer的左上角,有个倒三角形,点开,有Fileters 选项,点开, Filters 中,勾上 Empty packages.即 ...
- Xcode6与Xcode5中沙盒的变动以及偏好设置目录的变动
1.Xcode6模拟器路径与Xcode5模拟器路径对比: (1)Xcode5中模拟器路径为:/Users/用户名/Library/Application Support/iPhone Simulato ...
- [CareerCup] 4.7 Lowest Common Ancestor of a Binary Search Tree 二叉树的最小共同父节点
4.7 Design an algorithm and write code to find the first common ancestor of two nodes in a binary tr ...
- 获取所有树叶子节点 注册添加事件 if ($(node).tree('isLeaf', node.target)) 是否叶子节点
//获取所有树叶子节点 注册添加事件 if ($(node).tree('isLeaf', node.target)) 是否叶子节点 $(function () { $('.easyui-tree') ...
- paip.tree 生成目录树到txt后的折叠查看
paip.tree 生成目录树到txt后的折叠查看 作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏 地址:http://blog.csdn.ne ...
- Element ui tree树形控件获取当前节点id和父节点id
低版本Element ui tree树形控件获取当前节点id和父节点id的方法:点击查看 最新版本Element ui tree树形控件获取当前节点id和父节点id教程: 1.找到node_modul ...
- 剑指offer-第七章面试案例2(树中两个节点的公共祖先节点)
import java.util.LinkedList; import java.util.Queue; import java.util.Stack; //树中两个节点的最低公共祖先 //第一种情况 ...
随机推荐
- hdu 5294 Tricks Device 最短路建图+最小割
链接:http://acm.hdu.edu.cn/showproblem.php?pid=5294 Tricks Device Time Limit: 2000/1000 MS (Java/Other ...
- LA 5009 (HDU 3714) Error Curves (三分)
Error Curves Time Limit:3000MS Memory Limit:0KB 64bit IO Format:%lld & %llu SubmitStatusPr ...
- Filter介绍,运行顺序,实例
Filter介绍 Filter可觉得是Servlet的一种"变种",它主要用于对用户请求进行预处理,也能够对HttpServletResponse进行后处理,是个典型的处理链. 它 ...
- ucos-ii变量名称表
- Delphi获得与设置系统时间格式《转》
unit Unit1; interface uses Winapi.Windows, Winapi.Messages, System.SysUtils, System.Variants, Syst ...
- html块级元素与内联元素的区别
1. 块级元素(block element): 概念理解:如果不用css控制,块级元素在文档流中以一行显示,及它所占的宽度为其父级元素所占的宽度,若超过宽度会重新另起一行显示,高度会随着内容高度的增 ...
- 217. Contains Duplicate【easy】
217. Contains Duplicate[easy] Given an array of integers, find if the array contains any duplicates. ...
- python学习之pyenv
我们经常有这种需求: linux系统中既要有python2.xxx,又要有python3.xxx,甚至更极端的情况是,有多个版本的python3.xxx. 如何实现上述需求呢?更新python的话,费 ...
- Python内置函数之bytes()
该函数是一个类对象: class bytes([source[,encoding[,errors]]]) 返回值为字节对象,当第一个参数为字符串时,必须提供第二个参数,第二个参数为编码类型的字符串. ...
- java.lang.NoClassDefFoundError: org/junit/rules/TestRule
错误原因:通过定位发现是找不到TestRule这个类,检查项目引用的Junit版本为4.7,发现TestRule是在Junit版本4.10后添加的新特性 解决方法:把junit版本由4.7改成4.10