<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. Apache+PHP+Mysql安装手册(Windows)

    一,准备安装包 下载地址: Apache:HTTPS://www.apachelounge.com/download/ PHP:http://php.net/downloads.php MySQL h ...

  2. PCIe Tandem PROM 方法

    PCIe Tandem PROM 方法 什么是Tandem PROM? 简单总结:市面多数的FPGA都是SRAM型,需要在上电时从外部存储器件完成代码的加载,对于具有PCIe功能的SRAM FPGA而 ...

  3. kafka producer 打数据,ack 为 0, 1, -1 的时候代表啥, 设置 -1 的时候,什么情况下,leader 会认为一条消息 commit了?

    1(默认)  数据发送到Kafka后,经过leader成功接收消息的的确认,就算是发送成功了.在这种情况下,如果leader宕机了,则会丢失数据. 0 生产者将数据发送出去就不管了,不去等待任何返回. ...

  4. 阐述 final、finally、finalize 的区别?

    final:修饰符(关键字)有三种用法:如果一个类被声明为 final,意味 着它不能再派生出新的子类,即不能被继承,因此它和 abstract 是反义词.将 变量声明为 final,可以保证它们在使 ...

  5. mybatis 自定义插件的使用

    今天看了别人的mybatis的教学视频,自己手写了一个简单的自定义的插件,有些细节记录一下. 先看下mybatis的插件的一些说明: MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用. ...

  6. JavaScript 变动事件

    变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. 任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化就会触动变动事件. 1 <html> ...

  7. three模型高亮外发光效果

    页面效果如下: vue3+three完整代码如下: <template> </template> <script setup> import * as THREE ...

  8. 3_Phase Portrait_相图_相轨迹

  9. css创建叉和勾

    a{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertica ...

  10. 微信小程序版博客——开发汇总总结(附源码)

    花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...