elementui树形组件自定义高亮颜色

1、需求描述:点击按钮切换树形的章节,同时高亮
在这里插入图片描述
2、代码实现
1)style样式添加

<style>
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {background-color: #81d3f8 !important;  //高亮颜色color:#fff;  // 字体颜色
}
</style>```2)组件添加```javascript<el-treeref="treeRef"   :data="treeData"node-key="key"   //node-key必须要绑定唯一id,我这里的id是key所以使用key:highlight-current="true"  //设置高亮:default-expanded-keys="['0-1-0']"  // 默认展开@node-click="handleNodeClick"  // 节点点击事件></el-tree> 

3)事件

mounted(){this.$refs.treeRef.setCurrentKey(this.treeData[0].key);  //threeData是树形结构的数据//toNextClick是“下一步”按钮触发的事件this.$bus.$on("toNextClick", () => {this.getkey(this.treeData, this.componentsKey);  //this.componentsKey是当前的key//找到点击下一步之后的key值this.$refs.treeRef.setCurrentKey(this.keys); //添加高亮});
}

注:其他函数代码

// 寻找下一个key的位置getkey(obj, okey) {//找到okey在的位置let treeDataLen = this.treeData.length;let rootKey;let parentKey;let parentArrLen;let parentArr;let rootArr = this.treeData;if (!okey) {okey = "0-0";}let num = okey.match(/-/gim).length;if (num == 2) {//二级菜单rootKey = okey.slice(0, 3);parentKey = rootKey;} else if (num == 3) {rootKey = okey.slice(0, 5);parentKey = okey.slice(0, 3);} else {//直接去下一个rootKey = okey;parentKey = rootKey;}let rootindex = rootArr.map(item => item.key).indexOf(rootKey);//找到okey的上一级的children长度let parentObj = this.treeData.find(item => {return item.key == parentKey;});if (parentObj.key == "0-0") {if (rootindex + 1 < treeDataLen && rootArr[rootindex + 1].children) {this.str = rootArr[rootindex + 1].children[0].key;}return;} else {parentArr = parentObj.children ? parentObj.children : [];}//找到okey的下标parentArrLen = parentArr.length;let keyindex = parentArr.map(item => item.key).indexOf(okey);//根元素的下标if (keyindex + 1 > parentArrLen - 1 && rootindex + 1 >= treeDataLen) {this.str = okey;} else if (keyindex + 1 > parentArrLen - 1 &&rootindex + 1 < treeDataLen) {//子元素超出但是根还有if (rootArr[rootindex + 1].children) {this.str = rootArr[rootindex + 1].children[0].key;}} else {this.str = parentArr[keyindex + 1].key;}}}```

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

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

相关文章

【C++题解】1005 - 已知一个圆的半径,求解该圆的面积和周长

问题&#xff1a;1005 - 已知一个圆的半径&#xff0c;求解该圆的面积和周长 类型&#xff1a;基础问题、小数运算 题目描述&#xff1a; 已知一个圆的半径&#xff0c;求解该圆的面积和周长。 输入&#xff1a; 输入只有一行&#xff0c;只有 1 个整数。 输出&#xff1a…

javaWeb网上零食销售系统

1 绪 论 目前&#xff0c;我国的网民数量已经达到7.31亿人&#xff0c;随着互联网购物和互联网支付的普及&#xff0c;使得人类的经济活动进入了一个崭新的时代。淘宝&#xff0c;京东等网络消费平台功能的日益完善&#xff0c;使得人们足不出户就可以得到自己想要的东西。如今…

[leetcode]remove-duplicates-from-sorted-list-ii

. - 力扣&#xff08;LeetCode&#xff09; 给定一个已排序的链表的头 head &#xff0c; 删除原始链表中所有重复数字的节点&#xff0c;只留下不同的数字 。返回 已排序的链表 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,3,3,4,4,5] 输出&#xff1a;[1,2,5]示例 2&…

分类模型绘制决策边界、过拟合、评价指标

文章目录 1、线性逻辑回归决策边界1.2、使用自定义函数绘制决策边界1.3、三分类的决策边界1.4、多项式逻辑回归决策边界 2、过拟合和欠拟合2.2、欠拟合2.3、过拟合 3、学习曲线4、交叉验证5、泛化能力6、混淆矩阵7、PR曲线和ROC曲线 x2可以用x1来表示 1、线性逻辑回归决策边界 …

HarmonyOS 开发-阻塞事件冒泡

介绍 本示例主要介绍在点击事件中&#xff0c;子组件enabled属性设置为false的时候&#xff0c;如何解决点击子组件模块区域会触发父组件的点击事件问题&#xff1b;以及触摸事件中当子组件触发触摸事件的时候&#xff0c;父组件如果设置触摸事件的话&#xff0c;如何解决父组…

HTML和markdown

总体情况 <p>在html的用处 在vscode中使用markdown [Markdown] 使用vscode开始Markdown写作之旅 - 知乎

如何训练自己的ChatGPT?需要多少训练数据?

近年&#xff0c;聊天机器人已经是很常见的AI技术。小度、siri、以及越来越广泛的机器人客服&#xff0c;都是聊天机器人的重要适用领域。然而今年&#xff0c;ChatGPT的面世让这一切都进行到一个全新的高度&#xff0c;也掀起了大语言模型&#xff08;LLM&#xff09;的热潮。…

