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

news2024/10/7 4:35:10

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

修改后实现效果
在这里插入图片描述
解决- 需要修改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.coloradmin.cn/o/1699444.html

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

相关文章

【单片机】STM32F070F6P6 开发指南(一)STM32建立HAL工程

文章目录 一、基础入门二、工程初步建立三、HSE 和 LSE 时钟源设置四、时钟系统(时钟树)配置五、GPIO 功能引脚配置六、配置 Debug 选项七、生成工程源码八、生成工程源码九、用户程序下载 一、基础入门 f0 pack下载: https://www.keil.arm…

关于XtremIO 全闪存储维护的一些坑(建议)

XtremIO 是EMC过去主推的一款全闪存储系统,号称性能小怪兽,对付那些对于性能要求极高的业务场景是比较合适的,先后推出了1代和2代产品,目前这个产品好像未来的演进到了PowerStor或者PowerMax全闪,应该不独立发展这个产…

Leetcode260

260. 只出现一次的数字 III - 力扣(LeetCode) class Solution {public int[] singleNumber(int[] nums) {//通过异或操作,使得最终结果为两个只出现一次的元素的异或值int filterResult 0;for(int num:nums){filterResult^num;}//计算首个1(从右侧开始)…

[JDK工具-6] jmap java内存映射工具

文章目录 1. 介绍2. 主要选项3. 生成java堆转储快照 jmap -dump4. 显示堆详细信息 jmap -heap pid5. 显示堆中对象统计信息 jmap -histo pid jmap(Memory Map for Java) 1. 介绍 位置:jdk\bin 作用: jdk安装后会自带一些小工具,jmap命令(Mem…

渗透工具CobaltStrike工具的下载和安装

一、CobalStrike简介 Cobalt Strike(简称为CS)是一款基于java的渗透测试工具,专业的团队作战的渗透测试工具。CS使用了C/S架构,它分为客户端(Client)和服务端(Server),服务端只要一个,客户端可有多个,多人连接服务端后…

模型蒸馏笔记

文章目录 一、什么是模型蒸馏二、如何蒸馏三、实践四、参考文献 一、什么是模型蒸馏 Hinton在NIPS2014提出了知识蒸馏(Knowledge Distillation)的概念,旨在把一个大模型或者多个模型ensemble学到的知识迁移到另一个轻量级单模型上&#xff0…

Intel HDSLB 高性能四层负载均衡器 — 基本原理和部署配置

目录 文章目录 目录前言HDSLB-DPVS 的基本原理LVSDPDKDPVSHDSLB-DPVS HDSLB 的部署配置硬件要求软件要求编译安装 DPDK编译安装 HDSLB-DPVS配置大页内存配置网卡配置 HDSLB-DPVS启动 HDSLB-DPVS 测试 HDSLB-DPVS Two-arm Full-NAT 模式问题分析最后 前言 在上一篇《Intel HDSL…

[LLM]从GPT-4o原理到下一代人机交互技术

一 定义 GPT-4o作为OpenAI推出的一款多模态大型语言模型,代表了这一交互技术的重要发展方向。 GPT-4o是OpenAI推出的最新旗舰级人工智能模型,它是GPT系列的一个重要升级,其中的"o"代表"Omni",中文意思是“全…

民宿bug

前端 后端 1 订单管理 订单日期已过,状态没有变成已完成

xgboost项目实战-保险赔偿额预测与信用卡评分预测001

目录 算法代码 原理 算法流程 xgb.train中的参数介绍 params min_child_weight gamma 技巧 算法代码 代码获取方式:链接:https://pan.baidu.com/s/1QV7nMC5ds5wSh-M9kuiwew?pwdx48l 提取码:x48l 特征直方图统计: fig, …

Advanced Installer 问题集锦

1、界面在主题中显示的图标,如logo、发布者名称、产品名称就算在设计界面时删除,但是下次打开工程依然存在 解决办法:“可见”属性设置为禁用 2、在不关闭软件的情况下,使用"文件->打开"来切换项目,再次…

我让gpt4o给我推荐了一千多次书 得到了这些数据

事情是这样的,我们公司不是有个读书小组嘛,但是今年大家都忙于工作,忽视了读书这件事,所以我就想着搞个群机器人,让它明天定时向群里推荐一本书,用来唤起大家对读书的兴趣。但在调试的过程中就发现gpt4o老喜…

uniapp使用uni.chooseImage选择图片后对其是否符合所需的图片大小和类型进行校验

uni.chooseImage的返回值在H5平台和其他平台的返回值有所差异,具体差异看下图 根据图片可以看出要想判断上传的文件类型是不能直接使用type进行判断的,所以我使用截取字符串的形式来判断,当前上传图片的后缀名是否符合所需要求。 要求&#…

(已开源-ICRA2023) High Resolution Point Clouds from mmWave Radar

本文提出了一种用于生成高分辨率毫米波雷达点云的方法:RadarHD,端到端的神经网络,用于从低分辨率雷达构建类似激光雷达的点云。本文通过在大量原始雷达数据上训练 RadarHD 模型,同时这些雷达数据有对应配对的激光雷达点云数据。本…

Vue3实战笔记(37)—粒子特效登录页面

文章目录 前言一、粒子特效登录页总结 前言 上头了&#xff0c;再来一个粒子特效登录页面。 一、粒子特效登录页 登录页&#xff1a; <template><div><vue-particles id"tsparticles" particles-loaded"particlesLoaded" :options"…

ML307R OpenCPU GPIO使用

一、GPIO使用流程图 二、函数介绍 三、GPIO 点亮LED 四、代码下载地址 一、GPIO使用流程图 这个图是官网找到的&#xff0c;ML307R GPIO引脚电平默认为1.8V&#xff0c;需注意和外部电路的电平匹配&#xff0c;具体可参考《ML307R_硬件设计手册_OpenCPU版本适用.pdf》中的描…

MLM之CogVLM2:CogVLM2(基于Llama-3-8B-Instruct 模型进行微调)的简介、安装和使用方法、案例应用之详细攻略

MLM之CogVLM2&#xff1a;CogVLM2(基于Llama-3-8B-Instruct 模型进行微调)的简介、安装和使用方法、案例应用之详细攻略 目录 CogVLM2的简介 1、更新日志 2、CogVLM2 系列开源模型的详细信息 3、Benchmark 4、项目结构 5、模型协议 CogVLM2的安装和使用方法 1、模型微调…

智慧社区管理系统:打造便捷、安全、和谐的新型社区生态

项目背景 在信息化、智能化浪潮席卷全球的今天&#xff0c;人们对于生活品质的需求日益提升&#xff0c;期待居住环境能与科技深度融合&#xff0c;实现高效、舒适、安全的生活体验。在此背景下&#xff0c;智慧社区管理系统应运而生&#xff0c;旨在借助现代信息技术手段&…

685. 冗余连接 II

685. 冗余连接 II 问题描述 在本问题中&#xff0c;有根树指满足以下条件的 有向 图。该树只有一个根节点&#xff0c;所有其他节点都是该根节点的后继。该树除了根节点之外的每一个节点都有且只有一个父节点&#xff0c;而根节点没有父节点。 输入一个有向图&#xff0c;该…