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让生活更智能还是更复杂?
内容概要 智能家居的概念源于将各种家居设备连接到互联网,并通过智能技术进行控制和管理。随着人工智能的迅速发展,这一领域也迎来了前所未有的机遇。从早期简单的遥控器到如今可以通过手机应用、语音助手甚至是环境感应进行操作的设备,智能…...
内存分配函数malloc kmalloc vmalloc
内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查
在对接支付宝API的时候,遇到了一些问题,记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...
React hook之useRef
React useRef 详解 useRef 是 React 提供的一个 Hook,用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途,下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...
三维GIS开发cesium智慧地铁教程(5)Cesium相机控制
一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点: 路径验证:确保相对路径.…...

python/java环境配置
环境变量放一起 python: 1.首先下载Python Python下载地址:Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个,然后自定义,全选 可以把前4个选上 3.环境配置 1)搜高级系统设置 2…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...

全球首个30米分辨率湿地数据集(2000—2022)
数据简介 今天我们分享的数据是全球30米分辨率湿地数据集,包含8种湿地亚类,该数据以0.5X0.5的瓦片存储,我们整理了所有属于中国的瓦片名称与其对应省份,方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...
c++ 面试题(1)-----深度优先搜索(DFS)实现
操作系统:ubuntu22.04 IDE:Visual Studio Code 编程语言:C11 题目描述 地上有一个 m 行 n 列的方格,从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子,但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)
引言 在人工智能飞速发展的今天,大语言模型(Large Language Models, LLMs)已成为技术领域的焦点。从智能写作到代码生成,LLM 的应用场景不断扩展,深刻改变了我们的工作和生活方式。然而,理解这些模型的内部…...