element plus中修改el-table的样式
文章目录
- 前情提要
- 相关环境
- package.json
- vue代码
- 结果
- 方式一
- 直接看代码
- 方式二
- 直接看代码
前情提要
因为项目中用到el-table的时候,需要将el-table表格的样式进行修改,将整个表格的背景颜色从白色变成透明,使得表格变得透明之后,展示颜色是对应父div的背景颜色,这个在可视化大屏的时候或许会经常用到。修改表格悬浮时的颜色,修改表格点击行高亮的颜色样式。在这里记录一下,方便后面直接使用到。这里记录一下,方便下次直接使用到。这里有两种方式,不过都是通过深度选择器进行配置的,避免影响到其他系统使用el-table时的样式。如下所示,假设父div的背景颜色为粉色,el-table默认的样式如下所示:
相关环境
项目使用的是vite+vue3+element plus。下面有两种方式都可以,建议使用方式二。
package.json
{"name": "smart_mining_vue_cesium","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"element-plus": "^2.8.4","vue": "^3.4.37","vue-router": "^4.4.5"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.2","cesium": "^1.121.1","vite": "^5.4.7","vite-plugin-cesium": "^1.2.23"}
}
vue代码
<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
</style>
结果
从图中可以看到,表格的背景颜色为白色,鼠标悬浮颜色为灰色,点击高亮的颜色为比悬浮的颜色稍微深一点。
方式一
这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器,一步一步修改得到的结果。
直接看代码
如果想知道对应的选择器的样式是什么,把对应的css代码注释掉就行了。
<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>:deep(.el-table) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 240, 240, 0);
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: skyblue;/* 背景图片,可以为表格头部设置背景颜色,不过如果背景是透明的,可以直接把父div的背景图片当做是这里的图片,只要把表格放在对应的位置就行了,看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 头部与body下面的分割线 */
:deep(.el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格行背景色 */
:deep(.el-table tr) {/* 透明度为0,不显示背景色 */background-color: rgba(255, 0, 0, 0); /* 文字颜色 */color: aquamarine;
}/* 表格行之间的分割线 */
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {border-bottom: none;
}/* 表格底部分割线,不知道表达的是什么,注释一下这个就知道了 */
:deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
}/* 鼠标悬停背景色 */
:deep(.el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell) {background-color: rgba(116, 85, 228, 0.671);
}/* 鼠标选中背景色,行点击事件 */
:deep(.el-table__body tr.current-row>td.el-table__cell) {background-color: green;
}
</style>
结果如下所示:
方式二
这个我也是通过浏览器的开发者模式中进行自己慢慢找对应的css选择器,一步一步修改得到的结果。
直接看代码
代码如下所示
<template><div style="width: 800px; height: 600px; background-color: pink;"><!-- highlight-current-row 为选中高亮当前点击的行 --><el-table :data="tableData" highlight-current-row style="width: 100%"><el-table-column prop="date" label="日期" width="180"></el-table-column><el-table-column prop="name" label="姓名" width="180"></el-table-column><el-table-column prop="address" label="地址"></el-table-column></el-table></div>
</template><script setup>
import { ref } from 'vue';const tableData = ref([{date: '2016-05-02',name: '王小虎',address: '上海市普陀区金沙江路 1518 弄'},{date: '2016-05-04',name: '张三',address: '上海市普陀区金沙江路 1517 弄'},{date: '2016-05-01',name: '李四',address: '上海市普陀区金沙江路 1519 弄'},{date: '2016-05-03',name: '赵六',address: '上海市普陀区金沙江路 1516 弄'}
]);
</script><style scoped>
:deep(.el-table) {--el-table-border-color: var(--el-border-color-lighter);--el-table-border: 0px solid var(--el-table-border-color); /**这里改成0了 */--el-table-text-color: rgb(127, 255, 202); /**文字颜色 */--el-table-header-text-color: rgb(135, 198, 235); /**表头文字颜色 */--el-table-row-hover-bg-color: rgba(116, 85, 228, 0.671); /**行悬浮颜色 */--el-table-current-row-bg-color: rgb(0, 161, 48); /**当前行颜色 */--el-table-header-bg-color: rgba(255, 0, 0, 0); /**表头背景颜色, 透明度为0 */--el-table-fixed-box-shadow: var(--el-box-shadow-light);--el-table-bg-color: rgba(255, 0, 0, 0); /**表格背景颜色, 透明度为0 */--el-table-tr-bg-color: rgba(255, 0, 0, 0); /**表格行的背景颜色, 透明度为0 */;--el-table-expanded-cell-bg-color: var(--el-fill-color-blank);--el-table-fixed-left-column: inset 10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-fixed-right-column: inset -10px 0 10px -10px rgba(0, 0, 0, 0.15);--el-table-index: var(--el-index-normal);background-color: rgba(255, 0, 0, 0); /**表格的背景颜色, 透明度为0 */;box-sizing: border-box;color: var(--el-table-text-color);font-size: 14px;height: -moz-fit-content;height: fit-content;max-width: 100%;overflow: hidden;position: relative;width: 100%;
}/* 头部标题组件 */
:deep(.el-table th.el-table__cell) {/* 背景图片,可以为表格头部设置背景颜色,不过如果背景是透明的,可以直接把父div的背景图片当做是这里的图片,只要把表格放在对应的位置就行了,看自己选择 *//* background-image: url("https://element-plus.org/images/element-plus-logo.svg"); */
}/* 表格底部分割线,不知道表达的是什么,注释一下这个就知道了 */
/* :deep(.el-table__inner-wrapper:before) {bottom: 0;height: 0px;left: 0;
} */
</style>
结果如下所示
打开浏览器的开发者模式可以看出
相关文章:

