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

vue3 Element-plus修改内置样式复现代码

news 来源：原创 2025/8/16 17:51:29

笔者在修改Element-plus的内置样式时，遇到一点挫折，现提供需求场景与解决方案。

一、实现（1）透明弹窗可拖拽，且不影响点击弹窗外内容；（2）弹窗内置表格，表格需修改样式颜色，且鼠标放置在某一行时改变该行样式。

vue3中的模板：定义一个点击弹窗按钮，弹出弹窗内容；定义一个其它按钮，显示不影响点击弹窗外内容的功能。

<template><div><el-button type="primary" @click="dialogVisible = !dialogVisible">点击弹窗</el-button><el-button type="primary" @click="qita">其它</el-button><div><el-dialogv-model="dialogVisible"title="可拖拽对话框":close-on-click-modal="false":close-on-press-escape="false"draggable:modal="false"@close="handleClose":before-close="preventClose"><div><el-table :data="tableData" border style="width: 100%;text-align: center"><el-table-column prop="date" label="Date" width="180" /><el-table-column prop="name" label="Name" width="180" /><el-table-column prop="address" label="Address" /></el-table></div></el-dialog></div></div>
</template>

vue3中setup代码，主要是阻止对话框的关闭，以及对页面的穿透，实现可点击弹窗外内容的功能。

