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

news2025/6/24 16:05:58

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-tree
          ref="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.coloradmin.cn/o/1584408.html

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

相关文章

微信小程序实现输入appid跳转其他小程序

前言 本文记录wx.navigateToMiniProgram打开另一个小程序API使用方法&#xff0c;并封装为组件。 wxml 部分 输入框用来记录appid&#xff0c;按钮用来查询并跳转。 <view class"container"><input class"input" placeholder"请输入要查…

Flutter第七弹 网格列表GridView

1) Flutter提供了网格列表&#xff0c;怎么设置列数&#xff1f; 2&#xff09;怎么初始化每个列表项Item&#xff1f; 一、GridView简介 Flutter也存在网格列表组建GridView&#xff0c;用于展示多行多列的列表。 1.1 GridView构建 采用GridView.count() 进行构建 1.2 Gr…

基于激光雷达点云(lidar)的目标检测方法之BEV

基于激光雷达点云&#xff08;lidar&#xff09;的目标检测方法之BEV 附赠自动驾驶学习资料和量产经验&#xff1a;链接 基于lidar的目标检测方法可以分成3个部分&#xff1a;lidar representation&#xff0c;network backbone&#xff0c;detection head&#xff0c;如下图所…

LeetCode - 1702. 修改后的最大二进制字符串

文章目录 解析AC CODE 题目链接&#xff1a;LeetCode - 1702. 修改后的最大二进制字符串 解析 详细题解&#xff1a;贪心&#xff0c;简洁写法&#xff08;Python/Java/C/Go/JS/Rust&#xff09; 思路很牛b。 简单来说我们需要想办法将0配对&#xff0c;将其变为10&#xff0…

3D室内装潢设计 Sweet Home 3D for Mac 中文直装版

Sweet Home 3D 是一款非常棒的家装辅助设计软件&#xff0c;支持包括中文在内的16中语言&#xff0c;它能帮您通过二维的家居平面图来设计和布置您的家具,还可以用三维的视角浏览整个装修布局的全貌。是一款操作起来简单方便&#xff0c;使用起来快捷、迅速&#xff0c;拥有超高…

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

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

图像生成:Pytorch实现一个简单的对抗生成网络模型

图像生成&#xff1a;Pytorch实现一个简单的对抗生成网络模型 前言相关介绍具体步骤准备并读取数据集定义生成器定义判别器定义损失函数定义优化器开始训练完整代码 训练生成的图片 前言 由于本人水平有限&#xff0c;难免出现错漏&#xff0c;敬请批评改正。更多精彩内容&…

RTSP/Onvif视频安防监控平台EasyNVR调用接口返回匿名用户名和密码的原因排查

视频安防监控平台EasyNVR可支持设备通过RTSP/Onvif协议接入&#xff0c;并能对接入的视频流进行处理与多端分发&#xff0c;包括RTSP、RTMP、HTTP-FLV、WS-FLV、HLS、WebRTC等多种格式。平台拓展性强、支持二次开发与集成&#xff0c;可应用在景区、校园、水利、社区、工地等场…

坚持十天做完Python入门编程100题第三天加班

坚持十天做完Python入门编程100题第三天加班 第24题 扫描文件列表第25题 如何将字典转换成JSON并写入json文件&#xff1f;第26题 JSON转换成字典 第24题 扫描文件列表 如何扫描当前目录下的文件列表&#xff1f;解析&#xff1a;可以使用python内置的glob模块&#xff0c;用法…

C++设计模式:单例模式(十)

1、单例设计模式 单例设计模式&#xff0c;使用的频率比较高&#xff0c;整个项目中某个特殊的类对象只能创建一个 并且该类只对外暴露一个public方法用来获得这个对象。 单例设计模式又分懒汉式和饿汉式&#xff0c;同时对于懒汉式在多线程并发的情况下存在线程安全问题 饿汉…

《深入Linux内核架构》第2章 进程管理和调度 (2)

