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

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的时候&#xff0c;需要将el-table表格的样式进行修改&#xff0c;将整个表格的背景颜色从白色变成透明&#xff0c;使得表格变得透明之后&#xff0c;展…...

深入理解封装与接口:Java程序设计的核心思想与最佳实践

目录 一、封装的优点 二、接口与默认方法 三、总结 在面向对象编程&#xff08;OOP&#xff09;中&#xff0c;封装&#xff08;Encapsulation&#xff09;是一个核心概念&#xff0c;Java对其进行了良好的支持。封装不仅有助于提高代码的安全性&#xff0c;还能够增强代码的…...

linux 下调试 mpu6050 三轴加速度

供自己备忘&#xff1b; 1. 参考资料&#xff1a; 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语言心型代码解析

方法一 心型极坐标方程 爱心代码你真的理解吗 笛卡尔的心型公式&#xff1a; for (y 1.5; y > -1.5; y - 0.1) for (x -1.5; x < 1.5; x 0.05) 代码里面用了二个for循环&#xff0c;第一个代表y轴&#xff0c;第二个代表x轴 二个增加的单位不同&#xff0c;能使得…...

【LeetCode】【算法】647. 回文子串

LeetCode 647.回文子串 题目描述 给你一个字符串s&#xff0c;请你统计并返回这个字符串中回文子串的数目。 回文字符串 是正着读和倒过来读一样的字符串。 子字符串是字符串中的由连续字符组成的一个序列。 思路 思路&#xff1a;中心拓展法 中心拓展法的意思是说&#xf…...

介绍6种常见的基于知识图谱推荐算法的类型和各自的优缺点

基于知识图谱的推荐算法有多种&#xff0c;每种算法各有其优点和缺点。下面是一些常见的基于知识图谱的推荐算法及其分析&#xff1a; 基于邻域的协同过滤&#xff08;Collaborative Filtering&#xff09; 描述&#xff1a;通过分析用户之间的相似性或项目之间的相似性来进行…...

使用python拟合二元曲线系数

python import numpy as np import pandas as pd注&#xff1a; xlsx 表格中 有 压力P&#xff0c;流量值Q&#xff0c;温度值 K&#xff1b; 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类

字符串常量池 首先我们来思考这段代码&#xff0c;为什么运行结果一个是true&#xff0c;一个是false呢&#xff1f; public class Test {public static void main(String[] args) {String s1"123";String s2"123";String s3new String("555")…...

斗破QT编程入门系列之二:GUI应用程序设计基础:UI文件(四星斗师)

斗破Qt目录&#xff1a; 斗破Qt编程入门系列之前言&#xff1a;认识Qt&#xff1a;Qt的获取与安装&#xff08;四星斗师&#xff09; 斗破QT编程入门系列之一&#xff1a;认识Qt&#xff1a;初步使用&#xff08;四星斗师&#xff09; 斗破QT编程入门系列之二&#xff1a;认识…...

微服务实战系列之玩转Docker(十八)

导览 前言Q&#xff1a;如何保障容器云环境下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 商城小程序的用户获取成本优化分析

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

仿真APP助力汽车零部件厂商打造核心竞争力

汽车零部件是汽车工业的基石&#xff0c;是构成车辆的基础元素。一辆汽车通常由上万件零部件组成&#xff0c;包括发动机系统、传动系统、制动系统、电子控制系统等&#xff0c;它们共同确保了汽车的安全、可靠性及高效运行。 在汽车产业快速发展的今天&#xff0c;汽车零部件…...

vue实现websocket实时短消息通知

1、原理 websocket就是通过服务器向客户端推送消息&#xff0c;客户端也可以主动向服务器发送消息&#xff0c;是真正的双向平等对话&#xff0c;是一种长连接&#xff0c;只需要通过一次请求进行初始化。 2、事件 onopen: 客户端和服务器建立连接后触发&#xff0c;被称为客…...

tinymce扩展功能:1、行高、段落间距、格式刷;2、视频上传进度条;3、对复制的图片设置尺寸

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

计算机毕业设计Python+图神经网络手机推荐系统 手机价格预测 手机可视化 手机数据分析 手机爬虫 Django Flask Spark 知识图谱

温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 温馨提示&#xff1a;文末有 CSDN 平台官方提供的学长联系方式的名片&#xff01; 作者简介&#xff1a;Java领…...

WPF的<ContentControl>控件

在WPF&#xff08;Windows Presentation Foundation&#xff09;中&#xff0c;<ContentControl>是一个非常有用的控件&#xff0c;它允许你将内容放入一个控件中&#xff0c;这个内容可以是任何对象。ContentControl的主要特点是它有一个Content属性&#xff0c;你可以将…...

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让生活更智能还是更复杂?

内容概要 智能家居的概念源于将各种家居设备连接到互联网&#xff0c;并通过智能技术进行控制和管理。随着人工智能的迅速发展&#xff0c;这一领域也迎来了前所未有的机遇。从早期简单的遥控器到如今可以通过手机应用、语音助手甚至是环境感应进行操作的设备&#xff0c;智能…...

内存分配函数malloc kmalloc vmalloc

内存分配函数malloc kmalloc vmalloc malloc实现步骤: 1)请求大小调整:首先,malloc 需要调整用户请求的大小,以适应内部数据结构(例如,可能需要存储额外的元数据)。通常,这包括对齐调整,确保分配的内存地址满足特定硬件要求(如对齐到8字节或16字节边界)。 2)空闲…...

调用支付宝接口响应40004 SYSTEM_ERROR问题排查

在对接支付宝API的时候&#xff0c;遇到了一些问题&#xff0c;记录一下排查过程。 Body:{"datadigital_fincloud_generalsaas_face_certify_initialize_response":{"msg":"Business Failed","code":"40004","sub_msg…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 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"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

线程与协程

1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指&#xff1a;像函数调用/返回一样轻量地完成任务切换。 举例说明&#xff1a; 当你在程序中写一个函数调用&#xff1a; funcA() 然后 funcA 执行完后返回&…...

全球首个30米分辨率湿地数据集(2000—2022)

数据简介 今天我们分享的数据是全球30米分辨率湿地数据集&#xff0c;包含8种湿地亚类&#xff0c;该数据以0.5X0.5的瓦片存储&#xff0c;我们整理了所有属于中国的瓦片名称与其对应省份&#xff0c;方便大家研究使用。 该数据集作为全球首个30米分辨率、覆盖2000–2022年时间…...

c++ 面试题(1)-----深度优先搜索(DFS)实现

操作系统&#xff1a;ubuntu22.04 IDE:Visual Studio Code 编程语言&#xff1a;C11 题目描述 地上有一个 m 行 n 列的方格&#xff0c;从坐标 [0,0] 起始。一个机器人可以从某一格移动到上下左右四个格子&#xff0c;但不能进入行坐标和列坐标的数位之和大于 k 的格子。 例…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Git 3天2K星标:Datawhale 的 Happy-LLM 项目介绍(附教程)

引言 在人工智能飞速发展的今天&#xff0c;大语言模型&#xff08;Large Language Models, LLMs&#xff09;已成为技术领域的焦点。从智能写作到代码生成&#xff0c;LLM 的应用场景不断扩展&#xff0c;深刻改变了我们的工作和生活方式。然而&#xff0c;理解这些模型的内部…...