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

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

HarmonyOS UI 开发

引言 HarmonyOS 提供了强大的 UI 开发工具和组件&#xff0c;使开发者能够创建吸引人的用户界面。本章将详细介绍在 HarmonyOS 中应用 JS、CSS、HTML&#xff0c;HarmonyOS 的 UI 组件以及如何自定义 UI 组件。 目录 JS、CSS、HTML 在 HarmonyOS 中的应用HarmonyOS 的 UI 组…

uni-app华为审核被拒,驳回原因:您的应用在运行时,未见向用户告知权限申请的目的

华为审核被拒&#xff1a; 您的应用在运行时&#xff0c;未见向用户告知权限申请的目的&#xff0c;向用户索取(相机存)等权限&#xff0c;不符合华为应用市场审核标准。 <uni-popup ref"perpopup" type"center" :mask-clickfalse><view class&qu…

MATLAB 绘制 SISO 和 MIMO 线性系统的时间和频率响应图

系列文章目录 文章目录 系列文章目录前言一、时间响应二、频率响应三、极点/零点图和根节点四、响应特性五、分析 MIMO 系统六、系统比较七、修改时间轴或频率轴数值如果觉得内容不错&#xff0c;请点赞、收藏、关注 前言 本例演示如何绘制 SISO 和 MIMO 线性系统的时间和频率…

uniapp循环对象列表---点击列表切换选中不同状态

目录 源码图片最后 源码 <template><view><ul><li v-for"(item, index) in list" click"toggleSelection(index)" :class"{selected: selectedIndex index}">{{ item }}<view :class"{selected: selectedInde…

C语言_常用数据类型地址的理解

常用基本数据类型&#xff1a; #include <stdio.h> #include <stdlib.h> #include <stdint.h>int main(){printf("基本数据类型:\n");printf("char: %d\n", sizeof(char));printf("int: %d\n", sizeof(int));printf("do…

操作系统——内存映射文件(王道视频p57)

1.总体概述&#xff1a; 2.传统文件访问方式&#xff1a; 我认为&#xff0c;这种方式最大的劣势在于&#xff0c;如果要对整个文件的不同部分进行多次操作的话&#xff0c;这样确实开销可能会大一些&#xff0c;而且程序员还要指定对应的“分块”载入到内存中 3.内存映射文件…

【网络】HTTPS协议

HTTPS协议 一、什么是HTTPS二、数据的加密1、常见的加密方式2、数据摘要&#xff08;数据指纹&#xff09;3、数字签名 三、HTTPS 的工作过程探究1、方案 1 - 只使用对称加密2、方案 2 - 只使用非对称加密3、方案 3 - 双方都使用非对称加密4、方案 4 - 非对称加密 对称加密 四…

文件夹重命名与大小写转换:提高文件检索准确性的技巧

在文件管理中&#xff0c;文件夹的命名和大小写转换是非常重要的操作。正确的文件夹命名和大小写转换可以提高文件检索的准确性&#xff0c;从而提高工作效率和文件管理的便利性。现在来看云炫文件管理器如何进行文件夹重命名和大小写转换的技巧&#xff0c;以帮助您更好地管理…

2023年金融科技建模大赛(初赛)开箱点评

各位同学大家好&#xff0c;我是Toby老师。2023年金融科技建模大赛&#xff08;初赛&#xff09;从今年10月14日开始&#xff0c;11月11日结束。 比赛背景 发展数字经济是“十四五”时期的重大战略规划。2023年&#xff0c;中共中央、国务院印发了《数字中国建设整体布局规划》…

MASK-RCNN tensorflow环境搭建

此教程默认你已经安装了Anaconda&#xff0c;且tensorflow 为cpu版本。为什么不用gpu版本&#xff0c;原因下面解释。 此教程默认你已经安装了Anaconda。 因为tensorflow2.1后的gpu版&#xff0c;不支持windows。并且只有高版本的tensorflow才对应我的CUDA12.2&#xff1b; 而…

16. 机器学习 - 决策树

Hi&#xff0c;你好。我是茶桁。 在上一节课讲SVM之后&#xff0c;再给大家将一个新的分类模型「决策树」。我们直接开始正题。 决策树 我们从一个例子开始&#xff0c;来看下面这张图&#xff1a; 假设我们的x1 ~ x4是特征&#xff0c;y是最终的决定&#xff0c;打比方说是…

Pikachu(一)

暴力破解 Burte Force&#xff08;暴力破解&#xff09;概述 “暴力破解”是一攻击手段&#xff0c;在web攻击中&#xff0c;一般会使用这种手段对应用系统的认证信息进行获取。 其过程就是使用大量的认证信息在认证接口进行尝试登录&#xff0c;直到得到正确的结果。 为了提高…