目录 2.4 进程管理相关的系统调用 2.4.1 进程复制 2.4.2 内核线程 2.4.3 启动新程序 2.4.4 退出进程 本专栏文章将有70篇左右&#xff0c;欢迎关注&#xff0c;订阅后续文章。 2.4 进程管理相关的系统调用 2.4.1 进程复制 1. _do_fork函数 fork vfork clone都最终调用_…

微信小程序转盘抽奖

场景&#xff1a; 在微信小程序里面开展抽奖活动使用转盘抽奖&#xff1b;类似下图&#xff08;图片来自百度&#xff09; 方法&#xff1a; 使用lukcy-canvas组件 在 微信小程序 中使用 | 基于 Js / TS / Vue / React / 微信小程序 / uni-app / Taro 的【大转盘 & 九宫…

【Qt踩坑】ARM 编译Qt5.14.2源码-QtWebEngine

1.下载源码 下载网站&#xff1a;Index of /new_archive/qt/5.14/5.14.2/single 2.QWebEngine相关依赖 sudo apt-get install flex libicu-dev libxslt-dev sudo apt-get install libssl-dev libxcursor-dev libxcomposite-dev libxdamage-dev libxrandr-dev sudo apt-get …

dyld: Library not loaded: @rpath/SDK.framework/SDK错误问题

关于导入三方SDK.framework之后&#xff0c;启动崩溃之后如下报错的解决方式: 截屏2020-10-14 上午9.55.09.png 在正常导入framework之后&#xff0c;做如图示操作&#xff0c; image.png 以上步骤之后&#xff0c;重新启动运行xcode&#xff0c;即可成功运行。

Harmony鸿蒙南向驱动开发-PIN

PIN即管脚控制器&#xff0c;用于统一管理各SoC的管脚资源&#xff0c;对外提供管脚复用功能。 基本概念 PIN是一个软件层面的概念&#xff0c;目的是为了统一对各SoC的PIN管脚进行管理&#xff0c;对外提供管脚复用功能&#xff0c;配置PIN管脚的电气特性。 SoC&#xff08;…

ChatGPT在地学,自然科学等了领域应用教程

原文链接&#xff1a;ChatGPT在地学&#xff0c;自然科学等了领域应用教程https://mp.weixin.qq.com/s?__bizMzUzNTczMDMxMg&mid2247600722&idx2&sn291ea8c935b1d9b1459170baa9057053&chksmfa820bb5cdf582a39086e5ee9596ab020784fa78ac7dc49ced4969e28817c3f0…

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书)

MAC: 自己制作https的ssl证书(自己签发免费ssl证书)(OPENSSL生成SSL自签证书) 前言 现在https大行其道, ssl又是必不可少的环节. 今天就教大家用开源工具openssl自己生成ssl证书的文件和私钥 环境 MAC电脑 openssl工具自行搜索安装 正文 1、终端执行命令 //生成rsa私钥&…

探索艺术的新领域——3D线上艺术馆如何改变艺术作品的传播方式

在数字化时代的浪潮下&#xff0c;3D线上艺术馆成为艺术家们展示和传播自己作品的新平台。不仅突破了地域和物理空间的限制&#xff0c;还提供了全新的互动体验。 一、无界限的展示空间&#xff1a;艺术家的新展示平台 3D线上艺术馆通过数字化技术&#xff0c;为艺术家提供了一…

虚拟货币:数字金融时代的新工具

在数字化时代的到来之后&#xff0c;虚拟货币逐渐成为了一种广为人知的金融工具。虚拟货币是一种数字化的资产&#xff0c;它不像传统货币那样由政府或中央银行发行和监管。相反&#xff0c;虚拟货币通过密码学技术和分布式账本技术来实现去中心化的发行和交易。 虚拟货币的代…

机器学习和深度学习-- 李宏毅(笔记与个人理解)Day10

Day 10 Genaral GUidance training Loss 不够的case Loss on Testing data over fitting 为什么over fitting 留到下下周哦~~ 期待 solve CNN卷积神经网络 Bias-Conplexiy Trade off cross Validation how to split? N-fold Cross Validation mismatch 这节课总体听下来比较…