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) {
            // this.store.states.isComplex 为true说明当前移入的是父级 tr 为false当前移入的是子级tr 当子级table展开后又移入父级tr 时不做处理 (解决子级table展开时 且又移入父级tr后 出现子级tr背景高亮bug)
            if (this.store.states.isComplex||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');
              }
            });
          }
        },
      },
      

.childrenTable是子级table类名 ==>
在这里插入图片描述

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

智慧管廊巡检运维解决方案

一、智慧管廊巡检行业目前存在的挑战和难题 智慧管廊巡检行业面临着运行环境的客观影响,如地面施工、液体渗漏、通风不佳、内部空间受限等问题。而管廊巡检机器人系统的出现却具有重大意义。它能够有力地保障管廊安全且可靠地运行,在面对火情、灾情等紧…

5G专网驻网失败分析(suci无效)

suci 5G终端第一次驻网时,注册消息Registartion request中携带的5GS mobile identity要携带suci类型的mobile identity。 注册消息协议规范见5G NAS 协议3gpp TS24.501 8.2.6 Registration request。 suci协议规范参见3gpp TS24.501 9.11.3.4 5GS mobile identity …

图像处理之计算物体的方向(C++)

图像处理之计算物体的方向(C) 文章目录 图像处理之计算物体的方向(C)前言一、PCA获取物体主要方向1.原理2.代码实现 二、Hu矩获取物体主要方向1.原理2.代码实现 总结 前言 在图像处理中,物体的方向(倾斜角…

Habicht定理中有关子结式命题3.4.6的证明

个人认为红色区域有问题,因为 deg ⁡ ( ϕ ( S j ) ) r \deg{\left( \phi\left( S_{j} \right) \right) r} deg(ϕ(Sj​))r,当 i ≥ r i \geq r i≥r时, s u b r e s i ( ϕ ( S j 1 ) , ϕ ( S j ) ) subres_{i}\left( \phi(S_{j 1}),\p…

“不是我兄弟”!刘强东内部“狼性训话”流出!

今天,京东创始人刘强东5月24日的线上讲话流出。 在这次线上讲话中,刘强东首先宣布为全体采销员工涨薪20%—100%,随后进行了一番“狼性训话”。往期报道可戳:刘强东怒了:“不是我兄弟”! 刘强东在讲话中指…

矩阵对角化在机器学习中的奥秘与应用

在机器学习的广阔领域中,矩阵对角化作为一种重要的数学工具,扮演着不可或缺的角色。从基础的线性代数理论到复杂的机器学习算法,矩阵对角化都在其中发挥着重要的作用。 矩阵对角化的概念与原理 矩阵对角化是矩阵理论中的一个基本概念&#x…

FreeRtos进阶——栈保存现场的几种场景

MCU架构 在认识栈的结构前,我们先来认识以下单片机的简单架构。在我们的CPU中有着很重要的一个模块——寄存器(R0-R15),其中R13,R14,R15的别称分别为SP栈顶指针、LR返回地址、PC当前指令地址。外部RAM是单片…

有限元法之有限元空间的构造

目录 一、区域Ω的剖分 二、三角形一次元 三、一次元的基函数与面积坐标 四、三角形二次元及其基函数 前两节我们介绍了有限元基本概念和变分理论的推导,本节我们继续探讨有限元空间的构造。 一、区域Ω的剖分 对矩形区域进行三角剖分,其中x方向剖…

yolov8+ROS+ubuntu18.04——学习记录

参考文献 1.Ubuntu配置Yolov8环境并训练自己的数据集 ROS实时运行 2.https://juejin.cn/post/7313979467965874214 前提: 1.CUDA和Anaconda,PyTorch 2.python>3.8 一、创建激活环境,安装依赖 1.创建虚拟环境 conda create -n yol…

Dream

好像很多人梦寐以求的都是别人已经拥有的,多少人奋斗一生的目标,却只是别人的起点,人生而自由,只是不在枷锁之中,生活中没有人不遗憾,只是没有人喊疼,时间不会重来,已经过去了就让它…

node.js学习P3-P10

P3 npm package.json(package解读npm工具换镜像源) 一个package.json文件可以的作用 作为一个描述文件,描述了你的项目依赖哪些包 ,用来干什么的允许我们使用“语义版本规则”,指明你项目依赖的版本让你的构建更好的…

C++ 数据结构算法 学习笔记(33) -查找算法及企业级应用

C 数据结构算法 学习笔记(33) -查找算法及企业级应用 数组和索引 日常生活中,我们经常会在电话号码簿中查阅“某人”的电话号码,按姓查询或者按字母排 序查询;在字典中查阅“某个词”的读音和含义等等。在这里,“电话号码簿”和…

地信专业大二准备学开发,3大编程语言应该怎么选

地信专业同学学编第一步就是编程语言。 但是编程语言那么多,地信专业需要学什么语言呢?小编在这儿给你介绍三个我们专业常用的编程语言。 01.Python Python 是地理空间分析和一般数据科学中最流行的编程语言之一。它的流行来自于 Python 的高级、人类可…

统信UOS专业版操作系统如何安装惠普打印机驱动

通用集成驱动安装方法 以惠普P1566激光打印机为例介绍一下,在打印机管理器中选择打印机,手动选择安装驱动,找到品牌:惠普,型号:1566,安装驱动后测试打印;LaserJet Pro P1566 Foomati…

大语言模型PEFT

目录 一、PEFT的关键概念和方法 部分参数微调 概念 方法 优势 适配器(Adapters) 方法 优势 低秩分解(Low-rank Factorization) 方法 优势 差分微调(Delta Tuning) 方法 优势 多任务学习&…

[8] CUDA之向量点乘和矩阵乘法

CUDA之向量点乘和矩阵乘法 计算类似矩阵乘法的数学运算 1. 向量点乘 两个向量点乘运算定义如下: #真正的向量可能很长,两个向量里边可能有多个元素 (X1,Y1,Z1) * (Y1,Y2,Y3) X1Y1 X2Y2 X3Y3这种原始输入是两个数组而输出却缩减为一个(单一值)的运…

CLIP源码详解:clip.py 文件

前言 这是关于 CLIP 源码中的 clip.py 文件中的代码带注释版本。 clip.py 文件的作用:封装了 clip 项目的相关 API,通过这些 API ,我们可以轻松使用 CLIP 项目预训练好的模型进行自己项目的应用。 另外不太容易懂的地方都使用了二级标题强…

mysql高级篇学习(数据表的设计方法,索引优化)

使用docker 安装 mysql 安装 docker # yum 包更新到最新 yum update# 卸载旧的 docker yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine # 安装 gcc 环境 yum -y install…

nodejs安装配置

nodejs安装 打开nodejs官网(https://nodejs.org/en/download/package-manager),参考安装步骤操作。 更新镜像源 输入以下命令,将npm的镜像源设置为淘宝镜像。网上资料中,淘宝镜像地址多为https://registry.npm.taobao.org,这个…

DOS学习-目录与文件应用操作经典案例-comp

新书上架~👇全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.使用 三.案例 案例 1: 基本比较 案例 2: 十进制显示差异 案例 3: 字符形式显…