el-tree小知识点
<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小知识点的更多相关文章
- 深入了解webpack前,可以了解的小知识点。
阅读前:文章大概是写,简单用过webpack,想继续深入了解webpack前需要了解的知识.但文章内容跟webpack使用关系并不大. 文章概要: Object.defineProperty call ...
- 刚接触Linux,菜鸟必备的小知识点(一)
身为一个将要大四的学生,而且还是学计算机的没有接触过linux简直是羞愧难当.这个假期做了一个软件测试员,必须要熟悉linux的操作,所以对于我这个菜鸟我也就说几点比较重要的小知识点吧. 第一.cd指 ...
- Java学习过程中的总结的小知识点(长期更新)
Java学习过程中的总结的小知识点 (主要是自己不会的知识和容易搞错的东西) 计算某个程序运行的时间 long stime=System.currentTimeMillis(); copy3(file ...
- 【转】HTML5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于<h ...
- AngularJS的小知识点
小知识点:$scope和$rootScope (1)每次使用ngController指令,都会调用控制器的创建函数,创建出一个控制器对象. (2)每次创建一个控制器对象,AngularJS都会创建一个 ...
- js中关于value的一个小知识点(value既是属性也是变量)
今天在学习input的value值时,发现这么一个小知识点,以前理解不太透彻. [1]以下这种情况是常见情况,会弹出“测试内容” <input type="button" v ...
- html5的小知识点小集合
html5的小知识点小集合 html5知识 1. Doctype作用?标准模式与兼容模式各有什么区别? (1).<!DOCTYPE>声明位于位于HTML文档中的第一行,处于< ...
- [BS] 小知识点总结-05
[BS] 小知识点总结-05 1. 不论UIWindow的rootViewController是navC.tabBarC还是VC,也不管modalVC和rootVC中间隔着多少个VC,但是modal出 ...
- 一个关于echo的小知识点
一个关于echo的小知识点 echo一个布尔值时,如果是true,输出1,而如果是false,将什么都不输出! 网上搜的一个解释: 对于数字类型来说,false 确实 是 0, 而对strin ...
- easyui中的combobox小知识点~~
一直使用的easyui中,一些不为人知的小知识点,与君共勉: 1.combobox设置高度:使用panelHeight属性: 2.combobox本身自带“自动补全”功能,但是在浏览器中是有限制的,在 ...
随机推荐
- Apache+PHP+Mysql安装手册(Windows)
一,准备安装包 下载地址: Apache:HTTPS://www.apachelounge.com/download/ PHP:http://php.net/downloads.php MySQL h ...
- PCIe Tandem PROM 方法
PCIe Tandem PROM 方法 什么是Tandem PROM? 简单总结:市面多数的FPGA都是SRAM型,需要在上电时从外部存储器件完成代码的加载,对于具有PCIe功能的SRAM FPGA而 ...
- kafka producer 打数据,ack 为 0, 1, -1 的时候代表啥, 设置 -1 的时候,什么情况下,leader 会认为一条消息 commit了?
1(默认) 数据发送到Kafka后,经过leader成功接收消息的的确认,就算是发送成功了.在这种情况下,如果leader宕机了,则会丢失数据. 0 生产者将数据发送出去就不管了,不去等待任何返回. ...
- 阐述 final、finally、finalize 的区别?
final:修饰符(关键字)有三种用法:如果一个类被声明为 final,意味 着它不能再派生出新的子类,即不能被继承,因此它和 abstract 是反义词.将 变量声明为 final,可以保证它们在使 ...
- mybatis 自定义插件的使用
今天看了别人的mybatis的教学视频,自己手写了一个简单的自定义的插件,有些细节记录一下. 先看下mybatis的插件的一些说明: MyBatis 允许你在已映射语句执行过程中的某一点进行拦截调用. ...
- JavaScript 变动事件
变动事件,当用户修改了DOM结构(添加或删除元素节点)后发生. 任何时候当元素被添加到DOM中或从DOM中移除时,DOM的结构就发生了变化,而这种变化就会触动变动事件. 1 <html> ...
- three模型高亮外发光效果
页面效果如下: vue3+three完整代码如下: <template> </template> <script setup> import * as THREE ...
- 3_Phase Portrait_相图_相轨迹
- css创建叉和勾
a{ display: inline-block; width: 10px;height:5px; background: red;line-height: 0;font-size:0;vertica ...
- 微信小程序版博客——开发汇总总结(附源码)
花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...