修改源码,element的el-table合并,处理合并产生的hover样式问题

news2025/7/8 4:51:45

1、确认自己element-ui的版本号

---

2、此element-ui下的lib包是修改过hover样式的包,如何替换自己文件下的node_modules中的包

  • 修改后将lib文件夹中文件替换你项目中/node_module/element-ui/Lib中的文件

问题??如果替换开发环境中的node_module的包无法升级到测试环境,因为node_module中的包只在你本地

解决办法:需要将代码拷贝到本地分支,修改table文件,然后一起提交

如果不使用element打包之后的lib文件,就进行以下操作

1、在github中找到element-ui的源码,克隆到本地,直接修改。

el-table合并行hover显示问题

作者解决前显示的问题,如下两张图片

图一
在这里插入图片描述

作者解决后如下

在这里插入图片描述

2、最后产品想要的效果,需求:不区分每一行,只要移入到合并的行,都需要背景颜色

在这里插入图片描述

3、需要源码变动的替换下边两个文件

  • 3.1、table/src/table-row.js文件
import ElCheckbox from 'element-ui/packages/checkbox';
export default {
   
  name: 'ElTableRow',
  props: [
    'columns',
    'row',
    'index',
    'isSelected',
    'isExpanded',
    'store',
    'context',
    'firstDefaultColumnIndex',
    'treeRowData',
    'treeIndent',
    'columnsHidden',
    'getSpan',
    'getColspanRealWidth',
    'getCellStyle',
    'getCellClass',
    'handleCellMouseLeave',
    'handleCellMouseEnter',
    'fixed',
    'recordRowIndexMap'
  ],
  components: {
   
    ElCheckbox
  },
  render() {
   
    const {
   
      columns,
      row,
      index: $index,
      store,
      context,
      firstDefaultColumnIndex,
      treeRowData,
      treeIndent,
      columnsHidden 

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

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

相关文章

【Linux操作系统】探秘Linux奥秘:用户、组、密码及权限管理的解密与实战

🌈个人主页:Sarapines Programmer🔥 系列专栏:《操作系统实验室》🔖诗赋清音:柳垂轻絮拂人衣,心随风舞梦飞。 山川湖海皆可涉,勇者征途逐星辉。 目录 🪐1 初识Linux OS &…

[C#]C# winform实现imagecaption图像生成描述图文描述生成

介绍: 地址:C#https://github.com/ruotianluo/ImageCaptioning.pytorch 效果: 测试环境: vs2019 onnxruntime1.16.3 opencvsharp4.8 代码: using System; using System.Collections.Generic; using System.Comp…

QT 利用开源7z 实现解压各种压缩包,包括进度条和文件名的显示(zip,7z,rar,iso等50多种格式)

想做一个winRAR一样的解压软件吗?很简单,利用开源的7z库就能实现。我看网上其他人说的方法不敢苟同,误人子弟。以前自己在项目中使用过7z,这次又有需要,就想记录下来。如果你研究过如何用7z的话,一定知道7z的每一个GUID都代表了一种格式,50多种GUID也就有50多个格式,最…

2023 年中国金融级分布式数据库市场报告:TiDB 位列领导者梯队,创新能力与增长指数表现突出

近日,沙利文联合头豹研究院发布了中国数据库系列报告之《2023 年中国金融级分布式数据库市场报告》。 报告认为,金融行业对于分布式数据库信任度与认可度正在逐步提高,中国金融级分布式数据库市场正处于成熟落地的高增长阶段,行业…

自激振荡电路笔记 电弧打火机

三极管相关 三极管的形象描述 二极管 简单求解(理想) 优先导通(理想) 恒压降 稳压管(二极管plus) 基础工作模块 理想稳压管的工作特性 晶体管之三极管(“两个二极管的组合” ) 电弧打火机电路 1.闭合开…

音频播放软件Foobar2000 mac特点介绍

Foobar2000 mac是一款高度可定制的音频播放器,适用于Windows平台。它支持各种音频格式,包括MP3、FLAC、AAC、WMA等,同时也支持各种音频插件和效果器,可以提供更好的音质和用户体验。 Foobar2000 mac软件特点 1. 高度可定制&#…

未来的智能:人机环境系统智能

2023年即将过去,2024年即将到来,未来会是怎样的呢?未来的智能又会是怎样的呢?针对这个问题我们不妨展开想象的翅膀憧憬一下,或许可以在不经意中碰上不远后的脚步! 随着科技的发展和人工智能的不断进步&…

STM32 ESP8266 物联网智能温室大棚 源码PCB原理图 设计文档

资料下载: https://download.csdn.net/download/vvoennvv/88680924 一、概述 本系统以STM32F103C8T6单片机为主控芯片,采用相关传感器构建系统硬件电路。其中使用DHT11温湿度传感器对温度和湿度的采集,MQ-7一氧化碳传感器检测CO浓度,GP2Y101…

基于电商场景的高并发RocketMQ实战-Consumer端队列负载均衡分配机制、并发消费以及消费进度提交

🌈🌈🌈🌈🌈🌈🌈🌈 【11来了】文章导读地址:点击查看文章导读! 🍁🍁🍁🍁🍁🍁&#x1f3…

基于NXP I.MX8 + Codesys的工业软PLC解决方案

全新i.MX 8M Plus是一个混合人工智能SoC,将先进的嵌入式SoC与最新的人工智能/机器学习硬件NPU技术相结合,通过神经网络加速器,为边缘计算提供强大的机器学习能力,是i.MX 8M Plus一个最为突出的优势。WEC-IMX8P核心板特别适合在机器…

Flood Fill算法总结

算法思想 从一个起点开始,每一次随机选择一个新加进来的格子,看一下它周围能否扩展新的格子。如果能扩展,那么就扩展进来,直到不能扩展新的格子为止。当然需要判重,同样一个格子只能覆盖一次,这样能够保证时…

Python 下载与安装

1、下载 打开Python官网:Welcome to Python.org 点击下图所示的【Downloads】按钮进入下载页面。 ​ 进入下载页面后下拉至下图位置,选择版本,点击下载按钮下载。 页面会跳转至下一页下载页面,下拉到下图位置,选择…

什么是SEO?

什么是SEO? SEO代表“搜索引擎优化”。这是通过非付费(也称为“自然”)搜索引擎结果来提高网站流量的质量和数量以及品牌曝光率的做法。 尽管有首字母缩略词,但 SEO 既关乎搜索引擎本身,也关乎人。这是关于了解人们在…

fastjosn利用分析

fastjosn一般是使用TemplatesImpl链来进行攻击的,在上面其实已经分析过fastjson在反序列化的时候会调用满足条件的getter方法,因此就会调用TemplatesImpl类的getOutputProperties方法,然后通过getOutputProperties,调用newTransfo…

00-Git 详解

Git 应用 一、Git概述 1.1 什么是Git git 是一个代码协同管理工具,也称之为代码版本控制工具,代码版本控制或管理的工具用的最多的: svn、 git。 SVN 是采用的 同步机制,即本地的代码版本和服务器的版本保持一致(提…

3D视觉-结构光测量-网格结构光测量

网格结构光测量 网格结构光测量也常常被称为面结构光测量,它首先需要用投影器件产生符合条件的网格状投射光,并投射到待测物表面,由于网格上的光条具有两个方向,因此该方法可以通过两个测量方向分析待测物表面的三维坐标信息&…

键盘字符(#键)显示错误

当屏幕上显示的键与键盘上按下的键不同时,尤其是 # 键。大多数情况下,此错误是由于 raspbian 和 NOOBS 软件的默认英国键盘配置所致。 解决方案: 要解决此问题,您需要将配置更改为您自己的键盘或语言的配置。这可以通过转到树莓派…

Docker单点部署Seata(2.0.0) + Nacos(v2.3.0) + Mysql(5.7)

文章目录 一、部署Nacos二、部署Mysql三、Seata准备工作1. 记住nacos、mysql、宿主机的ip2. 建立数据库3. Nacos远程配置文件 四、部署Seata五、初步检验Seata部署情况六、微服务使用Seata1.引入依赖2. application.yml配置 七、遇到的坑1. Nacos显示Seata服务的ip为容器内网ip…

springboot 双数据源配置

1:pom <!--SpringBoot启动依赖--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.boot</group…

[MySQL] MySQL数据库创建存储过程

一、mysql存储过程的相关知识 1.1 存储过程的概念 存储过程是一组为了完成特定功能的SQL语句集合。类似于于其他编程语言中的函数&#xff0c;定义一个函数方法&#xff0c;可以随时起到传参调用的功能。 存储过程在使用过程中是将常用或者复杂的工作预先使用SQL语句写好并用…