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

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>

效果如下:

image-20231020163102449

相关文章:

ElementPlus表格中的背景透明

ElementPlus表格中的背景透明 最近写大屏&#xff0c;用到elementplus中的el-table&#xff0c;为了让显示效果好看一点&#xff0c;需要把表格的白色背景调整为透明&#xff0c;与整个背景融为一体。可以参考的资料非常少&#xff0c;大部分都是ElmentUI的方法&#xff0c;在…...

【会议征稿通知】2024第四届神经网络、信息与通信工程国际学术会议(NNICE 2024)

2024第四届神经网络、信息与通信工程国际学术会议&#xff08;NNICE 2024&#xff09; 2024 4th International Conference on Neural Networks, Information and Communication Engineering 2024第四神经网络、信息与通信工程国际学术会议&#xff08;NNICE 2024&#xff0…...

PyCharm改变代码背景图片的使用教程

一个好的集成环境是学习和使用一门编程语言的重中之重&#xff0c;这次我给大家分享如何改变PyCharm软件的代码背景图片。 说明&#xff1a;本教程使用的是汉化版PyCharm软件。 打开PyCharm软件。 点击软件最上方导航栏的文件&#xff0c;然后找到设置。 打开设置然后点击外观…...

BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain

BadNets: Identifying Vulnerabilities in the Machine Learning Model Supply Chain----《BadNets:识别机器学习模型供应链中的漏洞》 背景&#xff1a; 许多用户将训练过程外包给云计算&#xff0c;或者依赖于经过训练的模型&#xff0c;然后根据特定的任务对模型进行微调。这…...

Kubernetes速成课程:掌握容器编排的精髓

微服务演进方向 • 面向分布式设计(Distribution):容器、微服务、API 驱动的开发; • 面向配置设计(Configuration):⼀个镜像&#xff0c;多个环境配置; • 面向韧性设计(Resistancy):故障容忍和自愈; • 面向弹性设计(Elasticity):弹性扩展和对环境变化(负载)做出响应; •…...

【数据库】分组数据 GROUP BY、HAVING

分组数据 创建分组过滤分组SQL 子句顺序 创建分组 s q l sql sql 中&#xff0c;使用 GROUP BY 子句对数据进行分组。分组通常与聚合函数一起使用&#xff0c;以对每个组内的数据执行聚合操作&#xff1b; e . g . e.g. e.g. 按照客户分组&#xff0c;计算每个客户的订单总金额…...

“唯品会VIP商品API:一键获取奢侈品详情,尊享品质生活!“

要获取唯品会VIP商品的详细信息&#xff0c;您可以通过唯品会的API接口进行调用。 唯品会提供了多种商品选择&#xff0c;包括服装、美容护肤、鞋子、箱包、家居、母婴等等。在这些商品中&#xff0c;VIP奢侈品专区是唯品会的重要特色之一。 要获取VIP商品的详细信息&#xf…...

uniapp解决iOS切换语言——原生导航栏buttons文字不生效

uniapp 切换语言原生导航栏buttons文字不生效&#xff1f; 文章目录 uniapp 切换语言原生导航栏buttons文字不生效&#xff1f;效果图page.json配置解决方式 效果图 场景&#xff1a;在 tabbar 页面中&#xff0c;配置 原生导航栏 buttons &#xff0c;切换语言时&#xff0c;不…...

idea 基础设置

1、设置 IDEA 主题 2、自动导包和优化多余的包 3、同一个包下的类&#xff0c;超过指定个数的时候&#xff0c;导包合并为* 4、显示行号 &#xff0c; 方法和方法间的分隔符&#xff1a; 5、忽略大小写&#xff0c;进行提示 6、多个类不隐藏&#xff0c;多行显示 7、设置默认的…...

Rockchip Uboot CmdLine 作用 来源 常用参数

Rockchip Uboot CmdLine cmdline 是 U-Boot 向 kernel 传递参数的一个重要手段&#xff0c;诸如传递启动存储&#xff0c;设备状态等。cmdline 参数有多个来源&#xff0c;由 U-Boot 进行拼接、过滤重复数据之后再传给 kernel。U-Boot 阶段的 cmdline 被保存在 bootargs 环境变…...

MySQL表导出

# 导出表和数据 mysqldump --skip-extended-insert -hHost -uUser -pPassword -PPost database table > table.sql# 如&#xff1a; mysqldump --skip-extended-insert -h172.1.0.1 -uroot -pabc123 -P3306 data_support city_code > city_code.sql# 导入表和数据 mysql …...

HTML页面获取URL传递的参数值

如&#xff1a; // 查询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 根据提示信息&#xff0c;拿到管理员密码&#xff0c;并解锁 5、安装…...

asp.net网球馆计费管理系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

一、源码特点 asp.net网球馆计费管理系统是一套完善的web设计管理系统&#xff0c;系统具有完整的源代码和数据库&#xff0c;系统主要采用B/S模式开发。开发环境为vs2010&#xff0c;数据库为sqlserver2008&#xff0c;使用c#语 言开发 aspnet网球馆计费管理系统1 二、…...

