el-table修改表格颜色
文章目录
- 一、el-table属性修改表格颜色
- 1.1、header-row-class-name修改表头行颜色
- 1.2、header-row-style修改表头样式
- 1.3、row-class-name修改行颜色
- 二、el-table-column属性修改表格颜色
- 2.1、class-name修改整列的颜色
- 2.2、label-class-name修改列标题颜色
本文讲解vue修改el-table表格标题颜色。
以下代码从element组件官网进去,然后可以在线调试查看效果
本文讲解的一些属性及说明都能在element组件官网查看。
一、el-table属性修改表格颜色
1.1、header-row-class-name修改表头行颜色
header-row-class-name
:修改el-table整个表头的颜色
<template><el-table:data="tableData"style="width: 100%"header-row-class-name="custom-class"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>
在线查看效果:
如上图:整个表头的颜色都变了
1.2、header-row-style修改表头样式
header-row-style
:修改表头样式。比如居中、背景色、字体大小等等。
更多内容可参考另一篇博文《element中el-table表头通过header-row-style设置样式》
<template><el-table:data="tableData"style="width: 100%":header-cell-style="tableHeaderStyle"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style></style><script>export default {methods: {// 设置表头的颜色tableHeaderStyle({ row, column, rowIndex, columnIndex }) {if (rowIndex === 0 && columnIndex === 0) {return 'background-color: #afccfd; color:#000000;'; //蓝色} else if (rowIndex === 0 && columnIndex === 1) {return 'background-color: #c0e33c; color:#000000;';//绿色} else if (rowIndex === 0 && columnIndex === 2) {return 'background-color: #fbc57b; color:#000000;';//橙色} else {return 'color:#000000; background: #ffffff;';}}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>
效果图:
1.3、row-class-name修改行颜色
可以通过指定 Table 组件的 row-class-name
属性来为 Table 中的某一行添加 class,表明该行处于某种状态。
<template><el-table:data="tableData"style="width: 100%":row-class-name="tableRowClassName"><el-table-columnprop="date"label="日期"width="180"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.el-table .warning-row {background: oldlace;}.el-table .success-row {background: #f0f9eb;}
</style><script>export default {methods: {tableRowClassName({row, rowIndex}) {//rowIndex从0开始计算if (rowIndex === 0) {return 'warning-row';} else if (rowIndex === 2) {return 'success-row';}return '';}},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>
在线调试效果:
二、el-table-column属性修改表格颜色
2.1、class-name修改整列的颜色
class-name
属性修改整列颜色
<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"class-name="custom-class"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>
在线查看效果:
如上图:日期整列颜色都变了,包含标题和内容。
2.2、label-class-name修改列标题颜色
label-class-name
: 只修改列标题颜色,不修改整列颜色
<template><el-table:data="tableData"style="width: 100%"><el-table-columnprop="date"label="日期"width="180"label-class-name="custom-class"></el-table-column><el-table-columnprop="name"label="姓名"width="180"></el-table-column><el-table-columnprop="address"label="地址"></el-table-column></el-table>
</template><style>.custom-class {color: red;}
</style><script>export default {methods: {},data() {return {tableData: [{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}, {date: '2016-05-04',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'}, {date: '2016-05-01',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄',}]}}}
</script>
在线查看效果:
如上图:只有标题的颜色变了
还有很多其他样式待后续补充。
创作不易,欢迎打赏,你的鼓励将是我创作的最大动力。
相关文章:
el-table修改表格颜色
文章目录 一、el-table属性修改表格颜色1.1、header-row-class-name修改表头行颜色1.2、header-row-style修改表头样式1.3、row-class-name修改行颜色 二、el-table-column属性修改表格颜色2.1、class-name修改整列的颜色2.2、label-class-name修改列标题颜色 本文讲解vue修改e…...
014存储期(时间)
一、基本概念 C语言中,变量都是有一定的生存周期的,所谓生存周期指的是从分配到释放的时间间隔。为变量分配内存相当于变量的诞生,释放其内存相当于变量的死亡。从诞生到死亡就是一个变量的生命周期。 根据定义方式的不同,变量的…...
执行git操作时报错:`remote: [session-b8xxxda3] Access denied ...`解决方案
问题描述: 执行git push -u origin "master"时报错: > remote: [session-b849cda3] Access denied > fatal: unable to access https://gitee.com/jyunee/maibobo.git/: The requested URL returned error: 403表示没有权限访问远程仓库…...
Redis版本的EOL策略与升级路径(刷到别划走)
各位看官,刷到就点进来,大数据已经抓到你喽~😊 前言 在软件行业做服务端开发的我们,多多少少都会接触到Redis,用它来缓存数据、实现分布式锁等,相关八股文烂熟于心,但是往往会忽略具…...
算法题:数组中的第 K 个最大元素(中等难度)
一、题目 给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。 请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。 示例 1: 输入:nums [3,2,1,5,6,4], k 2 输出:…...
进行性核上性麻痹患者的生活护理指南
进行性核上性麻痹是一种神经系统退行性疾病,合理的生活护理能有效改善症状,提高生活质量。 居家环境要安全。移除地面杂物,铺设防滑垫,安装扶手,降低跌倒风险。在浴室、厨房等湿滑区域要特别加强防护措施。建议在床边、…...
Python大战Java:AI时代的编程语言‘复仇者联盟‘能否换C位?
背景 当Java程序员在咖啡机前念叨’Python凭什么抢我饭碗’时,AI实验室里的Python工程师正用5行代码召唤出神经网络——这场编程语言的’权力的游戏’,胜负可能比你想象的更魔幻!" 一、茶水间里的战争:Java和Python的相爱相…...
SpringBoot AI + PgVector向量库 + Openai Embedding模型
Spring Boot 项目引入 下载仓库地址 <dependencyManagement><dependencies><dependency><groupId>org.springframework.ai</groupId><artifactId>spring-ai-bom</artifactId><version>${spring-ai.version}</version>&l…...
目标检测——数据处理
1. Mosaic 数据增强 Mosaic 数据增强步骤: (1). 选择四个图像: 从数据集中随机选择四张图像。这四张图像是用来组合成一个新图像的基础。 (2) 确定拼接位置: 设计一个新的画布(输入size的2倍),在指定范围内找出一个随机点(如…...
数据集笔记:新加坡LTA MRT 车站出口、路灯 等位置数据集
1 MRT 车站出口 data.gov.sg (geojson格式) 1.1 kml格式 data.gov.sg 2 路灯 data.govsg ——geojson data.gov.sg——kml 版本 3 道路摄像头数据集 data.gov.sg 4 自行车道网络 data.gov.sg 5 学校区域 data.gov.sg 6 自行车停车架ÿ…...
Highcharts 配置语法详解
Highcharts 配置语法详解 引言 Highcharts 是一个功能强大的图表库,广泛应用于数据可视化领域。本文将详细介绍 Highcharts 的配置语法,帮助您快速上手并制作出精美、实用的图表。 高级配置结构 Highcharts 的配置对象通常包含以下几部分:…...
Python 项目安全实战:工具应用、规范制定、数据防护与架构加固
Python 项目安全实战:工具应用、规范制定、数据防护与架构加固 本文聚焦 Python 项目安全,深入介绍安全工具如 Bandit、OWASP ZAP 的实战操作,涵盖对特定模块扫描及 Web 测试进阶应用。详细阐述团队如何制定并持续更新安全编码规范ÿ…...
linux ununtu通过nginx-1.6.2.tar.gz安装nginx并安装在自定义目录XXX下 的步骤
Ubuntu 下通过源码安装 Nginx 1.6.2 到自定义目录 /home/aot/nginx 的步骤 以下是将 Nginx 1.6.2 源码包离线安装到自定义目录的详细流程,包含依赖管理、编译配置和服务管理: 一、准备工作 1. 下载源码包和依赖(需联网环境准备)…...
《Python百练成仙》31-40章(不定时更新)
第卅一章 函数结丹def开紫府 罗酆山的鬼门关吞吐着猩红的变量阴风,每个风眼都涌动着作用域混乱的灵力乱流。叶军手握薛香遗留的丹田玉简,玉简表面浮现出残缺的函数符文: def 凝聚金丹(灵气):道基 灵气 * 0.618print(金丹品质) # 作用域外变…...
Python--内置模块和开发规范(上)
1. 内置模块 1.1 JSON 模块 核心功能 序列化:Python 数据类型 → JSON 字符串 import json data [{"id": 1, "name": "武沛齐"}, {"id": 2, "name": "Alex"}] json_str json.dumps(data, ensure_a…...
使用DeepSeek实现自动化编程:类的自动生成
目录 简述 1. 通过注释生成C类 1.1 模糊生成 1.2 把控细节,让结果更精准 1.3 让DeepSeek自动生成代码 2. 验证DeepSeek自动生成的代码 2.1 安装SQLite命令行工具 2.2 验证DeepSeek代码 3. 测试代码下载 简述 在现代软件开发中,自动化编程工具如…...
植物大战僵尸金铲铲版 v1.1.6(windows+安卓)
游戏简介 《植物大战僵尸金铲铲版》是由“古见xzz”、“对不起贱笑了”、“是怪哉吖”等联合开发的民间魔改版本,融合了原版塔防玩法与《金铲铲之战》的自走棋元素,属于非官方同人作品。 游戏特点 合成升星机制:三个相同低星植物可合成更高…...
LeetCode 热题 100_寻找两个正序数组的中位数(68_4_困难_C++)(二分查找)(先合并再挑选中位数;划分数组(二分查找))
LeetCode 热题 100_寻找两个正序数组的中位数(68_4) 题目描述:输入输出样例:题解:解题思路:思路一(先合并再挑选中位数):思路二(划分数组(二分查找…...
酒店管理系统(代码+数据库+LW)
摘 要 时代的发展带来了巨大的生活改变,很多事务从传统手工管理转变为自动管理。自动管理是利用科技的发展开发的新型管理系统,这类管理系统可以帮助人完成基本的繁琐的反复工作。酒店是出门的必需品,无论出差还是旅游都需要酒店的服务。由…...
关于C/C++的输入和输出
目录 一、C语言中的scanf 有关scanf()的例子 二、C语言中的printf 有关printf()的例子 三、C中的cin、cout 四、字符的输入 1、cin.get() 2、cin.get() 3、cin.getline() 4、getline() 5、getchar() 五、string类型字符串长度 1、length() 2、size() 一、C语言中…...
袋鼠数据库工具 6.4 AI 版已上线
袋鼠数据库工具 6.4 AI 版已于 2025 年 2 月 26 日上线1。以下是该版本的一些新特性1: 地图支持:支持坐标定位并支持缩放动画;支持路线图,可在路线位置之间跳转;支持图层切换、标记和路线图图层切换;支持新…...
【AGI】DeepSeek开源周:The whale is making waves!
DeepSeek开源周:The whale is making waves! 思维火花引言一、DeepSeek模型体系的技术演进1. 通用语言模型:DeepSeek-V3系列2. 推理优化模型:DeepSeek-R1系列3. 多模态模型:Janus系列 二、开源周三大工具库的技术解析1…...
【无人机】无人机飞行日志下载及分析,飞行日志分析软件的使用
目录 一、飞行日志下载 1.1 通过地面站下载 1.1.1 QGroundControl(QGC)地面站 1.1.2 Mission Planner 地面站 1.2 通过内存卡读卡器下载 1.3 通过数传模块下载(数传日志) 二、飞行日志分析 2.1 使用 Flight Review 分析 …...
【朝夕教育】《鸿蒙原生应用开发从零基础到多实战》003-TypeScript 中的类
标题详情作者简介愚公搬代码头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主&…...
Java并发编程之可见性、原子性和有序性
引言 CPU缓存与内存产生的一致性问题(可见性) CPU时间片切换产生的原子性问题 CPU指令编译优化产生的有序性问题 并发编程问题的根源 CPU、内存、I/O设备三者速度差异一直是 核心矛盾 三者速度差异可形象描述为:天上一天(CPU),…...
99分巧克力
99分巧克力 ⭐️难度:中等 🌟考点:二分 2017省赛真题 📖 📚 import java.util.Scanner;public class Main {public static void main(String[] args) {Scanner sc new Scanner(System.in);int n sc.nextInt();i…...
阿里重磅模型深夜开源;DeepSeek宣布开源DeepGEMM;微软开源多模态AI Agent基础模型Magma...|网易数智日报
阿里重磅模型深夜开源:表现超越Sora、Pika,消费级显卡就能跑 2月26日,25日深夜阿里云视频生成大模型万相2.1(Wan)正式宣布开源,此次开源采用Apache2.0协议,14B和1.3B两个参数规格的全部推理代码…...
WPF10-绑定属性
目录 1. WPF属性系统1.1. CLR属性(CLR Properties)1.2. 相关属性(Related Properties)1.3. 附加属性(Attached Properties)1.4. 依赖属性(Dependency Properties)2. 依赖属性2.1. 定义2.2. 应用场景2.3. 理解2.3.1. 初识依赖属性2.3.2. 自定义依赖属性2.3.3. 使用依赖属…...
Python PDF文件拆分-详解
目录 使用工具 将PDF按页数拆分 将PDF的每一页拆分为单独的文件 将PDF按指定页数拆分 根据页码范围拆分PDF 根据指定内容拆分PDF 将PDF的一页拆分为多页 在日常生活中,我们常常会遇到大型的PDF文件,这些文件可能难以发送、管理和查阅。将PDF拆分成…...
ollama本地部署DeepSeek-R1大模型使用前端JS调用的详细流程
以下是关于如何在本地部署 DeepSeek-R1 大模型(通过 Ollama),并使用前端 JavaScript 调用其功能的详细流程。 前提条件 硬件要求: 建议至少 16GB RAM(运行较小模型如 1.5B 或 7B 参数版本),如果…...
Spring Cloud Alibaba与Spring Boot、Spring Cloud版本对应关系
一、前言 在搭建SpringCloud项目环境架构的时候,需要选择SpringBoot和SpringCloud进行兼容的版本号,因此对于选择SpringBoot版本与SpringCloud版本的对应关系很重要,如果版本关系不对应,常见的会遇见项目启动不起来,怪…...
初识SQL
SQL 定义:SQL(Structured Query Language,结构化查询语言)是一种标准化的数据库操作语言,广泛用于关系数据库管理系统(RDBMS),如 MySQL、PostgreSQL 等。它支持数据的定义࿰…...
12_Pandas时序数据(上)
固定时间 时间的表示 固定时间是指一个时间点。固定时间是时序数据的基础,一个固定时间带有丰富的信息,如年份、周几、月份、季度等。 Python的官网库datetime支持创建和处理时间: datetime.now() # 当前时间 datetime(2025,2,26,12) # 指…...
当我删除word文件时无法删除,提示:操作无法完成,因为已在Microsoft Word中打开
现象: 查看电脑桌面下方的任务栏,明明已经关闭了WPS和WORD软件,但是打开word文档时还是提示: 解决方法步骤: 1、按一下键盘上的ctrl Shift Esc 键打开任务管理器 2、在进程中找到如下: 快速找到的方法…...
0x03 http协议和分层架构
HTTP协议 简介 Hyper Text Transfer Protocol,超文本传输协议,规定了浏览器和服务器之间数据传输的规则 http协议基于TCP协议:面向连接,安全基于请求-响应模型:一次请求对应一次响应HTTP协议是无状态的协议ÿ…...
JavaScript系列03-异步编程全解析
本文介绍了异步相关的内容,包括: 回调函数与回调地狱Promise详解async/await语法Generator函数事件循环机制异步编程最佳实践 1、回调函数与回调地狱 JavaScript最初是为处理网页交互而设计的语言,异步编程是其核心特性之一。最早的异步编…...
深度解读 AMS1117:从电气参数到应用电路的全面剖析
在电子设备的电源管理领域,线性稳压器扮演着至关重要的角色,而 AMS1117 凭借其出色的性能和广泛的适用性,成为众多工程师的热门选择。本文将依据相关资料,对 AMS1117 的特性、应用、电气参数等方面进行详细解读。 一、功能特性概…...
深入理解Tomcat与Web应用部署:C/S与B/S架构下的实践指南
在当今的互联网时代,Web应用的开发与部署是软件开发领域的重要组成部分。无论是传统的C/S架构,还是现代广泛应用的B/S架构,了解它们的优缺点以及如何高效部署Web应用是每个开发者都需要掌握的技能。本文将深入探讨C/S与B/S架构的区别…...
XML 编辑器:全面指南与最佳实践
XML 编辑器:全面指南与最佳实践 引言 XML(可扩展标记语言)编辑器是处理XML文件的关键工具,对于开发人员、系统管理员以及任何需要处理XML数据的人来说至关重要。本文将全面介绍XML编辑器的概念、功能、选择标准以及最佳实践,旨在帮助读者了解如何选择和使用合适的XML编辑…...
Python实现GO鹅优化算法优化BP神经网络回归模型项目实战
说明:这是一个机器学习实战项目(附带数据代码文档视频讲解),如需数据代码文档视频讲解可以直接到文章最后关注获取。 1.项目背景 传统BP神经网络的局限性:BP(Back Propagation)神经网络作为一种…...
如何配置虚拟机的IP上网
要配置虚拟机的IP地址以便上网,你可以按照以下步骤操作: 打开虚拟机软件,确保虚拟机的网络设置为“桥接模式”或“NAT模式”,这样虚拟机可以与物理网络连接。 在虚拟机操作系统中,打开网络设置界面,一般在…...
【洛谷贪心算法题】P1094纪念品分组
该题运用贪心算法,核心思想是在每次分组时,尽可能让价格较小和较大的纪念品组合在一起,以达到最少分组的目的。 【算法思路】 输入处理:首先读取纪念品的数量n和价格上限w,然后依次读取每件纪念品的价格,…...
学习笔记08——ConcurrentHashMap实现原理及源码解析
1. 概述 为什么需要ConcurrentHashMap? 解决HashMap线程不安全问题:多线程put可能导致死循环(JDK7)、数据覆盖(JDK8) 优化HashTable性能:通过细粒度锁替代全局锁,提高并发度 对比…...
redis slaveof 命令 执行后为什么需要清库重新同步
在 Redis 中,执行 SLAVEOF(或 REPLICAOF)命令后,从节点需要清空现有数据并重新同步的主要原因如下: 1. 保证数据一致性 核心目标:确保从节点的数据与主节点 完全一致。问题场景: 如果从节点之前…...
6-1JVM的执行引擎处理
一、执行引擎的组成结构 解释器(Interpreter) 逐条解释执行字节码指令,启动速度快但执行效率较低。适用于短生命周期或对启动时间敏感的场景,如调试环境。 即时编译器(JIT Compiler) 通过动态…...
CMU15445(2023fall) Project #4 - Concurrency Control踩坑历程
把树木磨成月亮最亮时的样子, 就能让它更快地滚下山坡, 有时会比骑马还快。 完整代码见: SnowLegend-star/CMU15445-2023fall: Having Conquered the Loftiest Peak, We Stand But a Step Away from Victory in This Stage. With unwavering…...
腿足机器人之十三-强化学习PPO算法
腿足机器人之十三-强化学习PPO算法 腿足机器人位姿常用强化学习算法PPO算法核心原理PPO算法的创新设计PPO算法典型流程优势函数 对于复杂地形适应性(如楼梯、碎石路),传统的腿足机器人采用基于模型的控制器,该方法依赖精确动力学建…...
ubuntu下r8125网卡重启丢失修复案例一则
刚装的一台服务器,ubuntu24.04,主板网卡是r8125,安装服务后会莫名其妙丢失驱动 按照官网的方法下载最新8125驱动包: Realtek 然后卸载驱动 rmmod r8125 然后在驱动包里安装(幸好我之前装了build-essential&#x…...
设计一个“车速计算”SWC,通过Sender-Receiver端口输出车速信号。
1. 需求分析 功能目标:根据车轮脉冲信号(轮速传感器输入)计算当前车速,并将结果通过Sender端口发送给其他SWC。 输入:轮速脉冲数(如WheelPulse,类型uint32)。 输出:车速(如VehicleSpeed,类型float32,单位km/h)。 触发方式:周期性计算(例如每10ms执行一次)。 2.…...
DeepSeek 使用窍门与提示词写法指南
一、通用提示词技巧 窍门分类技巧说明示例提示词明确需求用“角色任务要求”明确目标作为健身教练,为30岁上班族设计一周减脂计划,需包含饮食和15分钟居家训练结构化提问分步骤、分模块提问第一步:列出Python爬虫必备的5个库;第二…...