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,一经查实,立即删除!

相关文章

幽默的力量

1.以对方的发型、服饰发生变化为借囗,夸赞对方一番。这是在想不起对方姓名时一个为自己尴尬解围的好方法。例如,“哎呀,原来是你呀!真对不住,没能马上想起来。不过你不能怨我,因为几个月的时间,…

Arrays.sort 和 Collections.sort 实现原理和区别?

Collection和Collections区别: java.util.Collection 是一个集合接口。它提供了对集合对象进行基本操作的通用接口方法。 java.util.Collections 是针对集合类的一个帮助类,他提供一系列静态方法实现对各种集合的搜索、排序、线程安全等操作。 然后还…

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万个不同的…

Oracle按照主键排序分页sql

在Oracle数据库中,当你想要按照主键排序并进行分页查询时,可以使用以下两种方法: 1. 使用 ROWNUM 和子查询 在Oracle 12c及更早的版本中,ROWNUM 是常用的分页方法。但是,因为 ROWNUM 是在结果集产生之前分配的&#…

spring boot 之 集成 druid数据库连接池

spring boot版本:2.3.12.RELEASE MySQL版本:8.0 Druid简介 Druid是阿里开源的一个数据库连接池和SQL查询优化工具,用于提高应用程序对数据库的性能和可扩展性。主要提供的功能:数据库连接池、数据库连接池监控、SQL查询优化、数…

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

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

2024,java开发,已经炸了吗?

网友: 炸的透透的了,坐标南京。 一月底,一个好哥们,双休朝九晚六不加班18K,被裁。 入职不到两年,算是工资和年终奖才赔了6.5W左右。 上周五新公司入职,周六开始加班。现在每周134加班到晚上八…

Unity功能——通过按键设置物体朝左/右旋转(含C#转xlua版)

博文简介: 开发场景:unity的3d场景; 功能:当设定的键被按下时,进行物体朝左/右旋转; 适用范围:本文代码适用于设置3d物体朝左右旋转,也适用于设置UI对象朝左右旋转&#xf…

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

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

深度学习模型

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

数据库模块名称汇总

1.Oracle。 2.SQLServer。

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

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

【分别介绍在vue2和vue3下如何使用ElementUI的图标组件,并举例说明】

在Vue 2和Vue 3下使用Element UI的图标组件&#xff0c;其方法和步骤有所不同。以下将分别进行介绍&#xff0c;并给出相应的示例。 Vue 2下使用Element UI的图标组件 安装Element UI 首先&#xff0c;你需要确保已经安装了Vue 2项目。然后&#xff0c;使用npm或yarn安装Eleme…

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" [ -…

git生成公钥私钥

如果您在安装 Git 后没有看到 .ssh 目录,这是正常的。.ssh 目录并不是 Git 自动创建的,而是需要您手动创建和配置。 以下是一般的步骤: 打开您的终端或命令提示符。 检查是否已经生成了 SSH 密钥对: ls -al ~/.ssh如果看到 id_rsa 和 id_rsa.pub 文件,说明已经有 SSH 密钥对了…

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

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