elementui中 表格使用树形数据且固定一列时展开子集移入时背景色不全问题

news2024/12/24 11:41:12

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

修改后实现效果
在这里插入图片描述
解决- 需要修改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');
              }
            });
          }
        },
      },

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

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

相关文章

Oracle体系结构初探:数据库启动与停止

往期内容 参数管理 控制文件添加 启动 在启动Oracle数据库时,我们一般会使用如下命令: startup 虽然命令只有一个,但其中却是经历了3个阶段,从下面执行 startup 命令返回也可以看出来。 总结为3个阶段: nomount&…

【Unity2D 2022:Cinemachine】相机跟随与地图边界

一、导入Cinemachine工具包 1. 点击Window-Package Manager,进入包管理界面 2. 点击All,找到Cinemachine工具包,点击Install 二、相机跟随角色 1. 选中Main Camera,点击Component-Cinemachine-CinemachineBrain,新建…

【stm32/CubeMX、HAL库】嵌入式实验五:定时器(2)|PWM输出

参考: 【【正点原子】手把手教你学STM32CubeIDE开发】 https://www.bilibili.com/video/BV1Wp42127Cx/?p13&share_sourcecopy_web&vd_source9332b8fc5ea8d349a54c3989f6189fd3 《嵌入式系统基础与实践》刘黎明等编著,第九章定时器&#xff0c…

亚洲AI核心资产,商汤科技!全球最优秀的医疗大模型平台——“大医”。

今天会给大家详解下商汤的AI产品“大医”。 —、什么是“大医”?(行业模型) “日日新.大医”是一款具备创新精神的医疗健康领域大语言模型。该模型通过内置的“场景集市”模块,提供了13个预设医疗场景的应用,同时还能…

Golang——reflect(反射)

反射是指在程序运行期间对程序本身进行访问和修改的能力。 一. 变量的内在机制 变量包含类型信息和值信息类型信息:是静态的元信息,是预先定义好的值信息:是程序运行过程中动态改变的 二. 反射的使用 reflect包封装了反射相关的方法获取类型…

冯喜运:5.23黄金市场风云变幻,黄金原油美盘趋势分析

【黄金消息面分析】:在经历了一段时期的强劲上涨后,黄金市场似乎迎来了调整期。北京时间周四(5月23日),国际黄金价格连续第三个交易日下跌,目前交投在2365美元附近,较周一触及的纪录高点2449.89美元已下跌约4%。这一跌…

知识分享|非凸问题求解方法及代码示例【分类迭代】【大M法】

主要内容 之前发布了非线性问题线性化的几种方法,如知识分享|分段函数线性化及matlab测试,学习园地 | yalmip实用操作-线性化,非线性优化 | 非线性问题matlabyalmip求解案例,但是在实际建模及编程过程中,会遇到各种…

vue+canvas实现逐字手写效果

在pc端进行逐字手写的功能。用户可以在一个 inputCanvas 上书写单个字&#xff0c;然后在特定时间后将这个字添加到 outputCanvas 上&#xff0c;形成一个逐字的手写效果。用户还可以保存整幅图像或者撤销上一个添加的字。 <template><div class"container"…

【B站 heima】小兔鲜Vue3 项目学习笔记

系列文章目录 Day 01 目录 系列文章目录前言Day011.项目使用相关技术栈2. 项目规模和亮点3. Vue2和Vue3实现一个小案例4. vue3的优势5. create-vue脚手架工具6. 熟悉我们的项目目录和文件7. 组合式API-setup选项8. 组合式API-reactive和ref函数9. 组合式API-computed计算属性…

动态IP与静态IP有什么区别?如何选择?

动态IP和静态IP都是指网络设备&#xff08;如计算机、服务器、路由器等&#xff09;在互联网上分配的IP地址的类型。 一、什么是动态IP&#xff0c;什么是静态IP&#xff1f; 1、什么是动态IP&#xff1f; 动态IP是指由Internet服务提供商&#xff08;ISP&#xff09;动态分配…

xrdp多用户多控制界面远程控制

