当前位置: 首页 > news >正文

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选中节点高亮 有了初步的深刻印象,但在实际开发中我 们遇到的情况肯定是不一样的,所以我们要理解它的原理,万变不离其宗。加油,打工人!

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

相关文章:

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

前言 tree树结构是在开发中经常使用的组件&#xff0c;比如区域树&#xff0c;楼层树&#xff0c;组织架构树&#xff0c;等等包含节点关系 实际开发可能需要我们一进到页面选中树形结构第一个节点&#xff0c;并且调用数据&#xff0c;来达到用户体验 在用户选择之后&#x…...

Python实操 PDF自动识别并提取Excel文件

最近几天&#xff0c;paddleOCR开发了新的功能&#xff0c;通过将图片中的表格提取出来&#xff0c;效果还不错&#xff0c;今天&#xff0c;作者按照步骤测试了一波。 首先&#xff0c;讲下这个工具是干什么用的&#xff1a;它的功能主要是针对一张完整的PDF图片&#xff0c;可…...

JVM监控和调优常用命令jps|jstat|jinfo|jmap|jhat|jstack实战

1.JVM监控和调优的主要目的 性能优化:通过JVM调优,可以提高Java应用程序的性能,减少响应时间,提高吞吐量,以更好地满足用户需求。性能优化可以加快应用程序的执行速度,减少延迟,提高用户体验。 内存管理:JVM负责管理Java应用程序的内存。正确的内存管理可以避免内存泄漏…...

chatglm2-6b在P40上做LORA微调 | 京东云技术团队

背景&#xff1a; 目前&#xff0c;大模型的技术应用已经遍地开花。最快的应用方式无非是利用自有垂直领域的数据进行模型微调。chatglm2-6b在国内开源的大模型上&#xff0c;效果比较突出。本文章分享的内容是用chatglm2-6b模型在集团EA的P40机器上进行垂直领域的LORA微调。 …...

WebGL 同时使用多幅纹理

目录 前言 ​编辑 示例代码 颜色矢量的分量乘法来计算两个纹素最终的片元颜色 注册事件响应函数&#xff1a;loadTexture&#xff08;&#xff09;&#xff0c;最后一个参数是纹理单元编号。 请求浏览器加载图像&#xff1a; 配置纹理&#xff1a;loadTexture&#xff0…...

探索云计算和大数据分析的崛起:API行业的机遇与挑战【电商大数据与电商API接入】

I. 引言 随着云计算和大数据分析技术的快速发展&#xff0c;企业和个人对数据分析和处理的需求不断增加。在这个信息爆炸的时代&#xff0c;数据已成为企业决策和战略规划的重要基础。云计算提供了强大的计算和存储能力&#xff0c;使得大规模数据的处理和分析变得更加容易和高…...

android studio通过wifi、无线连接设备

AndroidStudio无线wifi调试设备_android studio wifi_zwylovemzj的博客-CSDN博客 使用​​adbWireless​​工具&#xff0c;其能够让手机用无线来取代USB连接而使用ADB工具 1. 手机需要与电脑在同一局域网内 2. 把adbWireless安装到手机上&#xff0c;并开启&#xff0c;上面…...

kafka 3.5 主题分区ISR伸缩源码

ISR(In-sync Replicas)&#xff1a;保持同步的副本 OSR(Outof-sync Replicas)&#xff1a;不同步的副本。最开始所有的副本都在ISR中&#xff0c;在kafka工作的过程中&#xff0c;如果某个副本同步速度慢于replica.lag.time.max.ms指定的阈值&#xff0c;则被踢出ISR存入OSR&am…...

1-centOS7搭建伪分布式

前言&#xff1a;虚拟机快照的使用 VMware Workstation 软件可以用快照进行迅速的虚拟机状态的切换 ※. 类似于虚拟机备份&#xff0c; 可以使用备份进行快速恢复。 比如没安装jdk之前拍摄快照来备份 ※. 若jdk没安装好或者jdk环境变量配置的有问题&#xff0c; 可以用安装之…...

对开源自动化测试平台MeterSphere的使用感触

1&#xff1a;该平台可以通过接口&#xff0c;参数&#xff0c;配置的维护&#xff0c;然后继续接口自动化“一键测试”&#xff0c;功能还是挺强大的&#xff0c;具体的使用需要研究 MeterSphere的官网&#xff1a;MeterSphere - 专业测试云 2&#xff1a;一键测试在生产环境…...

Spring boot 第一个程序

新建工程 选择spring-boot版本 右键创建类TestController&#xff1a; 代码如下&#xff1a; package com.example.demo; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; import org.springf…...

【SpringMVC】实现增删改查(附源码)

目录 引言 一、前期准备 1.1.搭建Maven环境 1.2.导入pom.xml依赖 1.3.导入配置文件 ①jdbc.properties ②generatorConfig.xml ③log4j2.xml ④spring-mybatis.xml ⑤spring-context.xml ⑥spring-mvc.xml ⑦修改web.xml文件 二、逆向生成增删改查 2.1.导入相关u…...

理财是什么?怎样学习理财?

大家好&#xff0c;我是财富智星&#xff0c;今天跟大家分享一下理财是什么&#xff1f;怎样学习理财的方法。 一、理财的基本原则 1、理财应注重投资而不是投机&#xff0c;要与时间为友。 让我们先考虑以下问题&#xff1a;什么样的回报才算是真正的高回报&#xff1f;假设有…...

华为云云耀云服务器L实例评测 | 开启OPC UA之旅