element plus中修改el-table的样式
文章目录 前情提要相关环境package.jsonvue代码结果 方式一直接看代码 方式二直接看代码 前情提要 因为项目中用到el-table的时候,需要将el-table表格的样式进行修改,将整个表格的背景颜色从白色变成透明,使得表格变得透明之后,展…...
深入理解封装与接口:Java程序设计的核心思想与最佳实践
目录 一、封装的优点 二、接口与默认方法 三、总结 在面向对象编程(OOP)中,封装(Encapsulation)是一个核心概念,Java对其进行了良好的支持。封装不仅有助于提高代码的安全性,还能够增强代码的…...

linux 下调试 mpu6050 三轴加速度
供自己备忘; 1. 参考资料: b 站视频 https://www.bilibili.com/video/BV1cL4y1x7FA/?spm_id_from333.337.search-card.all.click&vd_sourced7a07b8689c9e646f0214227c06f304c csdn 其它博客 https://blog.csdn.net/qq_65198598/article/detail…...

C语言心型代码解析
方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式: for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环,第一个代表y轴,第二个代表x轴 二个增加的单位不同,能使得…...
【LeetCode】【算法】647. 回文子串
LeetCode 647.回文子串 题目描述 给你一个字符串s,请你统计并返回这个字符串中回文子串的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串是字符串中的由连续字符组成的一个序列。 思路 思路:中心拓展法 中心拓展法的意思是说…...
介绍6种常见的基于知识图谱推荐算法的类型和各自的优缺点
基于知识图谱的推荐算法有多种,每种算法各有其优点和缺点。下面是一些常见的基于知识图谱的推荐算法及其分析: 基于邻域的协同过滤(Collaborative Filtering) 描述:通过分析用户之间的相似性或项目之间的相似性来进行…...

使用python拟合二元曲线系数
python import numpy as np import pandas as pd注: xlsx 表格中 有 压力P,流量值Q,温度值 K; df pd.read_excel("./i100-10000slm.xlsx",usecols[p1,molboxQm,Dek]) #print(df.head())#column_data df[p1] # 获取行数…...