1、无桌面安装桌面&#xff08;原本有ubuntu桌面的可以直接跳过这一步&#xff09; Gnome 与 xfce 相比&#xff0c;xfce 由于其轻巧&#xff0c;它可以安装在低端台式机上。Xfce 优雅的外观&#xff0c;增强了用户体验&#xff0c;它对用户非常友好&#xff0c;性能优于其他桌…

docker- 购建服务镜像并启动

文章目录 前言docker- 购建服务镜像并启动1. 前期准备2. 构建镜像3. 运行容器4. 验证 前言 如果您觉得有用的话&#xff0c;记得给博主点个赞&#xff0c;评论&#xff0c;收藏一键三连啊&#xff0c;写作不易啊^ _ ^。   而且听说点赞的人每天的运气都不会太差&#xff0c;实…

扩散模型自动管道AutoPipeline

推荐&#xff1a;write_own_pipeline.ipynb - Colab (google.com) 为您的任务选择一个 AutoPipeline 首先选择一个检查点。例如&#xff0c;如果您对使用 runwayml/stable-diffusion-v1-5 检查点的文本到图像感兴趣&#xff0c;请使用 AutoPipelineForText2Image&#xff1a; f…

linux ping https是否连接

在Linux系统中&#xff0c;ping通常用于测试网络上另一台主机的可达性。它使用的是ICMP协议&#xff0c;这是一种设计用来处理网络通信问题的协议。HTTPS则是一种安全的网络传输协议&#xff0c;它使用SSL/TLS加密。 如果你想要测试到某个HTTPS服务器的连接&#xff0c;你可以使…

【MySQL精通之路】InnoDB(6)-磁盘结构(2)-索引

主博客&#xff1a; 【MySQL精通之路】InnoDB(6)-磁盘上的InnoDB结构-CSDN博客 上一篇&#xff1a; 下一篇&#xff1a; 【MySQL精通之路】磁盘上的InnoDB结构-表空间-CSDN博客 目录 1.聚集索引和二级索引 1.1 Innodb 如何建立聚集索引 1.2 聚集索引如何加快查询速度 1…

CustomTkinter:便捷美化Tkinter的UI界面(附模板)

CustomTkinter是一个基于Tkinter的Python用户界面库。 pip3 install customtkinter它提供了各种UI界面常见的小部件。这些小部件可以像正常的Tkinter小部件一样创建和使用&#xff0c;也可以与正常的Tkinter元素一起使用。 它的优势如下&#xff1a; CustomTkinter的小部件和…

四天学会JS高阶(学好vue的关键)——深入面向对象(理论+实战)(第三天)

***本章面试使用居多* 理论篇**一、编程思想 1.1 面向过程 JS 前端居多 按照步骤 性能高 适合跟硬件关系很紧密 没有面向对象易维护易复用易扩展 1.2 面向对象 java典型 按照功能&#xff0c;把事务分别成一个个对象&#xff0c;对象之间分工合作 比较灵活 适合多人合作的…

模拟笔试 - 卡码网周赛第十八期(23年科大讯飞提前批笔试真题)

第一题&#xff1a; 参考思路解析&#xff1a;&#xff08;遍历nums中的每个数字&#xff0c;得到不为0的数位即可。&#xff09; 1.导入Scanner类&#xff1a; import java.util.Scanner;&#xff1a;引入 Scanner 类&#xff0c;用于读取用户输入。 2.主方法&#xff1a; …

力扣1809 没有广告的剧集(postgresql)

需求 Table: Playback ----------------- | Column Name | Type | ----------------- | session_id | int | | customer_id | int | | start_time | int | | end_time | int | ----------------- 该表主键为&#xff1a;session_id &#xff08;剧集id&#xff09; customer_…

【C++算法】BFS解决FloodFill算法相关经典算法题

1.图像渲染 我们这道题可以使用深搜来解决&#xff0c;利用一个队列遍历到与该点相连的所有像素相同的点&#xff0c;然后将其修改成指定的像素即可&#xff0c;直接上思路&#xff1a; 直接上代码&#xff1a; class Solution {int dx[4] {0, 0, 1, -1};int dy[4] {1, -1, …