ElementPlus表格中的背景透明
ElementPlus表格中的背景透明
最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体。可以参考的资料非常少,大部分都是ElmentUI的方法,在某个前端开发群里问了一下解决方案,大佬给出的解决方案直接让我拍案叫绝,记录一下,以后翻起来更容易
直接上代码:
<template><el-table :data="tableData" height="300" :row-style="rowstyle"><el-table-column v-for="(item, index) in tableForm" :key="index" :prop="item.prop" :label="item.label"show-overflow-tooltip></el-table-column></el-table>
</template><script setup>
import { ref, onMounted, toRefs } from 'vue'
// import { getHighwayTrafficApi } from '@/apis/predictTraffic'const tableForm = [{ prop: 'road_name', label: '路名', width: 20 },{ prop: 'section_desc', label: '堵点', width: 40 },{ prop: 'speed', label: '速度', width: 20 },{ prop: 'status', label: '状态', width: 20 },{ prop: 'congestion_distance', label: '长度', width: 20 },{ prop: 'congestion_trend', label: '趋势', width: 20 },]const props = defineProps({tableData: Array
})const rowstyle = ({ row, rowIndex }) => {if (rowIndex % 2 === 0) {return {backgroundColor: 'rgba(3, 76, 106, 1)',}}
}</script><style lang="scss" scoped>
.el-table {--el-table-border-color: transparent;--el-table-border: none;--el-table-text-color: #bdbdbe;--el-table-header-text-color: #bdbdbe;--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;
}
</style>
效果如下:

