element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮

前言

  • tree树结构是在开发中经常使用的组件,比如区域树,楼层树,组织架构树,等等包含节点关系

  • 实际开发可能需要我们一进到页面选中树形结构第一个节点,并且调用数据,来达到用户体验

  • 在用户选择之后,通过本地存储的方式把楼层id存起来,刷新之后获取楼层id,调用数据

  • 或者为了用体验我们需要在选中同时高亮,在状态保持之后,把绑定楼层id节点高亮提示用户

  • 万变不离其宗,基于文档介绍和HTML结构代码。我们可以通过2种办法实现

第一种-利用默认点击选中会增加类名

  • 当我们打开浏览器检查会发现,当树节点点击之后。会在该节点添加一个类名

  • 当我们配置好树形结构唯一值,默认选中数组,ref之后我们可以通过在获取楼层数据之后赋值,再通过侦听器来侦听,当察觉默认数组复制之后,就通过document找到这个类名,点击它,就会默认选中第一个

  • 注意:使用this.$nextTick()避免出现层级问题

  • 缺点:不管传入什么值-只会选中第一个。应为是点击还会触发树结构自带的收缩

案例代码如下-可直接复制

<template><div class="box"><!-- default-checked-key-默认勾选的节点的 key 的数组 --><el-treeref="myTree"node-key="id":data="data":props="defaultProps":default-checked-keys="checkedkeys"></el-tree></div>
</template><script>
export default {data() {return {// 树形结构数据data: [{id: "0p150",name: "深圳QQQQ科技有限公司",children: [{id: 12070579,name: "一楼",parentId: 0,orderNum: null,},{id: 12075624,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p151",name: "wertw",children: [],},{id: "0p152",name: "qqqqq",children: [{id: 120725697,name: "一楼",parentId: 0,orderNum: null,},{id: 1207236195,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p154",name: "1231",children: [],},{id: "0p155",name: "123",children: [],},{id: "0p156",name: "123123",children: [],},],// 树形结构数据配置defaultProps: {id: "id",label: "name",children: "children",},//checkedkeys: [],};},// 侦听器watch: {checkedkeys: {// immediate: true,handler: function (newVal, oldVal) {if (newVal) {this.$nextTick(() => {// tree树结构点击会加上下面这个类名// 如果默认全部展开-那就会关闭document.querySelector(".el-tree-node__content").click();});}},},},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中,防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key// 结果-选中第一个this.checkedkeys.push(this.data[0].id);// 结果固定id-选中第一个// this.checkedkeys.push('0p150');// 结果-子集选中第一个// this.checkedkeys.push(12070579);// 节点key 结果选中第一个// this.checkedkeys.push(["0p150", 12070579]);});
​// 结论:不管传入什么,只会通过侦听器选中树结构第一个},
};
</script>
<style lang="scss" scoped>
// 点击选中颜色
</style>

第二种方法-通过高亮属性+tree提供api-推荐

  • 当我们配置好树结构唯一值,高亮当前节点属性,ref之后,

  • 我们在获取属性结构数据地方取第一个数据id,传入api,就可以高连当前节点

  • 注意:使用this.$nextTick()避免出现层级问题

  • 优点:只需要树形结构唯一值id传入api就可以实现选中树形结构任意节点并且高亮-符合实际开发

案例代码如下-可直接复制

<template><div class="box"><!-- default-expand-all-展开全部 --><!-- highlight-current- 是否高亮当前选中节点 --><el-treeref="myTree"node-key="id":data="data":props="defaultProps"highlight-currentdefault-expand-all></el-tree></div>
</template><script>
export default {data() {return {// 树形结构数据data: [{id: "0p150",name: "深圳QQQQ科技有限公司",children: [{id: 12070579,name: "一楼",parentId: 0,orderNum: null,},{id: 12075624,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p151",name: "wertw",children: [],},{id: "0p152",name: "qqqqq",children: [{id: 120725697,name: "一楼",parentId: 0,orderNum: null,},{id: 1207236195,name: "二楼",parentId: 0,orderNum: null,},],},{id: "0p154",name: "1231",children: [],},{id: "0p155",name: "123",children: [],},{id: "0p156",name: "123123",children: [],},],// 树形结构数据配置defaultProps: {id: "id",label: "name",children: "children",},};},mounted() {// 使用$nextTick 等页面加载完毕之后-在选中,防止加载顺序问题this.$nextTick(function () {// 通过ref找到树节点// 通过树结构设置node-key,通过唯一id来高亮节点// setCurrentKey-通过 key 设置某个节点的当前选中状态,使用此方法必须设置 node-key 属性// 这行不会选中this.$refs.myTree.setCurrentKey(this.data[0].id);// 这行会生效this.$refs.myTree.setCurrentKey(this.data[0].children[0].id);});},
};
</script>
<style lang="scss" scoped>
// 设置高亮颜色
::v-deep.el-tree--highlight-current.el-tree-node.is-current> .el-tree-node__content {background-color: #baf !important;
}
</style>

总结:

经过这一趟流程下来相信你也对 element-tree树结构-默认选中第一个节点高亮-根据id选中节点高亮 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

什么不足的地方请大家指出谢谢 -- 風过无痕

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/81136.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Axure原型素材】扫一扫

今天和粉丝们免费分享扫一扫的原型素材&#xff0c;"扫一扫"是一项常见的移动应用功能&#xff0c;通常通过手机或平板电脑上的摄像头来扫描二维码或条形码以实现各种功能。下面是和大家分享扫一扫的常用素材~~~ 【原型效果】 【Axure原型素材】扫一扫 【原型预览】…

性能测试-性能测试类型(2)

基准测试 基准测试(Benchmark Testing)又称单用户测试,主要用于监测被测系统在较低压力下的运行状况并记录相关数据。当性能测试环境确定以后,通常选取业务模型中的重要业务做基准测试,对被测系统施加一定压力,从而获取被测系统在单用户运行情况下的各项性能指标,为多用户…

CPP-Templates-2nd--第二十章 基 于 类 型 属 性 的 重 载(Overloading on Type Properties)

目录 20.1 算法特化 20.2 标记派发&#xff08;Tag Dispatching&#xff09; 20.3 Enable/Disable 函数模板 20.3.1 提供多种特化版本 20.3.2 EnableIf 所之何处&#xff08;where does the EnableIf Go&#xff09;? 20.3.3 编译期 if 20.3.4 Concepts C20 20.4 类的…

档案管理系统设计与实现

摘 要 近年来&#xff0c;随着企业彼此间的竞争日趋激烈&#xff0c;信息技术在企业的发展中占据着越来越重要的地位。在企业的运输生产中&#xff0c;档案已成为企业运输经营中不可或缺的一部分&#xff0c;为管理者进行管理决策和进行各种经营活动提供了重要的依据&#xf…

程序地址空间

✅<1>主页&#xff1a;&#xff1a;我的代码爱吃辣 &#x1f4c3;<2>知识讲解&#xff1a;Linux——程序地址空间 ☂️<3>开发环境&#xff1a;Centos7 &#x1f4ac;<4>前言&#xff1a;我们一直随口就能说出来的栈区&#xff0c;堆区&#xff0c;常量…

2023-简单点-树莓派安装ncnn框架

not python 按照下面的步骤进行就可以了&#xff1a; 参考 tips: 其中有一步要用下面方法: 如果你的git clone不得行&#xff0c;可以按照以下操作方法&#xff1a; git clone --depth1 https://ghproxy.com/ https://github.com/Tencent/ncnn.git python 直接 pip install …

如何构建 Protocol Buffers(protobuf)并解决常见问题

简介 Protocol Buffers&#xff0c;通常称为protobuf&#xff0c;是一种用于序列化结构化数据的开源工具。它广泛用于数据交换&#xff0c;通常用于RPC&#xff08;远程过程调用&#xff09;和持久化数据存储。在本文中&#xff0c;我们将介绍如何构建protobuf&#xff0c;并解…

基于Java的大学生选修选课系统设计与实现(亮点:多角色、贴近现实的选课流程、好看的系统外观)

大学生选修选课系统 一、前言二、我的优势2.1 自己的网站2.2 自己的小程序&#xff08;小蔡coding&#xff09;2.3 有保障的售后2.4 福利 三、开发环境与技术3.1 MySQL数据库3.2 Vue前端技术3.3 Spring Boot框架3.4 微信小程序 四、功能设计4.1 主要功能描述 五、系统实现5.1 管…

【基础篇】ClickHouse 表引擎详解

文章目录 0. 引言1. 什么是表引擎2. 不同表引擎使用场景1. MergeTree:2. Log:3. Memory:4. Distributed:5. Kafka:6. MaterializedView:7. File和URL: 3. MergeTree 家族3.1. MergeTree:3.2. ReplacingMergeTree:3.3. SummingMergeTree:3.4. AggregatingMergeTree:3.5. Collaps…

理解HTTPS/TLS/SSL(二)可视化TLS握手过程并解密加密数据

文章目录 WireShark抓包TLS握手过程Client HelloServer HelloEncryped Extenstions, Certificate, Certificate VerifyChange Ciper Spec, FinshedTLS 1.2和TLS 1.3的区别能不能在进一步&#xff1f; 解密WireShark中抓到的TLS包参考资料 上一篇文章已经在本地使用了生成自签名…

[npm] npx 介绍与使用说明

[npm] npx 介绍与使用说明 npm 的由来npx 是什么&#xff1f;npx 特点npx 的特点项目安装包的使用全局安装包的避免指定工具包版本--no-install 参数和--ignore-existing 参数使用不同版本的 node-p 参数-c 参数实战应用 执行 GitHub 源码 npm 的由来 说到 npm 就离不开社区文…

【Linux操作系统】信号的产生捕获

&#x1f525;&#x1f525; 欢迎来到小林的博客&#xff01;&#xff01;       &#x1f6f0;️博客主页&#xff1a;✈️林 子       &#x1f6f0;️博客专栏&#xff1a;✈️ Linux       &#x1f6f0;️社区 :✈️ 进步学堂       &#x1f6f0…

css经典面试题(二)

文章目录 1、清除浮动2、opacity: 0、visibility: hidden、display: none 的区别3、css画一个三角形4、常见的主流浏览器前缀5、重绘与重排的区别&#xff1f;6、如何优化图片7、CSS3 中 transition 和 animation 的属性分别有哪些8、居中为什么要使用 transform&#xff08;为…

The driver has not received any packets from the server

在测试数据迁移时遇到的错误。 目录 一、错误 二、解决 三、数据迁移测试 3.1 环境 3.2 源码及测试 3.2.1 源码 3.2.2 测试结果&#xff08;太慢&#xff09; 3.2.3 源码修改 3.2.4 异常及解决 一、错误 The driver has not received any packets from the server. 二…

数学建模——微分方程介绍

一、基础知识 1、一阶微分方程 称为一阶微分方程。y(x0)y0为定解条件。 其常规求解方法&#xff1a; &#xff08;1&#xff09;变量分离 再两边积分就可以求出通解。 &#xff08;2&#xff09;一阶线性求解公式 通解公式&#xff1a; 有些一阶微分方程需要通过整体代换…

四种常用的自动化测试框架

一直想仔细研究框架&#xff0c;写个流水账似的测试程序不难&#xff0c;写个低维护成本的测试框架就很难了&#xff0c;所以研究多种测试框架还是很有必要的&#xff0c;知道孰优孰劣&#xff0c;才能在开始编写框架的时候打好基础&#xff0c;今天读到了KiKi Zhao的翻译文章&…

Java实现Ip地址获取

Java实现Ip地址获取 一、两种实现方式二、测试结果 一、两种实现方式 package com.lyp;import org.apache.commons.lang3.ObjectUtils;import java.net.*; import java.util.ArrayList; import java.util.Enumeration; import java.util.List; import java.util.Optional;/***…

Linux Ubuntu20.04深度学习环境快速配置命令记录

一、驱动安装 1、更新系统包 sudo apt-get updatesudo apt-get upgrade 2、安装显卡驱动 使用apt方式安装驱动&#xff0c;多数情况不容易成功&#xff0c; 使用一下方法更佳&#xff1a; 1.查看合适显卡的驱动版本 ubuntu-drivers devices NVIDIA GeForce 驱动程序 - …

git压缩仓库

git 压缩仓库 git gc命令压缩增量存储单元,节省磁盘空间 du -sh 查看当前文件夹占用多少K 快照的存储: 对于修改的内容,做快照处理并保存. 对于未修改的文件,做引用处理.

SOLIDWORKS Composer位置关键帧的使用

SOLIDWORKS Composer是专业的SOLIDWORKS及3D文件处理的动画制作软件&#xff0c;作为SOLIDWORKS 产品线下的一个明星存在。 SOLIDWORKS Composer几乎可以处理任何SOLIDWORKS的模型文件并将之转化成可以动作的机械动画&#xff0c;可以引用在企业的网站、产品说明书以及工作指导…