python使用uiautomator2操作雷电模拟器9并遇到解决adb 连接emulator-5554 unauthorized问题

之前写过一篇文章 python使用uiautomator2操作雷电模拟器_uiautomator2 雷电模拟器-CSDN博客 上面这篇文章用的是雷电模拟器4&#xff0c;雷电模拟器4.0.78&#xff0c;android版本7.1.2。 今天有空&#xff0c;再使用雷电模拟器9&#xff0c;android版本9来测试一下 uiauto…

华为2024年校招实习硬件-结构工程师机试题(四套)

华为2024年校招&实习硬件-结构工程师机试题&#xff08;四套&#xff09; &#xff08;共四套&#xff09;获取&#xff08;WX: didadidadidida313&#xff0c;加我备注&#xff1a;CSDN 华为硬件结构题目&#xff0c;谢绝白嫖哈&#xff09; 结构设计工程师&#xff0c;结…

最新ChatGPT4.0工具使用教程:GPTs使用,Midjourney绘画,AI换脸,Suno-AI音乐生成大模型一站式系统使用教程

一、前言 ChatGPT3.5、GPT4.0、相信对大家应该不感到陌生吧&#xff1f;简单来说&#xff0c;GPT-4技术比之前的GPT-3.5相对来说更加智能&#xff0c;会根据用户的要求生成多种内容甚至也可以和用户进行创作交流。 然而&#xff0c;GPT-4对普通用户来说都是需要额外付费才可以…

抖音视频无水印采集拓客软件|视频批量下载提取工具

抖音视频无水印批量采集拓客软件助力高效营销&#xff01; 随着抖音平台的崛起&#xff0c;视频已成为各行各业进行营销的重要工具。但是&#xff0c;传统的视频下载方式往往效率低下&#xff0c;无法满足快速获取大量视频的需求。针对这一问题&#xff0c;我们开发了一款视频无…

R语言复现:轨迹增长模型发表二区文章 | 潜变量模型系列(2)

培训通知 Nhanes数据库数据挖掘&#xff0c;快速发表发文的利器&#xff0c;你来试试吧&#xff01;欢迎报名郑老师团队统计课程&#xff0c;4.20直播。 案例分享 2022年9月&#xff0c;中国四川大学学者在《Journal of Psychosomatic Research》&#xff08;二区&#xff0c;I…

【力扣 Hot100 | 第一天】4.10 两数相加

文章目录 1.两数相加&#xff08;4.10&#xff09;1.1题目1.2解法一&#xff1a;模拟1.2.1解题思路1.2.2代码实现 1.两数相加&#xff08;4.10&#xff09; 1.1题目 给你两个 非空 的链表&#xff0c;表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的&#xff0c…

逐步学习Go-sync.RWMutex(读写锁)-深入理解与实战

概述 在并发编程中&#xff0c;我们经常会遇到多个线程或协程访问共享资源的情况。为了保护这些资源不被同时修改&#xff0c;我们会用到"锁"的概念。 Go中提供了读写锁&#xff1a;sync.RWMutex。 sync.RWMutex是Go语言提供的一个基础同步原语&#xff0c;它是Rea…

【uniapp】省市区下拉列表组件

1. 效果图 2. 组件完整代码 <template><view class="custom-area-picker"><view

zabbix企业级监控平台

zabbix部署 安装源 重新创建纯净环境&#xff0c;利用base克隆一台虚拟机server1 给server1做快照&#xff0c;方便下次实验恢复使用 进入zabbix官网https://www.zabbix.com rpm -Uvh https://repo.zabbix.com/zabbix/5.0/rhel/7/x86_64/zabbix-release-5.0-1.el7.noarch.rpm …

D-Link NAS 未授权RCE漏洞复现(CVE-2024-3273)

0x01 免责声明 请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;作者不为此承担任何责任。工具来自网络&#xff0c;安全性自测&#xff0c;如有侵权请联系删…

SVN的介绍

首先SVN是什么&#xff1a; Apache下的一个开源的项目Subversion&#xff0c;通常缩写为 SVN&#xff0c;是一个版本控制系统。 版本控制系统是一个软件&#xff0c;它可以伴随我们软件开发人员一起工作&#xff0c;让我们编写代码的完整的历史保存下来。 目前它的各个版本的…

实现鼠标在页面点击出现焦点及大十字星

近段时间&#xff0c;在完成项目进度情况显示时候&#xff0c;用户在操作鼠标时候&#xff0c;显示当鼠标所在位置对应时间如下图所示 代码实现步骤如下&#xff1a; 1.首先引用 jquery.1.7.js 2.再次引用raphael.js 3.然后引用graphics.js 4.最后引用mfocus.js 其中mfocu…

3. DAX 时间函数-- DATE 日期--一生二,二生三,三生万物

在数据分析过程中&#xff0c;经常需要从一个数据推到另外一个数据&#xff0c;日期数据也是如此&#xff0c;需要从一个日期推到另外一个相关的日期&#xff0c;或者从一群日期推到另外一个相关的日期/一群相关的日期。这一期说的就是日期之间彼此推衍的函数&#xff0c;会比之…