el-table 表格表头、单元格、滚动条样式修改

.2023.11.21今天我学习了如何对el-table表格样式进行修改,如图:

运用的两个样式主要是

1.header-cell-class-name(设置表头)

2.class-name(设置行单元格)

代码如下:

<el-table :data="typeList"class="real_operation_table":header-cell-class-name="'header_name_style'"><el-table-column :class-name="'all_cell_style'" align="center" v-for="(value, key) in typeList[0]" :key="key":prop="key"><template slot="header" slot-scope="scope"><span>{{ value.name }}</span></template><template slot-scope="scope"><span>{{ scope.row[key].value }}</span></template></el-table-column></el-table>

.el-table如果有class记得换成自己的类名 ,没有就直接用el-table

//添加表头表格颜色
::v-deep .header_name_style {background-color: rgb(4, 62, 114) !important;color: #4cd0ee;font-size: 20px;
}//添加单元格背景颜色
::v-deep .all_cell_style {background-color: rgb(5, 35, 61);color: #4cd0ee;font-size: 20px;
}//去掉表格底部边框
.real_operation_table::before {width: 0;
}//去掉单元格边框
::v-deep .real_operation_table .el-table__cell {border: none !important;
}::v-deep .el-table--scrollable-y .el-table__body-wrapper {background-color: rgb(5, 35, 61);
}::v-deep .real_operation_table .el-table__cell.gutter {background-color: rgb(6, 71, 128) !important;
}//鼠标移入效果
::v-deep.real_operation_table {// 每行鼠标经过得样式.el-table__body tr:hover > td {background-color: rgb(5, 35, 61) !important;}.el-table__body tr.current-row > td {background-color: rgb(5, 35, 61) !important;}
}// 滚动条样式
::v-deep ::-webkit-scrollbar {width: 0.4vh;
}::v-deep ::-webkit-scrollbar-track {background-color: transparent;
}::v-deep ::-webkit-scrollbar-thumb {background-color: rgb(68, 148, 220);border-radius: 4px;
}//去掉表格背景颜色
::v-deep .el-table {background-color: transparent !important;
}

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

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

相关文章

主播产品话术

以电子产品为例 一、产品特点 1.高效性能:这款产品采用了最先进的技术&#xff0c;确保高效运行&#xff0c;让你的工作更加流畅。 2.便捷操作:设计简洁&#xff0c;操作方便&#xff0c;即使是不熟悉电子产品的人也能轻松上手。 3.时尚外观:多种颜色可选&#xff0c;满足你…

springboot+bootstrap+java农业电商服务商城系统_30249

本农业电商服务系统是为了提高用户查阅信息的效率和管理人员管理信息的工作效率&#xff0c;可以快速存储大量数据&#xff0c;还有信息检索功能&#xff0c;这大大的满足了管理员、会员和商家这三者的需求。操作简单易懂&#xff0c;合理分析各个模块的功能&#xff0c;尽可能…

实时云渲染 助力破解智慧园区痛点困局

智慧园区是运用先进的信息技术&#xff0c;如物联网&#xff08;IoT&#xff09;、大数据、云计算、人工智能、三维可视化等&#xff0c;对园区内的各类设施、资源以及管理进行智能化和数字化升级。其目标是通过科技手段提升园区的运营效率、资源利用率&#xff0c;提供更便捷、…

什么是软件需求?以及需求的最佳实践?

什么是软件需求 业务需求是反应企业组织对软件系统的高层次目标要求&#xff0c;换句话说就是软件系统的建设目标&#xff0c;常常体现在这两个方面&#xff1a;问题和机会。 要记住&#xff1a;出发点不同&#xff0c;精神面貌就完全不一样&#xff0c;当然如果目标过于夸大也…

机器人算法—ROS TF坐标变换

1.TF基本概念 &#xff08;1&#xff09;什么是TF&#xff1f; TF是Transformations Frames的缩写。在ROS中&#xff0c;是一个工具包&#xff0c;提供了坐标转换等方面的功能。 tf工具包&#xff0c;底层实现采用的是一种树状数据结构&#xff0c;根据时间缓冲并维护多个参考…

在AWS VPC中运行Nagios检查时指定自定义DNS解析器的选项

在AWS VPC中运行Nagios检查&#xff0c;并希望能够指定自定义DNS解析器来处理请求。我想使用Python requests库来实现这个目标。 根据问题描述&#xff0c;您想在AWS VPC中运行Nagios检查&#xff0c;并希望使用Python的requests库来指定自定义DNS解析器。 要解决这个问题&…

获取当前用户信息的几种方式

说明&#xff1a;在开发中&#xff0c;我们经常需要获取当前操作的用户信息&#xff0c;如创建用户、创建订单时&#xff0c;我们需要记录下创建人&#xff0c;本文介绍获取当前用户信息的三种方式。 方式一&#xff1a;使用ThreadLocal ThreadLocal本质上是一个Map&#xff…

