elementui中 表格使用树形数据且固定一列时展开子集移入时背景色不全问题(父级和子级所展示的字段是不一样的时候)

原来的效果
在这里插入图片描述

修改后实现效果
在这里插入图片描述
解决- 需要修改elementui的依赖包中lib/element-ui.common.js中的源码
将js中此处代码改完下面的代码

watch: {// don't trigger getter of currentRow in getCellClass. see https://jsfiddle.net/oe2b4hqt/// update DOM manually. see https://github.com/ElemeFE/element/pull/13954/files#diff-9b450c00d0a9dec0ffad5a3176972e40// 修改 包含子集的树形数据的table 中 移入子集背景色问题  _this3.$parent.$parent.$parent.$el -和页面元素有关 如果包了很多层div的话 要精准寻找'store.states.hoverRow': function storeStatesHoverRow(newVal, oldVal) {var _this3 = this;let expandedRow = _this3.$parent.$parent.$parent.$el.querySelectorAll('.expanded')if (expandedRow.length) {if (this.$isServer) return;// 如果dom元素包含类名expanded 说明有子集var raf = window.requestAnimationFrame;if (!raf) {raf = function raf(fn) {return setTimeout(fn, 16);};}raf(function () {// 查找到子集中同时包含.el-table__body-wrapper(左边tr所在的dom) .el-table__fixed-right(右边定位table所在的dom) 然后获取这两个dom中的所有的.el-table__row (只要表格使用了固定 则会有两套dom显示 所以要获取两套dom中移入触发的tr)var rows1 = _this3.$parent.$parent.$parent.$el.querySelectorAll('.el-table__body-wrapper .childrenTable .el-table__row');var rows2 = _this3.$parent.$parent.$parent.$el.querySelectorAll('.el-table__fixed-right .childrenTable .el-table__row');if (rows1) {var oldRow = rows1[oldVal];var newRow = rows1[newVal];if (oldRow) {Object(dom_["removeClass"])(oldRow, 'hover-row');}if (newRow) {Object(dom_["addClass"])(newRow, 'hover-row');}}if (rows2) {var oldRow = rows2[oldVal];var newRow = rows2[newVal];if (oldRow) {Object(dom_["removeClass"])(oldRow, 'hover-row');}if (newRow) {Object(dom_["addClass"])(newRow, 'hover-row');}}});} else {// this.store.states.isComplex 父级table是否包含固定列if (!this.store.states.isComplex || this.$isServer) return;var raf = window.requestAnimationFrame;if (!raf) {raf = function raf(fn) {return setTimeout(fn, 16);};}raf(function () {var rows = _this3.$el.querySelectorAll('.el-table__row');var oldRow = rows[oldVal];var newRow = rows[newVal];if (oldRow) {Object(dom_["removeClass"])(oldRow, 'hover-row');}if (newRow) {Object(dom_["addClass"])(newRow, 'hover-row');}});}},},

注 当父级和子级所显示的字段名称是不一样的时候 会出现这个问题 ,如果父级和子级所显示的数据是一样的 则直接使用elementui中的源码 不会出现此类问题
在这里插入图片描述

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

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

相关文章

Oracle实践|内置函数之数学型函数

📫 作者简介:「六月暴雪飞梨花」,专注于研究Java,就职于科技型公司后端工程师 🏆 近期荣誉:华为云云享专家、阿里云专家博主、腾讯云优秀创作者、ACDU成员 🔥 三连支持:欢迎 ❤️关注…

【Linux安全】Firewalld防火墙基础

目录 一、Firewalld概述 二、Firewalld和iptables的关系 三、Firewalld网络区域 1、firewalld防火墙预定义了9个区域: 2、firewalld 数据包处理原则 3、firewalld数据处理流程 4、firewalld检查数据包的源地址的规则 四、Firewalld防火墙的配置方法 1、firewalld 命令…

SpringBoot项目热部署-解决html修改后需要重启项目的问题

前言:启动热部署之后修改html无需再次重启项目,每次都要重新重启项目 2022IDEA以下版本 1、打开file->Settings->Compiler,勾选Build project automatically 2、按住ctrlshiftalt/ 选Registry进去吧app.running的勾打上、 2022IDEA及以上

NVIDIA Orin/Jetson 平台+数字同轴GMSL 车载AI视觉方案,应用于车载,机器人等领域

专注于成像和视觉技术于近期正式发布了可适配NVIDIA DRIVE AGX Orin平台的一系列摄像头产品,该产品是自主开发的数字同轴GMSL2摄像头模组,可满足智能汽车的高质量成像需求。 目前,推出可适配于NVIDIA DRIVE AGX Orin平台的摄像头产品一共有11…

Modular military character

角色具有31个模块化骨架网格,每个模块具有多个蒙皮: 3个头(4skins) 3件衬衫(9skins) 3条裤子(9skins) 3只靴子(9skins) 7件战术背心(3skins) 4只手和手臂(2skins) 3顶帽子和头盔(9skins) 2个背包(3skins) 3支步枪(3skins) 模块允许您组装超过200万个不同的…

.NET 分享一款多种方式维持权限的工具

01阅读须知 此文所提供的信息只为网络安全人员对自己所负责的网站、服务器等(包括但不限于)进行检测或维护参考,未经授权请勿利用文章中的技术资料对任何计算机系统进行入侵操作。利用此文所提供的信息而造成的直接或间接后果和损失&#xf…

第22讲:RBD块存储COW克隆解除父子镜像的依赖关系

RBD块存储COW克隆解除父子镜像的依赖关系 1.COW镜像克隆存在的依赖关系 在前面使用copy-on-write机制基于快照做出来的链接克隆,与快照依赖性很强,如果快照损坏或者丢失,那么克隆的镜像将无法使用,使用这个镜像创建的虚拟机也会…

深度学习模型

深度学习模型 深度学习网络模型是人工智能领域的重要分支,它通过模拟人脑神经网络的工作方式来处理数据并识别模式。以下是对深度学习网络模型的一些主要类型的详细概述: 卷积神经网络(Convolutional Neural Network, CNN) 结构&a…

MyBatis中的Where标签:提升你的SQL查询效率

哈喽&#xff0c;大家好&#xff0c;我是木头左&#xff01; 理解MyBatis的Where标签 MyBatis是一款优秀的持久层框架&#xff0c;它提供了许多强大的标签来帮助编写更优雅、高效的SQL语句。其中&#xff0c;<where>标签是使用频率极高的一个&#xff0c;它能够自动处理…

Mac配置node环境

1.下载nvm(node版本管理工具&#xff0c;同Anaconda对Python的关系&#xff09;。 curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash 2.配置vi ~/.zshrc文件&#xff0c;添加如下配置&#xff1a; export NVM_DIR"$HOME/.nvm" [ -…

pytest:指定测试用例执行顺序

在自动化测试中&#xff0c;测试用例的执行顺序有时对测试结果具有重要影响。本文将介绍如何在pytest框架中使用pytest-ordering插件以及Collection hooks来控制测试用例的执行顺序。 方式1&#xff1a; 使用pytest-ordering插件控制执行顺序 1.1 安装pytest-ordering插件 首…

生命在于学习——Python人工智能原理(1.1)

说明&#xff1a;今年学一部分人工智能方向的知识&#xff0c;网安也会穿插&#xff0c;看后续如何将二者结合起来。 一、人工智能的基本知识 1、人工智能的起源 1956年美国达特茅斯学院召开了一个夏季论班&#xff0c;首次提出人工智能的概念。 1950年图灵提出了图灵测试&a…

Thinkphp5内核宠物领养平台H5源码

源码介绍 Thinkphp5内核流浪猫流浪狗宠物领养平台H5源码 可封装APP&#xff0c;适合做猫狗宠物类的发信息发布&#xff0c;当然懂的修改一下&#xff0c;做其他信息发布也是可以的。 源码预览 源码下载 https://download.csdn.net/download/huayula/89361685

Python 开心消消乐

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

《德米安:彷徨少年时》

文前 我之所愿无非是尝试依本性而生活&#xff0c; 却缘何如此之难&#xff1f; 强盗 疏于独立思考和自我评判的人只能顺应现成的世俗法则&#xff0c;让生活变轻松。其他人则有自己的戒条&#xff1a;正派人惯常做的事于他可能是禁忌&#xff0c;而他自认合理的或许遭他人唾…

机器学习笔记(概念)

一.基础概念 1.机器学习的实质为&#xff1a;根据现有数据,寻找输入数据和输出数据的映射关系/函数 2.机器学习的任务&#xff1a; ​ 回归&#xff1a;输出为连续值 ​ 分类&#xff1a;输出为离散值 ​ 聚类&#xff1a;无标记信息的输出(例如根据瓜的外观分为两部分) …

自动驾驶技术现状与需求分析

随着科技的不断进步和智能化浪潮的席卷&#xff0c;自动驾驶技术已成为当今交通领域的热点话题。本文旨在深入探讨自动驾驶技术的当前发展状况&#xff0c;并对其未来的市场需求进行细致分析。首先&#xff0c;我们将回顾自动驾驶技术的起源、发展历程以及当前的技术水平&#…

探秘SpringBoot默认线程池:了解其运行原理与工作方式(@Async和ThreadPoolTaskExecutor)

文章目录 文章导图Spring封装的几种线程池SpringBoot默认线程池TaskExecutionAutoConfiguration&#xff08;SpringBoot 2.1后&#xff09;主要作用优势使用场景如果没有它 2.1版本以后如何查看参数方式一&#xff1a;通过Async注解--采用ThreadPoolTaskExecutordetermineAsync…

Linux - crond任务调度、at定时任务

1 crontab 进行-定时任务的设置 1&#xff09;概述&#xff1a; 任务调度&#xff1a;是指系统在某个时间执行的特定的命令或程序。 任务调度分类&#xff1a; 系统工作&#xff1a;有些重要的工作必须周而复始地执行。如病毒扫描等个别用户工作&#xff1a;个别用户可能希…

数据库(7)——DDL表操作2

添加字段 ALTER TABLE 表名 ADD 字段名 类型 [COMMENT 注释] [约束]; 可以观察到student_information表中成功添加了名为“class”的字段。 修改字段 修改数据类型 ALTER TABLE 表名 MODIFY 字段名 新数据类型&#xff08;长度&#xff09;; 修改字段名和字段类型 ALTER TABLE…