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; //树中两个节点的最低公共祖先 //第一种情况 ...
随机推荐
- MATLAB 的运算符
在MATLAB中,提供了丰富的运算符,运算主要包括算数运算.关系运算和逻辑运算. 一.算数运算符 分为标量和数组运算和矩阵运算.需要注意:对于a/b,是a除以b,对于a\b,是b除以a.在MATLAB ...
- js实现div闪烁-------Day46
近期在学着用easyui,发现框架用起来果然是方便简洁,能弄出这框架的都是大神级别了吧,牛啊.... 今天碰到这个应用能够说是让我很之无语,整出源代码来一看就明确了.可之前却还是感觉很奇妙,我也经常告 ...
- shell实现洗牌随机
洗牌问题: 洗一副扑克,有什么好办法?既能洗得均匀,又能洗得快?即相对于一个文件来说怎样 高效率的实现乱序排列? 关于洗牌问题,其实已经有了一个很好的shell解法,这里另外给三个基于AWK的方法, ...
- Eclipse maven 项目红叉 编译不报错问题处理
项目右键-> Maven -> Update Maven Project 选中 :Force update 复选框
- ServletContext与Web应用以及Spring容器启动
一.ServletContext对象获取Demo Servlet容器在启动时会加载Web应用,并为每个Web应用创建唯一的ServletContext对象. 可以把ServletContext看作一个 ...
- Scrapy爬虫入门系列3 将抓取到的数据存入数据库与验证数据有效性
抓取到的item 会被发送到Item Pipeline进行处理 Item Pipeline常用于 cleansing HTML data validating scraped data (checki ...
- 如何解决HTML在各种浏览器的兼容性
方法/步骤 不同浏览器对HTML标记所具有的内外边距属性具有不同的定义. 因此如果想消除这种差距,应该在相应的CSS部分加入以下CSS代码: *{margin:0px;padding:0px;} 借于 ...
- apache2+svn Cannot load modules/mod_dav_svn.so into server: \xd5\xd2\xb2\xbb\xb5\xbd\xd6\xb8\xb6\xa8\xb5\xc4\xc4\xa3\xbf\xe9\xa1\xa3
按照svn里的readme文件安装配置apache2与svn后, 启动apache2服务的时候 出现下面的问题 Cannot load C:/Program Files/Apache Software ...
- PHP 微信错误状态返回码说明
PHP 微信错误状态返回码说明 返回码说明 返回码 说明 -1 系统繁忙 0 请求成功 40001 验证失败 40002 不合法的凭证类型 40003 不合法的OpenID 40004 ...
- Chromium开发--入门C++小样例
開始做Chromium开发的时候,都是从代码去摸索的,如今有几个样例了.希望看到的同学能有帮助,比直接在大量代码里领悟要快非常多了. C++ in Chromium 101 - Codelab h ...