<el-tree
ref="tree"
:props="props"
:data="initData"
node-key="Id"
:default-expanded-keys="['table']"
:highlight-current="true"
:expand-on-click-node="true"
@node-click="getContent"
empty-text="没有获取到数据"
>
<!-- @node-click="getContent" -->
</el-tree>
:default-expanded-keys方法可以展开指定node-key的树节点,我这里写的是key为’table‘的节点,也可以写一个变量动态绑定。
node-key="Id" 中的Id指的是 :data="initData" 中的 initData 数组里对象的一个属性名。
 
// 跳转点击
listLink(data) {
this.parentNodes = data;
// this.$refs.article.scrollTop = 0;
if (this.reg.test(this.parentNodes)) {
this.$nextTick(() => {
document.getElementById(this.parentNodes).scrollIntoView(true);
});
} else {
this.$refs.tree.setCurrentKey(this.parentNodes);
}
},
document.getElementById(this.parentNodes).scrollIntoView(true); 是让页面跳到指定Id的代码,但是如果页面还没有加载完成就跳,很可能出现跳转错误的情况,所以在前面添加 this.$nextTick( ) 方法,让页面渲染完成后才进行下一步。
this.$refs.tree.setCurrentKey(this.parentNodes); 中 setCurrentKey 方法是通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性,参数为 key ,选中状态表示为高亮状态 , 若选中子节点,其父节点会自动展开。


 

el-tree小知识点的更多相关文章

  1. 深入了解webpack前,可以了解的小知识点。

    阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...

  2. 刚接触Linux,菜鸟必备的小知识点(一)

    身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...

  3. Java学习过程中的总结的小知识点(长期更新)

    Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...

  4. 【转】HTML5的小知识点小集合

    html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...

  5. AngularJS的小知识点

    小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...

  6. js中关于value的一个小知识点(value既是属性也是变量)

    今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...

  7. html5的小知识点小集合

      html5的小知识点小集合 html5知识   1.  Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...

  8. [BS] 小知识点总结-05

    [BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...

  9. 一个关于echo的小知识点

    一个关于echo的小知识点     echo一个布尔值时,如果是true,输出1,而如果是false,将什么都不输出! 网上搜的一个解释: 对于数字类型来说,false 确实 是 0, 而对strin ...

  10. easyui中的combobox小知识点~~

    一直使用的easyui中,一些不为人知的小知识点,与君共勉: 1.combobox设置高度:使用panelHeight属性: 2.combobox本身自带“自动补全”功能,但是在浏览器中是有限制的,在 ...

随机推荐

  1. rsync同步文件到远程机器,卡住10多秒--问题解决过程

    背景 以前大体介绍过,我们这边是做运维平台的.如果要形象化理解,那么,比如jenkins这种喜闻乐见的软件大致了解吧,jenkins就经常需要同步文件/版本包到远程机器上,jenkins怎么实现的,没 ...

  2. 盘点几种DIY加密狗的制作方法,适用于穿越机模拟器

    前言 前几天笔者的加密狗在使用中突然坏掉了,现象是插电脑不识别,LED灯不亮. 网上很多模友也反映了同样的问题: http://bbs.5imx.com/forum.php?mod=viewthrea ...

  3. tomcat启动 ssm项目出现乱码的解决

    0.乱码产生原因:编码和解码的方式是不同 1.出现乱码的解决方式[推荐]: 在tomcat 的配置文件web.xml 中添加上请求编码过滤器: <!-- 请求编码过滤器 --> <f ...

  4. 《手把手教你》系列基础篇(八十三)-java+ selenium自动化测试-框架设计基础-TestNG测试报告-下篇(详解教程)

    1.简介 其实前边好像简单的提到过测试报告,宏哥觉得这部分比较重要,就着重讲解和介绍一下.报告是任何测试执行中最重要的部分,因为它可以帮助用户了解测试执行的结果.失败点和失败原因.另一方面,日志记录对 ...

  5. Rabbit MQ 怎么保证可靠性、幂等性、消费顺序?

    RabbitMQ如何保证消息的可靠性 RabbitMQ消息丢失的三种情况 生产者弄丢消息时的解决方法 方法一:生产者在发送数据之前开启RabbitMQ的事务(采用该种方法由于事务机制,会导致吞吐量下降 ...

  6. pg数据库org.postgresql.util.PSQLException: ERROR: "xxx" is not a sequence

    问题场景 对pg数据表执行插入语句的时候,报错如下: { "timestamp": 1587012576734, "status": 500, "er ...

  7. jQuery--基本事件总结

    基本事件介绍 blur() 失去焦点 change() 改变(select) click() 单机 dbclick() 双击 error() 页面异常 focus() 获得焦点 focusin() j ...

  8. Collection 和 Collections 的区别?

    Collection 是一个接口,它是 Set.List 等容器的父接口:Collections 是个一个 工具类,提供了一系列的静态方法来辅助容器操作,这些方法包括对容器的搜索. 排序.线程安全化等 ...

  9. springboot使用redis实现发布与订阅

    配置redis连接地址 # Redis服务器地址 spring.redis.host=youxiu326.xin # Redis服务器连接端口 spring.redis.port=6379 # Red ...

  10. 一个注解@Recover搞定丑陋的循环重试代码

    使用背景 在实际项目中其中一部分逻辑可能会因为调用了外部服务或者等待锁等情况下出现不可预料的异常,在这个时候我们可能需要对调用这部分逻辑进行重试,代码里面主要就是使用for循环写一大坨重试的逻辑,各种 ...