一个c语言的hello world的本质是什么?

文章目录 hello world程序源文件的本质是0和1hello world文件的ASCII表示程序被其他程序翻译成不同的格式预处理阶段编译阶段汇编阶段链接阶段 为什么需要了解编译系统的工作原理&#xff1f;优化程序性能理解链接时出现的错误避免安全漏洞 参考 hello world 程序源文件的本质是…

Django 创建项目时找不到数据库sqlite3

原因:PyCharm创建Django项目,找不到数据库sqlite3 解决&#xff1a;如果没有默认的db文件&#xff0c;则应在PyCharm终端中执行以下命令&#xff1a; python manage.py makemigrations python manage.py migrate

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《就地无常规电源支撑下考虑新能源基地频率稳定的储能优化配置方法》

这个标题涉及到一个关于新能源基地频率稳定的储能优化配置方法的主题。让我们逐步解读&#xff1a; 就地无常规电源支撑下&#xff1a; 就地 (On-site): 意味着在特定地点或场地进行操作&#xff0c;而不是依赖外部地点的资源。无常规电源 (Non-conventional Power): 指的是不传…

python报错ModuleNotFoundError: No module named ‘docx‘解决方案

python报错ModuleNotFoundError: No module named docx解决方案 执行报错分析原因解决方案 执行报错 ModuleNotFoundError: No module named ‘docx’ pip install docx 后报错 分析原因 导错包了&#xff0c;不是docx而是python-docx 解决方案 卸载安装错的 docx pip uni…

足底筋膜炎症状及治疗方法

足底筋膜炎是一种常见的足部疾病&#xff0c;通常会引起足跟疼痛和不适。这种疼痛通常在早晨起床后或者长时间休息后更为明显&#xff0c;行走一段时间后可能会减轻。下面我们将详细介绍足底筋膜炎的症状及治疗方法。 一、足底筋膜炎的症状 足跟疼痛&#xff1a;这是足底筋膜…

2023/11/21JAVAweb学习

优先级高低id > 类 > 元素 格式化ctrl alt L

探索无限自然之美——Terragen Professional 4渲染软件

Terragen Professional 4是一款强大的自然环境渲染软件&#xff0c;为设计师、艺术家和电影制作人们带来了无限的创作可能性。无论是为游戏、电影、动画还是虚拟现实体验创建逼真的自然场景&#xff0c;Terragen Professional 4都能为您提供令人难以置信的结果。 Terragen Pro…

电商数据|淘宝商品数据接口接入|参数|获取商品订单物流|电商数据分析

授权认证 授权不是开放平台对服务商应用的授权 &#xff0c;而是需要开放平台的客户&#xff08;用户&#xff09;对服务商应用的授予&#xff0c;比如ERP应用&#xff0c;也就是淘宝的店铺商家对应用进行授权&#xff0c;使其能够拉取到店铺的订单来完成订单履约。 淘宝授权页…

C题目11:数组a[m]排序

每日小语 双手&#xff0c;且放下一切劳作&#xff0c;前额&#xff0c;也忘掉忧思&#xff0c;此时此刻我所有的感觉就想沉入安睡。 自己敲写 这个问题老师上课讲了一种方法&#xff0c;叫做冒泡排序。基本思想是 1.找最小值&#xff0c;放到a[0] 2.从a[1]~a[3]找最小值&a…

数据结构之二叉树

前言&#xff1a;我们前面已经学习了数据结构的栈和队列&#xff0c;今天我们就来学习一下数据结构中的二叉树&#xff0c;那么作为二叉树我们就得先了解树的一些概念&#xff0c;还有二叉树一些特点。 树的概念&#xff1a; 树是一种非线性的数据结构&#xff0c;它是由n&…

golang指针学习

package mainimport "fmt"func main() {name:"飞雪无情"nameP:&name//取地址fmt.Println("name变量的内存地址为:",&name)fmt.Println("name变量的值为:",name)fmt.Println("name变量的内存地址为:",nameP)fmt.Prin…

DC电源模块检测故障步骤有哪些

BOSHIDA DC电源模块检测故障步骤有哪些 DC电源模块检测故障步骤如下&#xff1a; 1. 检查输入电压&#xff1a;用万用表测量输入电压&#xff0c;确保其在规定范围内。 2. 检查输出电压&#xff1a;用万用表或示波器测量输出电压&#xff0c;确保其在规定范围内。 3. 检查输…

使用vue-cli搭建vue项目

1&#xff1a;安装vue-cli 命令&#xff1a;npm install -g vue/cli 2&#xff1a;查看安装的版本 vue --version 或者 vue -V 3&#xff1a;创建项目 vue create 项目名称 名称小写 4&#xff1a;vue2框架中根据自己的需求选择&#xff08;我选择…