相关文章:
ElementPlus表格中的背景透明
ElementPlus表格中的背景透明 最近写大屏,用到elementplus中的el-table,为了让显示效果好看一点,需要把表格的白色背景调整为透明,与整个背景融为一体。可以参考的资料非常少,大部分都是ElmentUI的方法,在…...
【会议征稿通知】2024第四届神经网络、信息与通信工程国际学术会议(NNICE 2024)
2024第四届神经网络、信息与通信工程国际学术会议(NNICE 2024) 2024 4th International Conference on Neural Networks, Information and Communication Engineering 2024第四神经网络、信息与通信工程国际学术会议(NNICE 2024࿰…...
PyCharm改变代码背景图片的使用教程
一个好的集成环境是学习和使用一门编程语言的重中之重,这次我给大家分享如何改变PyCharm软件的代码背景图片。 说明:本教程使用的是汉化版PyCharm软件。 打开PyCharm软件。 点击软件最上方导航栏的文件,然后找到设置。 打开设置然后点击外观…...
BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain
BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain----《BadNets:识别机器学习模型供应链中的漏洞》 背景: 许多用户将训练过程外包给云计算,或者依赖于经过训练的模型,然后根据特定的任务对模型进行微调。这…...
Kubernetes速成课程:掌握容器编排的精髓
微服务演进方向 • 面向分布式设计(Distribution):容器、微服务、API 驱动的开发; • 面向配置设计(Configuration):⼀个镜像,多个环境配置; • 面向韧性设计(Resistancy):故障容忍和自愈; • 面向弹性设计(Elasticity):弹性扩展和对环境变化(负载)做出响应; •…...
【数据库】分组数据 GROUP BY、HAVING
分组数据 创建分组过滤分组SQL 子句顺序 创建分组 s q l sql sql 中,使用 GROUP BY 子句对数据进行分组。分组通常与聚合函数一起使用,以对每个组内的数据执行聚合操作; e . g . e.g. e.g. 按照客户分组,计算每个客户的订单总金额…...
“唯品会VIP商品API:一键获取奢侈品详情,尊享品质生活!“
要获取唯品会VIP商品的详细信息,您可以通过唯品会的API接口进行调用。 唯品会提供了多种商品选择,包括服装、美容护肤、鞋子、箱包、家居、母婴等等。在这些商品中,VIP奢侈品专区是唯品会的重要特色之一。 要获取VIP商品的详细信息…...
uniapp解决iOS切换语言——原生导航栏buttons文字不生效
uniapp 切换语言原生导航栏buttons文字不生效? 文章目录 uniapp 切换语言原生导航栏buttons文字不生效?效果图page.json配置解决方式 效果图 场景:在 tabbar 页面中,配置 原生导航栏 buttons ,切换语言时,不…...
idea 基础设置
1、设置 IDEA 主题 2、自动导包和优化多余的包 3、同一个包下的类,超过指定个数的时候,导包合并为* 4、显示行号 , 方法和方法间的分隔符: 5、忽略大小写,进行提示 6、多个类不隐藏,多行显示 7、设置默认的…...
Rockchip Uboot CmdLine 作用 来源 常用参数
Rockchip Uboot CmdLine cmdline 是 U-Boot 向 kernel 传递参数的一个重要手段,诸如传递启动存储,设备状态等。cmdline 参数有多个来源,由 U-Boot 进行拼接、过滤重复数据之后再传给 kernel。U-Boot 阶段的 cmdline 被保存在 bootargs 环境变…...
MySQL表导出
# 导出表和数据 mysqldump --skip-extended-insert -hHost -uUser -pPassword -PPost database table > table.sql# 如: mysqldump --skip-extended-insert -h172.1.0.1 -uroot -pabc123 -P3306 data_support city_code > city_code.sql# 导入表和数据 mysql …...
HTML页面获取URL传递的参数值
如: // 查询url上链接的参数与参数值 function getQueryString(name) {var url window.location.search; // 获取URLvar pattern new RegExp("[\?\&]" name "([^\&])", "i"); // 正则匹配URLvar matcher pattern.exec(…...
mac安装jenkins
1、安装jenkins之前确认是否安装了homebrew 2、开始安装jenkins 安装完如下图则安装完成 3、改一下ip和端口 4、启动jenkins brew services restart jenkins 使用自己修改后的ip:port http://0.0.0.0:8088 根据提示信息,拿到管理员密码,并解锁 5、安装…...
asp.net网球馆计费管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio
一、源码特点 asp.net网球馆计费管理系统是一套完善的web设计管理系统,系统具有完整的源代码和数据库,系统主要采用B/S模式开发。开发环境为vs2010,数据库为sqlserver2008,使用c#语 言开发 aspnet网球馆计费管理系统1 二、…...
动手学深度学习——第五次学
权重衰减是最广泛使用的正则化的技术之一 今天学的很头疼,好多都是公式 12权重衰退(解决过拟合) 13丢弃法(解决过拟合) 14数值稳定(梯度爆炸和梯度消失问题) 15竞赛题讲解 层和块 多层感知机…...
python实验16_网络爬虫
实验16:网络爬虫 1.实验目标及要求 (1)掌握简单爬虫方法。 2. 实验主要内容 爬取中国票房网 ① 爬取中国票房网(www.cbooo.cn)2019年票房排行榜前20名的电影相关数据 代码部分: import time from selenium.webdriver impor…...
家长扫码查成绩
亲爱的老师,你是否曾为了如何让家长更方便地查询学生的成绩而烦恼?现在,我们为你介绍一款简单易用的成绩查询系统,让家长只需轻轻一扫,即可查看孩子的成绩。 一、什么是成绩查询系统? 成绩查询系统是一款专…...
【转】多台服务器共享session问题
多台服务器共享 session 问题 现在的大型网站中,如何实现多台服务器中的 session 数据共享呢? 当使用多台服务器架设成集群之后,我们通过负载均衡的方式,同一个用户(或者 ip)访问时被分配到不同的服务器上…...
页面置换算法的模拟实现及命中率对比
页面置换算法是用于管理计算机内存中页面(或页面框)的一种策略。常见的页面置换算法包括FIFO(先进先出)、LRU(最近最少使用)、LFU(最少使用)等。以下是一个简单的页面置换算法模拟实…...
说一说ajax的请求过程?
AJAX(Asynchronous JavaScript and XML)是一种通过在后台与服务器进行异步通信的技术,用于实现页面的局部更新和动态加载数据。下面是 AJAX 请求的一般过程: 1:创建 XMLHttpRequest 对象:在 JavaScript 中…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...
SkyWalking 10.2.0 SWCK 配置过程
SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外,K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案,全安装在K8S群集中。 具体可参…...
C++初阶-list的底层
目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
c#开发AI模型对话
AI模型 前面已经介绍了一般AI模型本地部署,直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型,但是目前国内可能使用不多,至少实践例子很少看见。开发训练模型就不介绍了&am…...
什么?连接服务器也能可视化显示界面?:基于X11 Forwarding + CentOS + MobaXterm实战指南
文章目录 什么是X11?环境准备实战步骤1️⃣ 服务器端配置(CentOS)2️⃣ 客户端配置(MobaXterm)3️⃣ 验证X11 Forwarding4️⃣ 运行自定义GUI程序(Python示例)5️⃣ 成功效果
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