<script setup>import { onMounted, ref } from 'vue';let dialogVisible = ref(false);const preventClose = (done) => {done(false); // 阻止对话框关闭};const handleClose = () => {console.log('对话框关闭');};onMounted(() => {var box = document.querySelector(".el-overlay-dialog");// 获取.el-overlay-dialog父级var boxa = box.parentNode;// 使用pointerEvents 进行页面穿透boxa.style.pointerEvents = 'none';});let qita = () =>{alert("其它")}const tableData = ref([{date: '2016-05-03',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-02',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-04',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},{date: '2016-05-01',name: 'Tom',address: 'No. 189, Grove St, Los Angeles',},])
</script>

最重要的内置样式修改，更改弹窗样式，更改表格样式。

<style scoped lang="less">
/* 实现弹窗可拖拽、消除遮罩层 */
:deep(.el-dialog) {position: absolute;z-index: 2000 !important;pointer-events: auto !important;background: rgba(0, 0, 0, 0.2) !important;
}
:deep(.pointer){pointer-events: auto !important;
}
/* 更改弹窗样式 */
:deep(.el-dialog__title) {font-weight: 900;
}
:deep(.el-dialog__header){color: #fff;background: rgba(197, 92, 92, 0.5);text-align: center;
}
:deep(.el-dialog__body){padding: 20px;color: #fff;background: rgba(0, 0, 0, 0.5);text-align: left;
}
/* 更改表格样式 */
.el-table {--el-table-border-color: #888888;--el-table-text-color: white;--el-table-header-text-color: white;--el-table-row-hover-bg-color: transparent;--el-table-current-row-bg-color: transparent;--el-table-header-bg-color: transparent;--el-table-bg-color: transparent;--el-table-tr-bg-color: transparent;--el-table-expanded-cell-bg-color: transparent;@media (prefers-color-scheme: light) {--el-table-text-color: #ffffff;--el-table-header-text-color: #ffffff;}
}
:deep(.el-table__header-wrapper) {background: #e2a8a8;opacity: 0.7;
}
:deep(.el-table__body-wrapper) {background: #b09d9d;opacity: 0.7;
}
/* 表格内容居中 */
:deep(.el-table .cell){text-align: center;
}
/* 新增悬停高亮样式 */
:deep(.el-table__body tr:hover > td) {background: rgb(57, 116, 185) !important;cursor: pointer;
}
</style>

最后，附上运行效果图：

参考提供思路的博客：ElementUI中table里header-row-style设置背景颜色不生效解决方法_rowstyle背景颜色不生效-CSDN博客https://blog.csdn.net/weixin_46533954/article/details/119912772

el-dialog背景色、文字颜色修改以及最终实现效果_el-dialog title颜色-CSDN博客https://blog.csdn.net/weixin_70027586/article/details/128900985

二、待

待

vue3 Element-plus修改内置样式复现代码

笔者在修改Element-plus的内置样式时，遇到一点挫折，现提供需求场景与解决方案。一、实现（1）透明弹窗可拖拽，且不影响点击弹窗外内容；（2）弹窗内置表格，表格需修改样式颜色…...

编程日记 2025/8/16 17:51:29

easyui进度条

简单打开和关闭 // 展示进度条 $.messager.progress({title: 请稍候,msg: 系统处理中...,text: 0%});//关闭进度条 $.messager.progress(close); easyui 普通提示 <!DOCTYPE html> <html> <head><meta charset"UTF-8">&l…...

编程日记 2025/8/16 17:50:04

vcpkg缓存问题研究

vcpkg缓存问题研究问题描述解决方案官网给出的方案其实并不是大多数人语境中的“清除缓存”实际解决方案问题描述使用vcpkg管理c的库的时候，vcpkg会在c盘某些地方缓存下载的库，如果安装的库过多，这个缓存文件夹会过大占用磁盘空间&#x…...

编程日记 2025/8/16 17:50:02

优化WAV音频文件

优化 WAV 音频文件通常涉及减小文件体积、提升音质或适配特定用途（如流媒体、广播等）。以下是分场景的优化方法，涵盖工具和操作步骤： 一、减小文件体积（无损/有损压缩） 1. 无损压缩转换格式&#xff1…...

编程日记 2025/8/15 6:16:05

系统架构设计师：流水线技术相关知识点、记忆卡片、多同类型练习题、答案与解析

题目： 流水线技术中，若某流水线分为5段，每段执行时间为Δt，则执行100条指令的总时间为（ ） A. 100Δt B. 104Δt C. 500Δt D. 505Δt 答案：B‌ ‌解析：流水线总时间(nk-1)Δt&#…...

编程日记 2025/8/15 23:03:24

// 文件名：SslUtilsTest.java// 包路径： import static org.junit.Assert.*; import static org.mockito.Mockito.*; import java.io.InputStream; import java.security.KeyStore; import javax.net.ssl.SSLContext; import org.apache.hc.client5…...

编程日记 2025/8/15 17:38:32

【系统分析师】-软件工程

考点汇总考点详情软件生存周期：可行性分析与项目开发计划，需求分析，概要设计，详细设计，编码，测试，维护软件能力成熟度模型 CMM：初始级，可重复级，已定义级…...

编程日记 2025/8/15 22:17:40

FFmpeg 硬核指南：从底层架构到播放器全链路开发实战基础

目录 1.ffmpeg的基本组成2.播放器的API2.1 复用器阶段2.1.1 分配解复用上下文2.1.2 文件信息操作2.1.3 综合示例 2. 2 编解码部分2.2.1 分配解码器上下文2.2.2编解码操作2.2.3 综合示例 3 ffmpeg 内存模型3.1 基本概念3.2API 1.ffmpeg的基本组成模块名称功能描述主要用途AVFo…...

编程日记 2025/8/15 11:33:30

2025MathorcupD题短途运输货量预测及车辆调度问题保姆级教程讲解｜模型讲解

2025Mathorcup数学建模挑战赛（妈妈杯）D题保姆级分析完整思路代码数据教学其中更详细的思路，各题目思路、代码、讲解视频、成品论文及其他相关内容，可以点击下方群名片哦！...

编程日记 2025/8/13 5:51:27

CSS 包含块

CSS 中的包含块（Containing Block）是一个非常重要的概念，它定义了元素在布局中的参考框架。元素的尺寸、位置和偏移量通常都是基于其包含块来计算的。理解包含块的概念对于掌握 CSS 布局至关重要。 1. 包含块的作用定位元素：当…...

编程日记 2025/8/9 12:14:23

嵌入式设备网络的动态ID分配机制实现

文章目录前言一、系统设计要点二、核心数据结构2.1 设备唯一标识(DeviceUID)2.2 节点信息(Node)2.3 节点管理器(NodeManager) 三、核心算法实现3.1 初始化与清理3.1.1 初始化节点管理器3.1.2 清理节点管理器 3.2 动态ID分配策略3.2.1 查找最小可用ID3.2.2 ID使用检查 3.3 心跳…...

编程日记 2025/8/15 4:57:43

（论文阅读）RNNoise 基于递归神经网络的噪声抑制库

RNNoise 是一个基于递归神经网络的噪声抑制库。有关该算法的描述见以下论文： J.-M. Valin, A Hybrid DSP/Deep Learning Approach to Real-Time Full-Band Speech Enhancement, Proceedings of IEEE Multimedia Signal Processing (MMSP) Workshop, arXiv:1709.08…...

编程日记 2025/8/6 20:39:44

Linux：线程概念与控制

✨✨所属专栏：Linux✨✨ ✨✨作者主页：嶔某✨✨ Linux：线程概念于控制 var code “d7e241ae-ed4d-475f-aa3d-8d78f873fdca” 概念在一个程序里的一个执行路线就叫做线程thread。更准确一点：线程是“一个进程内部的控制序列” …...

编程日记 2025/8/12 4:09:08

双轮驱动能源革命：能源互联网与分布式能源赋能工厂能效跃迁

在全球能源结构深度转型与“双碳”目标的双重驱动下，工厂作为能源消耗的主力军，正站在节能变革的关键节点。能源互联网与分布式能源技术的融合发展，为工厂节能开辟了全新路径。塔能科技凭借前沿技术与创新实践，深度探索能源协同优…...

编程日记 2025/8/15 23:49:11

网络安全-Burp Suite基础篇

声明本文主要用做技术分享，所有内容仅供参考。任何使用或者依赖于本文信息所造成的法律后果均与本人无关。请读者自行判断风险，并遵循相关法律法规。 1 Burp Suite功能介绍 1.1 Burp Suite 简介 Burp Suite 是一款极为强大且广受欢迎的集成化 …...

编程日记 2025/8/13 0:47:19

从人工到智能：外呼系统如何重构企业效率新生态

在数字化转型的浪潮中，智能外呼系统正从边缘辅助工具演变为企业效率革命的核心引擎。根据Gartner最新调研数据，部署AI外呼系统的企业客服效率平均提升68%，销售线索转化率增长42%。但在这场技术驱动的变革中，真正决定成败的往往不是…...

编程日记 2025/8/14 1:25:39

折扣电影票api对接详细指南，如何对接？

以下是折扣电影票 API 对接的一般指南： 对接前准备明确需求：确定对接的目的和所需功能，如电影信息查询、场次查询、座位预订、支付等。明确支持的数据字段和业务流程。选择 API 服务提供商：选择技术成熟、服务稳定、覆盖范围广的…...

编程日记 2025/8/16 3:34:51

初识Redis · 客户端“Hello world“

目录前言： 环境配置 Hello world 前言： 前文我们已经介绍了Redis的不常见的五种数据类型，并且补充了几个渐进式命令和数据库管理命令等，最后简单认识了一下RESP协议，但是老实说，我们只能算是知道了这个…...

编程日记 2025/8/16 12:55:44

51单片机实验一：点亮led灯

目录一、实验环境与实验器材二、实验内容及实验步骤 1.用keil 软件创建工程，C文件编写程序，编译生成hex文件编辑 2.用STC烧写hex文件，点亮第一个LED灯 3.使用法2，点除第一个以外的LED灯一、实验环境与实验器材环境&am…...

编程日记 2025/8/12 22:09:37

基于WOA鲸鱼优化的NARMAX模型参数辨识算法MATLAB仿真,对比PSO优化算法

目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.本算法原理 4.1 NARMAX模型定义 4.2 鲸鱼优化算法WOA原理 4.3 粒子群优化算法PSO原理 5.完整程序 1.程序功能描述基于WOA鲸鱼优化的NARMAX模型参数辨识算法MATLAB仿真,对比PSO优化算法。分别通过WOA…...

编程日记 2025/8/13 22:20:22

AWS上构建基于自然语言的数值和符号计算系统

我想要实现一个通过使用C#、Semantic Kernel库、OpenAI GPT 4的API和以下使用C#开源库MathNet实现通过中文自然语言提示词中包含LATEX代码输入到系统，通过以下符号和数值计算和其它符号和数值计算程序输出计算结果和必要步骤的应用，这样的数学计算使用程序直接产生结果，可以…...

编程日记 2025/8/14 1:20:42

2025年03月中国电子学会青少年软件编程（Python）等级考试试卷（三级）真题

青少年软件编程（Python）等级考试试卷（三级） 分数：100 题数：38 答案解析：https://blog.csdn.net/qq_33897084/article/details/147341388 一、单选题(共25题，共50分) 1. 学校进行体…...

编程日记 2025/8/13 16:23:49

校平机：精密制造的“材料雕刻家“

在液晶面板生产线的无尘车间里，一片薄如蝉翼的玻璃基板正经历纳米级的形态修正；在新能源电池极片生产线上，铜箔以每秒5米的速度穿越精密辊系，完成微米级的平整蜕变。这些现代工业的"毫米级魔术"，都离不开一台…...

编程日记 2025/8/15 22:01:36

FPGA HR Bank如何支持ODELAY问题分析

目录 1.ODELAY简单介绍 2.IODELAY 的特性 3.IODELAY 的资源支持的管脚 4.HR bank如何支持ODELAY固定延迟 1.ODELAY简单介绍 FPGA 中的 IODELAY（Input/Output Delay），这是 Xilinx（现 AMD）FPGA 中一种用于精确控制输入/输出信号时序延迟的硬件资源。以下是关于 IODELAY…...

编程日记 2025/8/15 21:19:24

深入解析C++驱动开发实战：优化高效稳定的驱动应用

深入解析C驱动开发实战：优化高效稳定的驱动应用在现代计算机系统中，驱动程序（Driver）扮演着至关重要的角色，作为操作系统与硬件设备之间的桥梁，驱动程序负责管理和控制硬件资源，确保系统的稳定…...

编程日记 2025/8/14 8:21:33

高级java每日一道面试题-2025年4月13日-微服务篇[Nacos篇]-Nacos如何处理网络分区情况下的服务可用性问题？

如果有遗漏,评论区告诉我进行补充面试官: Nacos如何处理网络分区情况下的服务可用性问题？ 我回答: 在讨论 Nacos 如何处理网络分区情况下的服务可用性问题时，我们需要深入理解 CAP 理论以及 Nacos 在这方面的设计选择。Nacos 允许用户根据具体的应用…...

编程日记 2025/8/14 8:28:29

07_Docker 资源限制

Docker 容器做资源限制，是为了不让某个容器抢光 CPU、内存等主机资源，保证所有容器都能稳定运行，还能避免宿主机资源被耗尽，让资源利用更高效，也方便管理和满足服务的性能要求。监控容器资源使用情况 docker stats …...

编程日记 2025/8/16 5:31:38

Flutter Notes ｜我用到的一些插件整理

Flutter开发必备插件推荐与iOS上架工具分享前言一个项目的开始和结束，总会遇到很多意料之外的东西。大神和菜鸟的区别，个人感觉更多的是大神花费了很多私下时间去了解每个问题的根本是什么，而我这小菜鸟，仅仅网上浪一圈&#…...

编程日记 2025/8/11 9:48:18

WordPress自定义页面与文章：打造独特网站风格的进阶指南

文章目录引言一、理解WordPress页面与文章的区别二、主题与模板层级：自定义的基础三、自定义页面模板：打造专属页面风格四、自定义文章模板：打造个性化文章呈现五、使用自定义字段和元数据：增强内容灵活性六、利用WordPress钩子&…...

编程日记 2025/8/12 16:45:26

golang channel源码

解析数据结构 hchan：channel 数据结构 qcount：当前 channel 中存在多少个元素； dataqsize: 当前 channel 能存放的元素容量； buf：channel 中用于存放元素的环形缓冲区； elemsize：channel 元素…...

编程日记 2025/8/14 3:53:30

麒麟操作系统漏洞修复保姆级教程弱（一）算法漏洞修复

如果你想拥有你从未拥有过的东西，那么你必须去做你从未做过的事情目录一、相关问题二、建议修复方法修复方案（方案一和方案二是错误示范，干货在方案三） 方案一、首先我想按照第一步，将OpenSSH升级解决这一漏洞…...

编程日记 2025/8/15 17:38:17

汉诺塔专题：P1760 通天之汉诺塔题解 + Problem D: 汉诺塔题解

1. P1760 通天之汉诺塔题解题目背景直达通天路小A历险记第四篇题目描述在你的帮助下，小 A 成功收集到了宝贵的数据，他终于来到了传说中连接通天路的通天山。但是这距离通天路仍然有一段距离，但是小 A 突然发现他没有地图&#xff0…...

编程日记 2025/8/14 5:58:03

vscode中markdown一些插件用不了解决方式

我发现我安装了vscode的一些插件，但是没起效果（就是该插件暗淡了），后面得知，是因为没有信任工作空间。 This extension has been disabled because the current workspace is not trusted 这个提示信息表明&#xff0c…...

编程日记 2025/8/12 5:30:16

Python爬虫第16节-动态渲染页面抓取之Selenium使用上篇

目录前言一、Selenium的简介和学习准备二、Selenium基本使用三、声明浏览器对象四、访问页面五、查找节点 5.1 单个节点 5.2 多个节点六、节点交互七、动作链八、执行JavaScript 前言本专栏之前的内容，我们讲了怎么分析和抓取Ajax，…...

编程日记 2025/8/13 8:11:15

KMP算法动态演示

KMP算法 1.动态演示 https://tsccg-oss.oss-cn-guangzhou.aliyuncs.com/image/KMP%E7%AE%97%E6%B3%95%E5%8A%A8%E6%80%81%E6%BC%94%E7%A4%BA.gif 2.代码实现 Testpublic void test5(){String parent "ABC ABCDAB ABCDABCDABDE";String child "ABCDABD&quo…...

编程日记 2025/8/12 12:14:28

linux获取cpu使用率（sy%+us%）

float getCpuUsage() { // C11兼容的元组解包 typedef std::tuple<unsigned long long, unsigned long long, unsigned long long> CpuTuple; auto parseCpuLine [](const std::string& line) -> CpuTuple { std::istringstream iss(line); …...

编程日记 2025/8/10 22:11:44

ESP-IDF教程2 GPIO - 输入、输出和中断

文章目录 1、前提1.1、基础知识1.1.1、GPIO 分类1.1.2、FALSH SPI 模式1.1.3、过滤器1.1.4、外部中断 1.2、数据结构1.2.1、GPIO1.2.2、毛刺过滤器 1.3、硬件原理图 2、示例程序2.1、GPIO 输出 - 点亮 LED 灯2.2、GPIO 输入 - 按键响应2.3、GPIO 外部中断 - 按键响应 3、常用函…...

编程日记 2025/8/14 18:09:43

Ubuntu安装MySQL步骤及注意事项

一、安装前准备 1. 系统更新：在安装 MySQL 之前，确保你的 Ubuntu 系统软件包是最新的，这能避免因软件包版本问题导致的安装错误，并获取最新的安全补丁。打开终端，执行以下两条命令： sudo apt update sudo …...

编程日记 2025/8/14 1:36:05

支持mingw g++14.2 的c++23 功能print的vscode tasks.json生成调试

在mingw14.2版本中, print库的功能默认没有开启, 生成可执行文件的tasks.json里要显式加-lstdcexp, 注意放置顺序. tasks.json (支持mingw g14.2 c23的print ) {"version": "2.0.0","tasks": [{"type": "cppbuild","…...

编程日记 2025/8/16 6:33:56

WPF常用技巧汇总

主要用于记录工作中发现的一些问题和常见的解决方法。此文会持续更新。 >abp new Evan.MyWpfApp -t wpf --old --framework .net8 1. 解决不同屏幕分辨率下的锯齿问题 UseLayoutRounding"True" <Grid UseLayoutRounding"True"><Border Mar…...

编程日记 2025/8/12 7:59:14

【文件操作与IO】详细解析文件操作与IO (一)

本篇博客给大家带来的是文件操作的知识点. 🐎文章专栏: JavaEE初阶 🚀若有问题评论区见 ❤ 欢迎大家点赞评论收藏分享如果你不知道分享给谁,那就分享给薯条. 你们的支持是我不断创作的动力 . 王子,公主请阅🚀 要开心要快乐顺便进步一. …...

编程日记 2025/8/15 1:25:16

yaffs_write_new_chunk()函数解析

yaffs_write_new_chunk() 是 YAFFS（Yet Another Flash File System）文件系统中用于将数据写入新物理块（chunk）的关键函数。以下是其详细解析： 函数原型 int yaffs_write_new_chunk(struct yaffs_dev *dev, const u8 *…...

编程日记 2025/8/12 5:13:59

「数据可视化 D3系列」入门第九章：交互式操作详解

交互式操作详解一、交互式操作的核心概念二、当前柱状图的交互实现三、交互效果的增强建议四、为饼图做准备五、交互式柱状图代码示例小结核心要点下章预告：将这些交互技术应用于饼图实现在上一章的柱状图基础上，我们增加了交互功能，让图表…...

编程日记 2025/8/12 4:03:59

吃透LangChain(五)：多模态输入与自定义输出

多模态数据输入这里我们演示如何将多模态输入直接传递给模型。我们目前期望所有输入都以与OpenAl 期望的格式相同的格式传递。对于支持多模态输入的其他模型提供者，我们在类中添加了逻辑以转换为预期格式。在这个例子中，我们将要求模型描述一幅图像。 …...

编程日记 2025/8/12 2:36:49

数据结构基本概念

1 数据结构概述数据结构是计算机组织（逻辑结构）、存储（物理结构）数据的方式。和具体的计算机编程语言无关，可以使用任何编程语言来实现数据结构 1.1 数据逻辑结构反映数据元素之间的逻辑关系，逻辑关系…...

编程日记 2025/8/15 17:54:43

flutter app实现分辨率自适应的图片资源加载

在 Flutter 中，为了实现分辨率自适应的图片资源加载，确实需要遵循特定的目录结构和命名规则。这种机制允许 AssetImage 根据设备的设备像素比（Device Pixel Ratio, DPR） 自动选择最合适的图片资源。以下是详细的说明和实现步骤&a…...

编程日记 2025/8/11 23:45:35

Webpack基础

目录一、Webpack概念二、Webpack使用步骤三、Webpack.config.js配置文件四、entry 和 output 1. entry 2. output 五、module 1. CSS 2. 图片 3. babel 4. 总结六、plugins 1.自动生成 html 文件七、其它 1.webpack-dev-server 开发服务器 2. mode 打包模…...

编程日记 2025/8/15 9:12:34

极狐GitLab 用户 API 速率限制如何设置？

极狐GitLab 是 GitLab 在中国的发行版，关于中文参考文档和资料有： 极狐GitLab 中文文档极狐GitLab 中文论坛极狐GitLab 官网用户 API 速率限制 (BASIC SELF) 您可以为对 Users API 的请求配置每个用户的速率限制。要更改速率限制： 1.在…...

编程日记 2025/8/16 6:01:22

用 Go 实现一个轻量级并发任务调度器（支持限速）

前言在日常开发中，我们经常会遇到这样的场景： • 有一堆任务要跑（比如：发请求、处理数据、爬虫等）• 不希望一次性全部跑完，担心打爆服务端或者被封• 想要设置并发数、限速，还能控制任务重试…...

编程日记 2025/8/13 9:40:16

华为OD机试真题——最长的顺子（2025A卷：100分）Java/python/JavaScript/C++/C语言/GO六种最佳实现

2025 A卷 100分题型本文涵盖详细的问题分析、解题思路、代码实现、代码详解、测试用例以及综合分析； 并提供Java、python、JavaScript、C、C语言、GO六种语言的最佳实现方式！ 本文收录于专栏：《2025华为OD真题目录全流程解析/备考攻略/经验…...

编程日记 2025/8/14 12:26:35

相关文章：