当前位置: 首页 > news >正文

el-table修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

代码如下:

<div class="c1"><el-table:data="tableData"striperow-class-name="custom-table-row"style="width:100%"@cell-mouse-enter="lightFn"@cell-mouse-leave="(checkName = ''), setAllChart()"><!-- // nowInfoNum 舆情事件量 eventSum 舆情传播量spreadSum 舆情办结率 转办时效 --><el-table-column type="index" label="排序" align="center"></el-table-column><el-table-columnprop="addressName"label="所属地域"width="80"align="center"></el-table-column><!-- el-table_1_column_3 is-center  el-table__cell --><!-- el-table_1_column_3 is-center  el-table__cell --><el-table-columnprop="nowInfoNum":label="this.typeName == '转办时效'? '转办时效(小时)': this.typeName.replace(new RegExp('舆情', 'g'), '')"align="center"></el-table-column><el-table-columnv-if="this.typeName != '舆情事件量'"prop="eventSum"label="事件量"align="center"></el-table-column><el-table-columnv-if="this.typeName != '舆情传播量'"prop="spreadSum"label="传播量"align="center"></el-table-column><el-table-column prop="waitSum" label="待激活" align="center"></el-table-column><el-table-column prop="waitFillSum" label="待核实" align="center"></el-table-column><el-table-column prop="doFillSum" label="已核实" align="center"></el-table-column><el-table-columnprop="applySum"label="办结申请"width="80"align="center"></el-table-column><el-table-column prop="finishSum" label="已办结" align="center"></el-table-column><el-table-columnprop="finishRate"label="办结率"v-if="this.typeName != '舆情办结率'"align="center"></el-table-column><el-table-columnv-if="this.typeName != '转办时效'"prop="transferHour"label="转办时效(小时)"width="80"align="center"></el-table-column></el-table></div>

 el-table设置属性自定义名字 row-class-name="custom-table-row"或直接浏览器属性审查拿到原始名

           

<style scoped>
//修改指定列字体颜色
.c1 >>> .el-table_1_column_3 {color: #fd5702;
}
//覆盖划过行的高亮显示
.c1 >>> .custom-table-row:hover .cell{color: var(--border) !important ;}
</style>

后续跟进

我碰到了表格里的类名一直不停变的情况

修改为下方这种稳定写法

      this.$nextTick(function(){
const elPart=document.querySelectorAll('tr');
elPart.forEach(a=>{a.children[2].style.color='#fd5702';
})})

本次开发中遇到的有意思的文章

1.

2.

3. 

相关文章:

el-table修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色

修改指定列字体颜色 ,覆盖划过行的高亮显示文字颜色 代码如下&#xff1a; <div class"c1"><el-table:data"tableData"striperow-class-name"custom-table-row"style"width:100%"cell-mouse-enter"lightFn"cell-…...

java高频面试题汇总

Java 基础 Java 中的序列化和反序列化是什么&#xff1f; 序列化是将 Java 对象转换为字节流的过程&#xff0c;以便可以将其存储在文件中或通过网络进行传输。反序列化则是将字节流恢复为 Java 对象的过程。通过实现 Serializable 接口&#xff0c;Java 对象可以支持序列化。…...

Docker安装ocserv教程(效果极佳)

本章教程,介绍如何在Debain系统上安装ocserv。安装方式是使用Docker方式部署。 一、安装Docker curl -sSL https://file.ewbang.com/docker/debian/install_docker.sh -o install_docker.sh && bash install_docker.sh二、拉取镜像 docker pull tommylau/ocserv...

【数据结构与算法】第3课—数据结构之单链表

文章目录 1. 什么是链表2. 单链表2.1 单链表的初始化和打印2.2 单链表的尾插和头插2.3 单链表的尾删和头删2.4 单链表查找节点2.5 单链表在指定位置之前/之后插入数据2.6 单链表删除节点和删除pos之后的节点2.7 销毁链表 3. 单链表和顺序表对比 1. 什么是链表 链表是在逻辑结构…...

linux—基础命令及相关知识

1.0Linux的哲学思想&#xff08;优势&#xff09; 1、一切都是一个文件&#xff0c;一切硬件设备包括硬件接口都可以以文件形式显示 2、系统小型&#xff0c;轻量级&#xff0c;300个包&#xff08;不装桌面的情况下&#xff09; 3、避免令人困惑的用户界面&#xff08;图形…...

Spring Boot 实现 WebSocket(注解方式)

本文介绍如何使用 Spring Boot 的注解方式实现一个简单的 WebSocket 服务&#xff0c;支持客户端与服务器之间进行实时通信。 1. 引入依赖 在 pom.xml 文件中添加 WebSocket 相关依赖。 <dependencies><!-- Spring Boot WebSocket 支持 --><dependency>&l…...