OPC Unified Architecture (OPC UA)是一种用于工业自动化的M2M协议(Machine-to-machine)&#xff0c;具有平台独立性&#xff0c;在Windows和Linux上都可以运行。随着云服务在工业现场的不断普及&#xff0c;OPCUA服务也开始大量部署在云端。 本文以华为云云耀云服务器L为基础…...

帝国CMS灵动标签如何调用$ecms_hashur[‘ehref‘]函数

我们在二次开发时,后台调用链接就需要加上帝国CMS的$ecms_hashur[ehref]函数,这是帝国CMS后台的安全函数,防止外部直接访问后台页面,直接强制访问后台链接就会提示“非法来源”。 我的站长站分享下制作自定义php页面,用帝国CMS灵动标签如何调用$ecms_hashur[ehref]函数方…...

ES6 拓展(下)

一、函数的拓展 1.1、默认参数 在ES5中设置默认参数&#xff1a; function func(words, name) {name name || "闷墩儿";console.log(words, name); } func("大家好&#xff01;我是"); func("大家好&#xff01;我是", "憨憨");func(…...

TouchGFX之自定义触发条件和操作

通过TouchGFX Designer&#xff0c;您可以自己定义具有触发条件和操作的交互组件。 自定义容器创建自定义触发条件&#xff1a;通过自定义容器的属性选项卡添加自定义触发条件 使用交互系统发送自定义触发条件&#xff1a; 通过自定义容器的“交互”选项卡&#xff0c;创建新的…...

Linux防火墙(iptables)

一、linux的防火墙组成 linux的防火墙由netfilter和iptables组成。用户空间的iptables制定防火墙规则&#xff0c;内核空间的netfilter实现防火墙功能。 netfilter&#xff08;内核空间&#xff09;位于Linux内核中的包过滤防火墙功能体系&#xff0c;称为Linux防火墙的“内核…...

zookeeper教程

zookeeper教程 zookeeper简介zookeeper的特点及数据模型zookeeper下载安装zookeeper客户端命令zookeeper配置文件zookeeper服务器常用命令zookeeper可视化管理工具zkuizookeeper集群环境搭建zookeeper选举机制使用Java原生api操作zookeeper使用java zkclient库操作zookeeper使用…...

杭州快递物流展-2024长三角快递物流供应链与技术装备展览会(杭州)

2024快递物流创新高质量发展论坛暨 2024长三角快递物流供应链与技术装备展览会(杭州) 时间&#xff1a;2024年4月12-14 日 地点&#xff1a;杭州国际博览中心 ESYE长三角快递物流展是亚洲范围内超大规模的快递物流业展示平台&#xff0c;由于展会的需求 及扩大市场的影响力…...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

在rocky linux 9.5上在线安装 docker

前面是指南&#xff0c;后面是日志 sudo dnf config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo sudo dnf install docker-ce docker-ce-cli containerd.io -y docker version sudo systemctl start docker sudo systemctl status docker …...

Java - Mysql数据类型对应

Mysql数据类型java数据类型备注整型INT/INTEGERint / java.lang.Integer–BIGINTlong/java.lang.Long–––浮点型FLOATfloat/java.lang.FloatDOUBLEdouble/java.lang.Double–DECIMAL/NUMERICjava.math.BigDecimal字符串型CHARjava.lang.String固定长度字符串VARCHARjava.lang…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

算法笔记2

1.字符串拼接最好用StringBuilder&#xff0c;不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...

【Android】Android 开发 ADB 常用指令

查看当前连接的设备 adb devices 连接设备 adb connect 设备IP 断开已连接的设备 adb disconnect 设备IP 安装应用 adb install 安装包的路径 卸载应用 adb uninstall 应用包名 查看已安装的应用包名 adb shell pm list packages 查看已安装的第三方应用包名 adb shell pm list…...

Golang——9、反射和文件操作

反射和文件操作 1、反射1.1、reflect.TypeOf()获取任意值的类型对象1.2、reflect.ValueOf()1.3、结构体反射 2、文件操作2.1、os.Open()打开文件2.2、方式一&#xff1a;使用Read()读取文件2.3、方式二&#xff1a;bufio读取文件2.4、方式三&#xff1a;os.ReadFile读取2.5、写…...

电脑桌面太单调,用Python写一个桌面小宠物应用。

下面是一个使用Python创建的简单桌面小宠物应用。这个小宠物会在桌面上游荡&#xff0c;可以响应鼠标点击&#xff0c;并且有简单的动画效果。 import tkinter as tk import random import time from PIL import Image, ImageTk import os import sysclass DesktopPet:def __i…...

深入解析光敏传感技术:嵌入式仿真平台如何重塑电子工程教学

一、光敏传感技术的物理本质与系统级实现挑战 光敏电阻作为经典的光电传感器件&#xff0c;其工作原理根植于半导体材料的光电导效应。当入射光子能量超过材料带隙宽度时&#xff0c;价带电子受激发跃迁至导带&#xff0c;形成电子-空穴对&#xff0c;导致材料电导率显著提升。…...

未授权访问事件频发,我们应当如何应对?

在当下&#xff0c;数据已成为企业和组织的核心资产&#xff0c;是推动业务发展、决策制定以及创新的关键驱动力。然而&#xff0c;未授权访问这一隐匿的安全威胁&#xff0c;正如同高悬的达摩克利斯之剑&#xff0c;时刻威胁着数据的安全&#xff0c;一旦触发&#xff0c;便可…...