动手学深度学习——第五次学

权重衰减是最广泛使用的正则化的技术之一 今天学的很头疼&#xff0c;好多都是公式 12权重衰退&#xff08;解决过拟合&#xff09; 13丢弃法&#xff08;解决过拟合&#xff09; 14数值稳定&#xff08;梯度爆炸和梯度消失问题&#xff09; 15竞赛题讲解 层和块 多层感知机…...

python实验16_网络爬虫

实验16&#xff1a;网络爬虫 1.实验目标及要求 &#xff08;1&#xff09;掌握简单爬虫方法。 2. 实验主要内容 爬取中国票房网 ① 爬取中国票房网&#xff08;www.cbooo.cn)2019年票房排行榜前20名的电影相关数据 代码部分: import time from selenium.webdriver impor…...

家长扫码查成绩

亲爱的老师&#xff0c;你是否曾为了如何让家长更方便地查询学生的成绩而烦恼&#xff1f;现在&#xff0c;我们为你介绍一款简单易用的成绩查询系统&#xff0c;让家长只需轻轻一扫&#xff0c;即可查看孩子的成绩。 一、什么是成绩查询系统&#xff1f; 成绩查询系统是一款专…...

【转】多台服务器共享session问题

多台服务器共享 session 问题 现在的大型网站中&#xff0c;如何实现多台服务器中的 session 数据共享呢&#xff1f; 当使用多台服务器架设成集群之后&#xff0c;我们通过负载均衡的方式&#xff0c;同一个用户&#xff08;或者 ip&#xff09;访问时被分配到不同的服务器上…...

页面置换算法的模拟实现及命中率对比

页面置换算法是用于管理计算机内存中页面&#xff08;或页面框&#xff09;的一种策略。常见的页面置换算法包括FIFO&#xff08;先进先出&#xff09;、LRU&#xff08;最近最少使用&#xff09;、LFU&#xff08;最少使用&#xff09;等。以下是一个简单的页面置换算法模拟实…...

说一说ajax的请求过程?

AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种通过在后台与服务器进行异步通信的技术&#xff0c;用于实现页面的局部更新和动态加载数据。下面是 AJAX 请求的一般过程&#xff1a; 1&#xff1a;创建 XMLHttpRequest 对象&#xff1a;在 JavaScript 中…...

wordpress后台更新后 前端没变化的解决方法

使用siteground主机的wordpress网站&#xff0c;会出现更新了网站内容和修改了php模板文件、js文件、css文件、图片文件后&#xff0c;网站没有变化的情况。 不熟悉siteground主机的新手&#xff0c;遇到这个问题&#xff0c;就很抓狂&#xff0c;明明是哪都没操作错误&#x…...

生成xcframework

打包 XCFramework 的方法 XCFramework 是苹果推出的一种多平台二进制分发格式&#xff0c;可以包含多个架构和平台的代码。打包 XCFramework 通常用于分发库或框架。 使用 Xcode 命令行工具打包 通过 xcodebuild 命令可以打包 XCFramework。确保项目已经配置好需要支持的平台…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

Xshell远程连接Kali(默认 | 私钥)Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

iPhone密码忘记了办?iPhoneUnlocker,iPhone解锁工具Aiseesoft iPhone Unlocker 高级注册版​分享

平时用 iPhone 的时候&#xff0c;难免会碰到解锁的麻烦事。比如密码忘了、人脸识别 / 指纹识别突然不灵&#xff0c;或者买了二手 iPhone 却被原来的 iCloud 账号锁住&#xff0c;这时候就需要靠谱的解锁工具来帮忙了。Aiseesoft iPhone Unlocker 就是专门解决这些问题的软件&…...

Opencv中的addweighted函数

一.addweighted函数作用 addweighted&#xff08;&#xff09;是OpenCV库中用于图像处理的函数&#xff0c;主要功能是将两个输入图像&#xff08;尺寸和类型相同&#xff09;按照指定的权重进行加权叠加&#xff08;图像融合&#xff09;&#xff0c;并添加一个标量值&#x…...

稳定币的深度剖析与展望

一、引言 在当今数字化浪潮席卷全球的时代&#xff0c;加密货币作为一种新兴的金融现象&#xff0c;正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而&#xff0c;加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下&#xff0c;稳定…...

ABAP设计模式之---“简单设计原则(Simple Design)”

“Simple Design”&#xff08;简单设计&#xff09;是软件开发中的一个重要理念&#xff0c;倡导以最简单的方式实现软件功能&#xff0c;以确保代码清晰易懂、易维护&#xff0c;并在项目需求变化时能够快速适应。 其核心目标是避免复杂和过度设计&#xff0c;遵循“让事情保…...

Linux 中如何提取压缩文件 ?

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

十九、【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建

【用户管理与权限 - 篇一】后端基础:用户列表与角色模型的初步构建 前言准备工作第一部分:回顾 Django 内置的 `User` 模型第二部分:设计并创建 `Role` 和 `UserProfile` 模型第三部分:创建 Serializers第四部分:创建 ViewSets第五部分:注册 API 路由第六部分:后端初步测…...