windows下Qt的安装方法

Qt Creator是个人非常喜欢的一款开发工具&#xff0c;喜欢用其来开发C和CPC平台项目&#xff0c;当然也可以用其来开发Android和Auto平台项目&#xff0c;但其现在采用离线安装&#xff0c;限于网络问题&#xff0c;安装速度非常慢。 现在介绍一种可以完成快速的安装方法。 下…...

嵌入式面试题 ARM常见面试题

一.ARM内核分为哪几类?他们之间有什么区别? ARM内核主要分为三类,Cortex-A,Cortex-R,Cortex-M三种,A代表Applications,向用户提供全方位解决方案,主要用于复制的应用场合,比如智能手机、移动计算平台,数字电视、机顶盒、打印机或服务器等。R代表Real-Time Embedded,…...

分布式调度器--Spring Task 的使用

目录 1、启动类&#xff08;App.java&#xff09;上加EnableScheduling注解&#xff1a; 开启基于注解的任务调度器 2、同步定时任务 3、多线程&#xff08;异步&#xff09;定时任务 3.1 配置线程池 3.2 开启异步支持 3.3 定义异步方法 4、Api说明 4.1 fixedDelay 4.…...

Java应用程序的测试覆盖率之设计与实现(四)-- jacoco-maven-plugin

一、什么是jacoco-maven-plugin jacoco源码jacoco文档 除了使用jacoco.cli.jar导出并生成覆盖率报告外&#xff0c;还可以使用jacoco-maven-plugin&#xff0c;它是maven集成了jacoco的一款插件。 在工程pom.xml里配置插件jacoco-maven-plugin。 <plugin><groupId&g…...

UI 提供的 progress-step 要怎么实现?

前言 这天突然收到了 UI 修改设计稿的消息通知&#xff1a;“xxx 已修改 xxx 项目并 了你&#xff0c;请及时查看变更内容”&#xff0c;一条、两条、三条 …&#xff0c;修改消息铺天盖地而来&#xff0c;然后就什么都看不到了&#xff08;因为我选择开启消息免打扰&#xf…...

DBSwitch和Seatunel

一、DBSwitch 什么是DBSwitch?它主要用在什么场景&#xff1f; 通过步骤分析可以看到这个是通过配置数据源&#xff0c;采用一次性或定时方案&#xff0c;同步到数据仓库的指定表&#xff0c;并且指定映射关系的工具。有点类似于flinkcdc的增量同步。 参考&#xff1a; dbs…...

【日志】力扣刷题 -- 轮转数组

2024.10.06 【力扣刷题】 经典面试150—转轮数组—中等 189. 轮转数组 - 力扣&#xff08;LeetCode&#xff09; 第一次做&#xff0c;暴力循环 // 超出时间限制 void rotate(int* nums, int numsSize, int k) {for(int i 0; i < k; i){int right numsSize - 1;int temp…...

Java 项目 Dockerfile 示例:从基础镜像选择到环境变量配置的详细指南

Java 项目 Dockerfile 示例&#xff1a;从基础镜像选择到环境变量配置的详细指南 本文提供了一个 Java 项目的 Dockerfile 示例&#xff0c;展示了如何为 Java 应用创建高效的 Docker 镜像。Dockerfile 从 OpenJDK 8 的 Java 运行环境开始&#xff0c;配置了工作目录和 JVM 启…...

WebGL编程指南 - 高级变换与动画基础

学习使用一个矩阵变换库&#xff0c;该库封装了矩阵运算的数学细节。快速上手使用该矩阵库&#xff0c;对图形进行复合变换。在该矩阵库的帮助下&#xff0c;实现简单的动画效果。 矩阵变换库&#xff1a;cuon-matrix.js OpenGL中的函数&#xff1a; 书中 cuon-matrix.js 函数…...

银行客户贷款行为数据挖掘与分析

#1024程序员节 | 征文# 在新时代下&#xff0c;消费者的需求结构、内容与方式发生巨大改变&#xff0c;企业要想获取更多竞争优势&#xff0c;需要借助大数据技术持续创新。本文分析了传统商业银行面临的挑战&#xff0c;并基于knn、逻辑回归、人工神经网络三种算法&#xff0…...

制程质量管理方案设计

质量管理系统框架——QMS 涵盖产生产制造体系的全生命周期的质量管理过程 与SAP、WMS、MES、OA等业务系统进行集成&#xff0c;整合各业务系统中的质量信息 利用整合的全价值链质量信息&#xff0c;寻找质量改进点和质量创新点 系统功能模块管理 系统管理&#xff1a;用户管理…...

uniapp移动端优惠券! 附源码!!!!

