el-table样式

1、实现效果,外部框是蓝绿色边框,深色背景,里面的表格首先设置透明色,然后应用自定义斑马纹。
在这里插入图片描述
2、代码
template代码,其中样式frameBordStyle是深色背景框,不负责表格样式,表格样式由tableStyle负责

<div class="frameBordStyle tableStyle">
				<el-table :data="tableData" :row-class-name="tableRowClassName" height="48vh" style="width: 100%">
					<el-table-column prop="name" label="名称" width="90">
					</el-table-column>
					<el-table-column prop="action" label="操作动作" width="90">
					</el-table-column>
					<el-table-column prop="date" label="操作时间">
					</el-table-column>
				</el-table>
			</div>

在methods里写下行样式函数,奇数行与偶数行运用不同样式

tableRowClassName({
				row,
				rowIndex
			}) {
				if (rowIndex % 2 == 1) {
					return 'deep_row'
				} else {
					return 'light_row'
				}
			},

style里面样式

.tableStyle {
		padding: 0px 5px;

		//底色透明
		::v-deep .el-table {
			background-color: transparent !important;
		}

		//表格标题样式
		::v-deep .el-table th.el-table__cell {
			background-color: rgba(8, 26, 34, 0.92) !important;
			color: #BEFFFE;
			font-weight: 400;
			font-size: 13px;
		}

		//表格内容字样式
		::v-deep .el-table td.el-table__cell div {
			font-size: 12px;
			color: #DBFFFF;
			opacity: 0.8;
		}

		//表格行底部白线设为透明
		::v-deep .el-table th.el-table__cell.is-leaf,
		::v-deep .el-table td.el-table__cell {
			border-bottom: 1px solid transparent !important;
		}

		//表格底部白线去掉
		.el-table::before {
			height: 0px;
		}

		//表格行鼠标悬浮样式
		::v-deep .el-table {
			tbody tr {
				&:hover {
					td {
						background-color: rgba($color: #81D3F8, $alpha: 0.5) !important;
					}
				}
			}
		}

		//斑马纹深色样式
		::v-deep .deep_row {
			background-color: transparent !important;
		}

		//斑马纹浅色样式
		::v-deep .light_row {
			background: rgba(202, 240, 245, 0.2) !important;
		}

	}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/115932.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

OSG多视口创建:osgViewer::CompositeViewer

1、效果 在osg的实际应用场景中&#xff0c;有时候需要同时创建多个场景视图&#xff0c;并保证各个场景视图中有不一样的显示和操作&#xff1a;例如&#xff1a;漫游器、照相机、粒子效果、多个模型组合等。此时就要用到OSG提供的osgViewer::CompositeViewer类来实现这个需求…

零信任网络:一种全新的网络安全架构

随着网络技术的不断发展&#xff0c;网络安全问题日益凸显。传统的网络安全策略往往基于信任和验证&#xff0c;但这种信任策略存在一定的局限性。为了解决这一问题&#xff0c;零信任网络作为一种全新的网络安全架构&#xff0c;逐渐受到人们的关注。本文将对零信任网络的概念…

推荐PHP付费进群源码

PHP付费进群源码带自动定位基于ThinkPHP框架开发的&#xff0c;可以快速搭建知识付费粉丝进群。 更新&#xff1a; 1.首页付款轮播 2.城市定位功能 3.更新及优化域名库及支付设置 4.新增一张图模板设置模式&#xff0c;简化后台模板设置 5.前后台其他优化 演示地址&#xff1a…

centos7部署nginx

CentOS7安装Nginx-1.16.1稳定版 小白教程&#xff0c;一看就会&#xff0c;一做就成。 1.安装依赖环境 yum -y install gcc gcc-c automake pcre pcre-devel zlib zlib-devel openssl openssl-devel 2.下载安装包&#xff08;不能联网的不行&#xff09;&#xff0c;可以留言…

电路正负反馈,电压电流反馈,串并联反馈详细判别方法

正/负反馈&#xff1a;假设输出升高&#xff0c;转一圈回来仍使其升高就是正反馈&#xff0c;反之就是负反馈。作图法&#xff1a;在RL的信号端画一个向上的小箭头&#xff0c;沿着反馈环路&#xff0c;每经过一个元器件就画一个相应的箭头&#xff0c;一直画到放大器的输出端&…

计算机组成与结构-安全性和可靠性

系统可靠性分析 概念 平均无故障时间 MTTF 1/失效率 平均故障修复时间 MTTR1/修复率 平均故障间隔时间 MTBFMTTFMTTR 系统可用性 MTTF/(MTTFMTTR)*100% 计算 串联系统 一个设备不可靠&#xff0c;整个系统崩溃RR1R2Rn 并联系统 所有设备不可靠&#xff0c;整个系统崩溃R1-(1…

基于单片机的商场防盗防火系统设计

收藏和点赞&#xff0c;您的关注是我创作的动力 文章目录 概要 一、系统分析二、系统总设计2.1基于单片机的商场防火防盗系统的总体功能2.2系统的组成 三 软件设计4.1软件设计思路4.2软件的实现4.2.1主控模块实物 四、 结论五、 文章目录 概要 本课题设计一种商场防火防盗报警…

Quartus II 13.0波形仿真(解决无法产生仿真波形问题)

目录 前言 新建工程 创建Verilog文件&#xff0c;写代码 波形仿真&#xff08;解决没有输出波问题&#xff09; 前言 这么说把Quartus II 13.0是我目前来讲见过最恶心的软件&#xff0c;总是一大堆麻烦事&#xff0c;稍微哪里没弄好就后面全都出问题。很多人在写完Verilog代…

【PWN · heap | Overlap | off-by-one】HITCON Trainging lab13

记录一道wiki学习overlap的题目 前言 通过overlap可以造成堆的重叠&#xff0c;进而通过堆的修改、访问等操作&#xff0c;劫持或泄露另一个堆的信息&#xff0c;如果堆上存在指针&#xff0c;而存在对指针的读写&#xff0c;就可以控制修改该指针&#xff0c;进行任意地址读/…

【每日一题】移除链表元素(C语言)

移除链表元素&#xff0c;链接奉上 目录 思路&#xff1a;代码实现&#xff1a;链表题目小技巧&#xff1a; 思路&#xff1a; 在正常情况&#xff1a; 下我们移除链表元素时&#xff0c;需要该位置的前结点与后节点&#xff0c; 在特别情况时&#xff1a; 例如 我们发现&…

基于STC12C5A60S2系列1T 8051单片机EEPROM应用

基于STC12C5A60S2系列1T 8051单片机EEPROM应用 STC12C5A60S2系列1T 8051单片机管脚图STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式及配置STC12C5A60S2系列1T 8051单片机I/O口各种不同工作模式介绍STC12C5A60S2系列1T 8051单片机EEPROM介绍基于STC12C5A60S2系列1T 8051单…

Proxysql读写分离

Proxysql读写分离 主从配置 # /etc/my.cnf 主节点 [mysqld] log-binmysql-bin server-id1从节点 [mysqld] server-id2 read_only1#初始化以及创建主从复制用户 mysql> alter user rootlocalhost identified with mysql_native_password by Jianren123; Query OK, 0 rows …

交叉编译工具链(以STM32MP1为例)

1.什么是交叉编译工具链&#xff1f; 在一个系统上进行编译&#xff0c;在另一个系统上进行执行 2.STM32MP1交叉编译工具链 3.交叉编译器内容 4.两种工具链模式 5.两种链接模式 6.工具使用 注意&#xff1a;OpenSTLinux已经提供了编译框架&#xff0c;不需要命令行手工编译 …

界面控件DevExpress WPF Gauge组件 - 轻松实现个性化商业仪表盘

DevExpress WPF Gauge&#xff08;仪表&#xff09;控件包含了多种圆形仪表类型、水平和垂直线性仪表、分段和矩阵数字仪表以及状态指示器&#xff0c;同时还具有最终用户交互性的集成支持。 P.S&#xff1a;DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至…

Android Studio的Java项目种运行main()的方法

首先随便在项目里面建一个类 public class TestSocket {public static void main(String[] args) {System.out.println("hahah");}}直接运行时会直接报错的 在项目的 .idea 添加代码 <option name"delegatedBuild" value"false"/> 再…

SpringBoot框架使用AOP + 自定义注解实现请求日志记录

一、SpringBoot记录日志 文章目录 一、SpringBoot记录日志1.1、环境搭建1.2、配置FastJson1.3、自定义LogRecord注解1.4、定义日志实体类1.5、创建HttpRequestUtil工具类1.6、定义AOP切面1.7、编写测试类1.8、运行测试 1.1、环境搭建 搭建SpringBoot工程。引入【spring-boot-st…

python-列表推导式、生成器表达式

一、列表推导式 列表推导式&#xff1a;用一句话来生成列表 语法&#xff1a;[结果 for循环 判断] 筛选模式&#xff1a; 二、生成器表达式

百度智能云千帆大模型平台黑客马拉松报名开启!

比赛简介 创造是生成式 AI 的核心。无论是智能导购带来的线上购物体验升级&#xff0c;还是主图生成带来的素材生产效率提升&#xff0c;又或是游戏场景的快速设置、智能 NPC 的全新交互、数字广告的精准推荐和个性化定制&#xff0c;亦或者是为学生提供更符合真实的口语练习环…

适用于 Linux 的 WPF:Avalonia

许多年前&#xff0c;在 WPF 成为“Windows Presentation Foundation”并将 XAML 作为 .NET、Windows 等的 UI 标记语言引入之前&#xff0c;有一个代号为“Avalon”的项目。Avalon 是 WPF 的代号。XAML 现在无处不在&#xff0c;XAML 标准是一个词汇规范。 Avalonia 是一个开…

一文弄懂synchronized

简述 synchronized是什么? synchronized 关键字是一种同步锁&#xff0c;它可以保证在一个时刻只有一个线程可以执行某段代码。synchronized 关键字可以用在方法、代码块、静态方法和静态代码块上。 synchronized怎么用&#xff1f; synchronized是Java中用于实现线程同步…