go 集成viper 配置管理
安装viper go get github.com/spf13/viper 配置文件 读取配置文件 package confimport ("fmt""github.com/spf13/viper" )func Properties() {viper.SetConfigName("application")viper.SetConfigType("yml")viper.AddConfigPath(&q…...

Java:数据结构-再谈String类
字符串常量池 首先我们来思考这段代码,为什么运行结果一个是true,一个是false呢? public class Test {public static void main(String[] args) {String s1"123";String s2"123";String s3new String("555")…...

斗破QT编程入门系列之二:GUI应用程序设计基础:UI文件(四星斗师)
斗破Qt目录: 斗破Qt编程入门系列之前言:认识Qt:Qt的获取与安装(四星斗师) 斗破QT编程入门系列之一:认识Qt:初步使用(四星斗师) 斗破QT编程入门系列之二:认识…...

微服务实战系列之玩转Docker(十八)
导览 前言Q:如何保障容器云环境下etcd集群的数据安全一、安全机制身份认证必学必看1. 启动参数2. 授权命令3. 开启认证 二、应用实践1. 访问容器2. 查看认证是否开启3. 查看是否已创建用户4. 创建用户5. 开启认证6. 验证是否开启7. 验证数据 结语系列回顾 前言 etc…...

Javascript 获取设备信息 工具
JS获取设备信息(操作系统信息、地理位置、UUID、横竖屏状态、设备类型、网络状态、浏览器信息、生成浏览器指纹、日期、生肖、周几等) Get Device Info Online GitHub - skillnull/DeviceJs: JS获取设备信息(操作系统信息、地理位置、UUID、横竖屏状态、设备类型、网络状态、浏…...

基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
摘要:本文围绕用户获取成本(CAC)这一关键指标展开深入剖析,详细阐述其计算方式,并紧密结合开源 AI 智能名片与 S2B2C 商城小程序的独特性质,从多个维度探讨如何通过挖掘新的获客渠道、巧妙运用私域流量池等…...

仿真APP助力汽车零部件厂商打造核心竞争力
汽车零部件是汽车工业的基石,是构成车辆的基础元素。一辆汽车通常由上万件零部件组成,包括发动机系统、传动系统、制动系统、电子控制系统等,它们共同确保了汽车的安全、可靠性及高效运行。 在汽车产业快速发展的今天,汽车零部件…...
vue实现websocket实时短消息通知
1、原理 websocket就是通过服务器向客户端推送消息,客户端也可以主动向服务器发送消息,是真正的双向平等对话,是一种长连接,只需要通过一次请求进行初始化。 2、事件 onopen: 客户端和服务器建立连接后触发,被称为客…...

tinymce扩展功能:1、行高、段落间距、格式刷;2、视频上传进度条;3、对复制的图片设置尺寸
tinymce扩展功能:1、行高、段落间距、格式刷;2、视频上传进度条;3、对复制的图片设置尺寸 一、需求描述二、行高、段落间距、格式刷插件三、实现视频上传的进度条、对复制的图片设置尺寸 一、需求描述 使用技术: vue2 tinymce5.…...

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱
温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 温馨提示:文末有 CSDN 平台官方提供的学长联系方式的名片! 作者简介:Java领…...
WPF的<ContentControl>控件
在WPF(Windows Presentation Foundation)中,<ContentControl>是一个非常有用的控件,它允许你将内容放入一个控件中,这个内容可以是任何对象。ContentControl的主要特点是它有一个Content属性,你可以将…...
Python并发编程——multiprocessing
目录 1. 引言1.1 并发与并行的区别 2. 多进程开发2.1 Process 类的常用方法2.2 进程的生命周期与同步 3. 进程之间的数据共享3.1 使用 Value 和 Array3.2 使用 Manager 实现高级数据共享 4. 进程锁4.1 更复杂的锁应用4.2 锁的死锁与避免4.3 信号量与条件变量 5. 进程池5.1 imap…...

智能家居的未来:AI让生活更智能还是更复杂?
内容概要 智能家居的概念源于将各种家居设备连接到互联网,并通过智能技术进行控制和管理。随着人工智能的迅速发展,这一领域也迎来了前所未有的机遇。从早期简单的遥控器到如今可以通过手机应用、语音助手甚至是环境感应进行操作的设备,智能…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...

Mybatis逆向工程,动态创建实体类、条件扩展类、Mapper接口、Mapper.xml映射文件
今天呢,博主的学习进度也是步入了Java Mybatis 框架,目前正在逐步杨帆旗航。 那么接下来就给大家出一期有关 Mybatis 逆向工程的教学,希望能对大家有所帮助,也特别欢迎大家指点不足之处,小生很乐意接受正确的建议&…...
Java多线程实现之Callable接口深度解析
Java多线程实现之Callable接口深度解析 一、Callable接口概述1.1 接口定义1.2 与Runnable接口的对比1.3 Future接口与FutureTask类 二、Callable接口的基本使用方法2.1 传统方式实现Callable接口2.2 使用Lambda表达式简化Callable实现2.3 使用FutureTask类执行Callable任务 三、…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式
点一下关注吧!!!非常感谢!!持续更新!!! 🚀 AI篇持续更新中!(长期更新) 目前2025年06月05日更新到: AI炼丹日志-28 - Aud…...

AI书签管理工具开发全记录(十九):嵌入资源处理
1.前言 📝 在上一篇文章中,我们完成了书签的导入导出功能。本篇文章我们研究如何处理嵌入资源,方便后续将资源打包到一个可执行文件中。 2.embed介绍 🎯 Go 1.16 引入了革命性的 embed 包,彻底改变了静态资源管理的…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
A2A JS SDK 完整教程:快速入门指南
目录 什么是 A2A JS SDK?A2A JS 安装与设置A2A JS 核心概念创建你的第一个 A2A JS 代理A2A JS 服务端开发A2A JS 客户端使用A2A JS 高级特性A2A JS 最佳实践A2A JS 故障排除 什么是 A2A JS SDK? A2A JS SDK 是一个专为 JavaScript/TypeScript 开发者设计的强大库ÿ…...
Python+ZeroMQ实战:智能车辆状态监控与模拟模式自动切换
目录 关键点 技术实现1 技术实现2 摘要: 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式(自动驾驶、人工驾驶、远程驾驶、主动安全),并通过实时消息推送更新车…...

沙箱虚拟化技术虚拟机容器之间的关系详解
问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西,但是如果把三者放在一起,它们之间到底什么关系?又有什么联系呢?我不是很明白!!! 就比如说: 沙箱&#…...