本文为常见的移动端uniapp优惠券&#xff0c;共有6种优惠券样式&#xff08;参考了常见的优惠券&#xff09;&#xff0c;文本内容仅为示例&#xff0c;您可在此基础上调整为你想要的文本 预览效果 通过模拟数据&#xff0c;实现点击使用优惠券让其变为灰色的效果&#xff08;模…...

【分布式技术】中间件-zookeeper安装配置

文章目录 安装部署1. 安装ZooKeeper2. 配置ZooKeeper3. 启动ZooKeeper服务器4. 使用ZooKeeper命令行客户端5. 使用ZooKeeper的四个基本操作6. ZooKeeper集群模式7. 安全和权限8. 监控和日志 相关文献 安装部署 在Linux环境中操作ZooKeeper通常涉及以下几个方面&#xff1a; 1…...

高等数学 7.6高阶线性微分方程

文章目录 一、线性微分方程的解的结构*二、常数变易法 方程 d 2 y d x 2 P ( x ) d y d x Q ( x ) f ( x ) (1) \cfrac{\mathrm{d}^2 y}{\mathrm{d}x^2} P(x) \cfrac{\mathrm{d}y}{\mathrm{d}x} Q(x) f(x) \tag{1} dx2d2y​P(x)dxdy​Q(x)f(x)(1) 叫做二阶线性微分方程。…...

网络编程(Modbus进阶)

思维导图 Modbus RTU&#xff08;先学一点理论&#xff09; 概念 Modbus RTU 是工业自动化领域 最广泛应用的串行通信协议&#xff0c;由 Modicon 公司&#xff08;现施耐德电气&#xff09;于 1979 年推出。它以 高效率、强健性、易实现的特点成为工业控制系统的通信标准。 包…...

测试微信模版消息推送

进入“开发接口管理”--“公众平台测试账号”&#xff0c;无需申请公众账号、可在测试账号中体验并测试微信公众平台所有高级接口。 获取access_token: 自定义模版消息&#xff1a; 关注测试号&#xff1a;扫二维码关注测试号。 发送模版消息&#xff1a; import requests da…...

深入浅出Asp.Net Core MVC应用开发系列-AspNetCore中的日志记录

ASP.NET Core 是一个跨平台的开源框架&#xff0c;用于在 Windows、macOS 或 Linux 上生成基于云的新式 Web 应用。 ASP.NET Core 中的日志记录 .NET 通过 ILogger API 支持高性能结构化日志记录&#xff0c;以帮助监视应用程序行为和诊断问题。 可以通过配置不同的记录提供程…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

React Native在HarmonyOS 5.0阅读类应用开发中的实践

一、技术选型背景 随着HarmonyOS 5.0对Web兼容层的增强&#xff0c;React Native作为跨平台框架可通过重新编译ArkTS组件实现85%以上的代码复用率。阅读类应用具有UI复杂度低、数据流清晰的特点。 二、核心实现方案 1. 环境配置 &#xff08;1&#xff09;使用React Native…...

srs linux

下载编译运行 git clone https:///ossrs/srs.git ./configure --h265on make 编译完成后即可启动SRS # 启动 ./objs/srs -c conf/srs.conf # 查看日志 tail -n 30 -f ./objs/srs.log 开放端口 默认RTMP接收推流端口是1935&#xff0c;SRS管理页面端口是8080&#xff0c;可…...

ArcGIS Pro制作水平横向图例+多级标注

今天介绍下载ArcGIS Pro中如何设置水平横向图例。 之前我们介绍了ArcGIS的横向图例制作&#xff1a;ArcGIS横向、多列图例、顺序重排、符号居中、批量更改图例符号等等&#xff08;ArcGIS出图图例8大技巧&#xff09;&#xff0c;那这次我们看看ArcGIS Pro如何更加快捷的操作。…...

Java编程之桥接模式

定义 桥接模式&#xff08;Bridge Pattern&#xff09;属于结构型设计模式&#xff0c;它的核心意图是将抽象部分与实现部分分离&#xff0c;使它们可以独立地变化。这种模式通过组合关系来替代继承关系&#xff0c;从而降低了抽象和实现这两个可变维度之间的耦合度。 用例子…...

JavaScript 数据类型详解

JavaScript 数据类型详解 JavaScript 数据类型分为 原始类型&#xff08;Primitive&#xff09; 和 对象类型&#xff08;Object&#xff09; 两大类&#xff0c;共 8 种&#xff08;ES11&#xff09;&#xff1a; 一、原始类型&#xff08;7种&#xff09; 1. undefined 定…...

【JavaSE】多线程基础学习笔记

多线程基础 -线程相关概念 程序&#xff08;Program&#xff09; 是为完成特定任务、用某种语言编写的一组指令的集合简单的说:就是我们写的代码 进程 进程是指运行中的程序&#xff0c;比如我们使用QQ&#xff0c;就启动了一个进程&#xff0c;操作系统就会为该进程分配内存…...