el-table样式

news2025/7/20 10:55:51

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;
		}

	}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

RCurl库做爬虫效率怎么样

RCurl库是一个非常强大的网络爬虫工具&#xff0c;它提供了许多功能&#xff0c;例如从服务器下载文件、保持连接、上传文件、采用二进制格式读取、句柄重定向、密码认证等等。使用RCurl库进行网络爬虫可以方便地获取网站上的数据&#xff0c;并进行数据分析和挖掘。在使用RCur…

2023-10-30 LeetCode每日一题(H 指数 II)

2023-10-30每日一题 一、题目编号 275. H 指数 II二、题目链接 点击跳转到题目位置 三、题目描述 给你一个整数数组 citations &#xff0c;其中 citations[i] 表示研究者的第 i 篇论文被引用的次数&#xff0c;citations 已经按照 升序排列 。计算并返回该研究者的 h 指数…

LiveNVR监控流媒体Onvif/RTSP常见问题-概览负载信息具体表示什么实时展示取流中、播放中、录像中等使用数目说明

LiveNVR常见问题-概览负载信息具体表示什么实时展示取流中、播放中、录像中等使用数目说明 1、 Onvif/RTSP等直播流拉转服务2、负载信息2、负载信息说明 1、 Onvif/RTSP等直播流拉转服务 可接入传统监控行业里面的高清网络摄像机的RTSP直播流&#xff0c;及 RTMP、HTTP-FLV、M3…

全新彩虹知识付费商城源码-知识付费小程序V3.4/支持二级分类+多级分销(免授权)

源码简介&#xff1a; 全新彩虹知识付费商城源码&#xff0c;作为知识付费小程序V3.4&#xff0c;它支持二级分类&#xff0c;而且有多级分销&#xff0c;秒杀&#xff0c;砍价&#xff0c;团购的功能。它是免授权的。 彩虹知识付费商城初创体验版是一款功能丰富的电商平台&a…

uni-app项目 前端加前缀(包括页面及静态资源)

具体步骤 参考&#xff1a; https://www.jianshu.com/p/f1fe5daa3a3c manifest.json 文件## 位置如下&#xff1a; "h5" : {"title" : "物业公告","router" : {"mode" : "history", //采用history模式URL的路…

Go Metrics SDK Tag 校验性能优化实践

背景 Metrics SDK 是与字节内场时序数据库 ByteTSD 配套的用户指标打点 SDK&#xff0c;在字节内数十万服务中集成&#xff0c;应用广泛&#xff0c;因此 SDK 的性能优化是个重要和持续性的话题。本文主要以 Go Metrics SDK 为例&#xff0c;讲述对打点 API 的 hot-path 优化的…

VCR库编写爬虫程序

VCR库编写一个爬虫程序来爬取图片&#xff0c;代码如下所示&#xff1a; require vcr require open-uri ​ # 使用VCR库录制一次HTTP请求 VCR.use_cassette(vip_crawler) do# 设置主机和端口proxy_host proxy_port # 创建一个HTT理对象proxy URI.parse("http://#{prox…

免费好用的DNS在线工具,DNS记录、域名被墙、Whois轻松查询

在互联网的世界中&#xff0c;DNS是一种非常重要的存在&#xff0c;它们是域名与IP地址之间的桥梁&#xff0c;用于实现用户访问网站。我们在搭建网站时&#xff0c;经常会用到一些DNS工具&#xff0c;以便了解网站的DSN情况。DNS记录查询工具、域名被墙检测工具以及Whois域名信…

综合场景搭建|一张图展示多源空间数据,搭建丰富场景

「四维轻云」是一款轻量化的地理空间数据管理云平台&#xff0c;支持地理空间数据的在线管理、编辑以及分享。平台提供了项目管理、数据上传、场景搭建、发布分享、素材库等功能模块&#xff0c;支持团队多用户在线协作管理。 四维轻云平台是以项目的形式进行数据管理&#xf…

asp.net企业费用报销管理信息系统VS开发sqlserver数据库web结构c#编程Microsoft Visual Studio

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

构件基本概念

1.构件的概念 构件是一种组装单元&#xff0c;它可以可以是一个封装的对象&#xff0c;可以是软件包&#xff0c;也可以是一个子系统&#xff0c;甚至是一些文档。它具有规范的接口规约和显式的语境依赖&#xff0c;软件构件可以独立的部署并由第三方任意组装。中间件是构件的…

XUbuntu22.04之解决桌面突然放大,屏幕跟着鼠标移动问题(一百九十)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…

centos7安装mysql5.7

工具&#xff1a;VM16 centos7 1.1.Mysql安装 1.1.1 下载wget命令 root权限下进行&#xff1a; yum -y install wget 1.1.2 在线下载mysql安装包 wget https://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 1.1.3 安装MySQL rpm -ivh mysql57-community-r…

外观数列00

题目链接 外观数列 题目描述 注意点 1 < n < 30countAndSay(n) 是对 countAndSay(n-1) 的描述&#xff0c;然后转换成另一个数字字符串 解答思路 从第一个数1开始不断遍历推出下一个外观数列&#xff0c;下一个外观数列是由当前数列中连续数字的数量该数字组成&…

孩子写作业需要买台灯吗?专家推荐的读写作业台灯分享

我认为孩子写作业的时候还是很有必要备上一盏台灯的。原本现在的孩子学习压力就大&#xff0c;相信大家也不难发现&#xff0c;很多孩子每天放学回家后都要写作业到很晚&#xff0c;再加上已经长时间的学习用眼&#xff0c;如果这个时候光线不适合是很容易加重眼睛的负担的。 而…

Netty通信框架

Netty框架的底层是NIO&#xff0c;NIO&#xff1a;non-blocking io 非阻塞IO 一个线程可以处理多个通道&#xff0c;减少线程创建数量&#xff1b; 读写非阻塞&#xff0c;节约资源&#xff1a;没有可读&#xff0f;可写数据时&#xff0c;不会发生阻塞导致线程资源的浪费 一…

2023年11月4日(星期六)骑行香杆箐

2023年11月4日 (星期六) 骑行香杆箐&#xff0c;早8:30到9:00&#xff0c; 郊野公园西门&#xff0c;9:30准时出发 【因迟到者&#xff0c;骑行速度快者&#xff0c;可自行追赶偶遇。】 偶遇地点:大观公园门口集合 &#xff0c;家住东&#xff0c;南&#xff0c;北的骑友在下列…

高性能消息中间件 - Kafka3.x(四)

文章目录 高性能消息中间件 - Kafka3.x&#xff08;四&#xff09;Kafka监控-Kafka eagle&#xff08;EFAK 2.1.0版本&#xff09;⭐修改每个kafka的配置信息启动MySQL在mysql中创建名为ke的数据库开始安装并启动kafka-eagle Kafka的Kraft模式&#xff08;新版Kafka特性&#x…

【Redis】redis的过期策略如何实现有关定时器的补充

文章目录 redis的过期策略如何实现关于定时器的补充基于优先级队列/堆实现的定时器基于时间轮实现的定时器 redis的过期策略如何实现 注意&#xff1a;不能直接遍历所有的key来判断当前key是否过期&#xff0c;这样子效率非常低&#xff0c;redis整体策略是&#xff1a;定期删…

系列十五、idea全局配置

一、全局Maven配置 IDEA启动页面>Customize>All settings>Build,Execution,Deployment>Build Tools>Maven 二、全局编码配置 IDEA启动页面>Customize>All settings>Editor>File Encodings 三、全局激活DevTools配置 IDEA启动页面>Customize>A…