el-table 表头设置渐变色

news2024/11/23 9:28:08
<el-table :data="tableData" stripe>
                    <el-table-column prop="name" label="测试" align="left">
                    </el-table-column>
                    <el-table-column prop="code" label="测试1" align="left">
                    </el-table-column>
                    <el-table-column prop="code1" label="测试2" align="left">
                    </el-table-column>
                    <el-table-column prop="code2" label="测试3(%)" sortable width="180" align="right">
                    </el-table-column>
                    <el-table-column prop="code3" label="测试(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code4" label="测试(%)" sortable width="180" align="right">
                    </el-table-column>
                    <el-table-column prop="code5" label="测试(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code6" label="测试(%)" sortable align="right" width="140">
                    </el-table-column>
                    <el-table-column prop="code7" label="排测试名(%)" sortable align="right">
                    </el-table-column>
                    <el-table-column prop="code8" label="测试(%)" sortable align="right" width="140">
                    </el-table-column>
                    <el-table-column prop="code9" label="测试(%)" sortable align="right">
                    </el-table-column>
                </el-table>

style

<style lang="scss" scoped>
::v-deep .el-table  tr th:nth-child(4).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
    border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(5).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(8).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
::v-deep .el-table  tr th:nth-child(9).el-table__cell>.cell{
	background:linear-gradient(180deg, #DBE8FF 0%, rgba(243, 248, 255, 0.42) 100%);
	border-top:1px solid #3070d8;
}
</style>

效果

 

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

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

相关文章

【《Go编程进阶实战:开发命令行应用、HTTP应用和gRPC应用》——指导你使用Go语言构建健壮的、生产级别的应用程序】

谷歌在2009年发布了Go编程语言&#xff0c;并于2012年发布了1.0版。Go语言具有强大的兼容性&#xff0c;一直用于编写可扩展的重量级程序(命令行应用程序、关键基础设施工具乃至大规模分布式系统)。凭借简单性、丰富的标准库和蓬勃发展的第三方软件包生态系统&#xff0c;Go语言…

渗透D1---基础知识回顾

端口&#xff1a; http 80 https 443 ftp 20 21 telnet 23 ssh 22 DNS 53 DHCP 67 68 mail smtp 25 pop3 110 ladp 389 域控制器 3306 mysql 关系型 sqlserver 1433 c# oracle 1521 3389 windows 远程连接端口 redis nosql 6379 编码介绍&#xff1a; 主要有两…

Git实现同一个项目多个版本

需求&#xff1a; 最近项目有这样一个需求&#xff0c;就是同一个项目要求给不同的两个客户&#xff0c;这两个客户需要的功能和界面不一样但基础功能一样&#xff0c;然后修改基础功能时这两个项目的基础功能要同时修改。避免同样的代码在两个项目上各自再开发一遍。 解决办…

前端JS识别二维码内容

原文&#xff1a;https://www.cnblogs.com/houxianzhou/p/15030351.html <!DOCTYPE html> <html><head><meta charset"utf-8" /><title>图片二维码识别</title><script src"https://cdn.bootcss.com/jquery/3.4.1/jque…

如何在3ds max中创建可用于真人场景的巨型机器人:第 5 部分

推荐&#xff1a; NSDT场景编辑器助你快速搭建可二次开发的3D应用场景 1. After Effects 中的项目设置 步骤 1 打开“后效”。 打开后效果 步骤 2 我有真人版 我在After Effects中导入的素材。这是将 用作与机器人动画合成的背景素材。 实景镜头 步骤 3 有背景 选定的素材…

halcon微积分原理生成卡尺,异形产品宽度测量

1.普通测量项目中&#xff0c;我们可以利用halcon的测量模型&#xff0c;例如add_metrology_object_line_measure。很方便的测量直线&#xff0c;圆&#xff0c;椭圆&#xff0c;矩形等。这些工具都有一个缺点是&#xff0c;需要提前绘制测量位置&#xff0c;然后利用仿射变换跟…

力扣1116.打印零与奇偶数--------题解

题目描述 现有函数 printNumber 可以用一个整数参数调用&#xff0c;并输出该整数到控制台。 例如&#xff0c;调用 printNumber(7) 将会输出 7 到控制台。 给你类 ZeroEvenOdd 的一个实例&#xff0c;该类中有三个函数&#xff1a;zero、even 和 odd 。ZeroEvenOdd 的相同实…

使用langchain与你自己的数据对话(二):向量存储与嵌入

之前我以前完成了“使用langchain与你自己的数据对话(一)&#xff1a;文档加载与切割”这篇博客&#xff0c;没有阅读的朋友可以先阅读一下&#xff0c;今天我们来继续讲解deepleaning.AI的在线课程“LangChain: Chat with Your Data”的第三门课&#xff1a;向量存储与嵌入。 …

java整合chatGPT

public void test_chatGPT() throws IOException {String pro "127.0.0.1";//本机地址int pro1 7890; //代理端口号//创建一个 HttpHost 实例&#xff0c;这样就设置了代理服务器的主机和端口。HttpHost httpHost new HttpHost(pro, pro1);//创建一个 RequestConf…

Appium+python自动化(二十)- Monkey(猴子)日志(超详解)

简介 日志是非常重要的&#xff0c;用于记录系统、软件操作事件的记录文件或文件集合&#xff0c;可分为事件日志和消息日志。具有处理历史数据、诊断问题的追踪以及理解系统、软件的活动等重要作用&#xff0c;在开发或者测试软系统过程中出现了问题&#xff0c;我们首先想到的…

macOS Monterey 12.6.8 (21G725) 正式版发布,ISO、IPSW、PKG 下载

macOS Monterey 12.6.8 (21G725) 正式版发布&#xff0c;ISO、IPSW、PKG 下载 本站下载的 macOS 软件包&#xff0c;既可以拖拽到 Applications&#xff08;应用程序&#xff09;下直接安装&#xff0c;也可以制作启动 U 盘安装&#xff0c;或者在虚拟机中启动安装。另外也支持…

Google 登录支付,Firebase 相关设置

登录sdk: https://developers.google.com/identity/sign-in/android/start?hlzh-cn 支付sdk: https://developers.google.com/pay/api/android/overview?hlzh-cn Firebase sdk: https://firebase.google.com/docs/android/setup?hlzh-cn 登录设置&#xff1a; 创建凭据&…

U盘做PE系统盘

下载微PE工具箱 网址&#xff1a;https://www.wepe.com.cn/ 下载好后可以看到一个.exe文件 安装PE系统 先插入U盘到电脑&#xff0c;然后打开微PE工具箱&#xff0c;选择安装到U盘 等待制作成功 这时候U盘会被分成两个分区&#xff0c;EFI分区是PE微系统所在的分区&a…

蓝桥杯专题-真题版含答案-【最大公共子串】【阿姆斯特朗数】【出售金鱼】【亲密数】

点击跳转专栏>Unity3D特效百例点击跳转专栏>案例项目实战源码点击跳转专栏>游戏脚本-辅助自动化点击跳转专栏>Android控件全解手册点击跳转专栏>Scratch编程案例点击跳转>软考全系列点击跳转>蓝桥系列 &#x1f449;关于作者 专注于Android/Unity和各种游…

Android开发核心技术还是Framework~

这几年&#xff0c;社会问题层出不穷&#xff0c;最头疼的就是民生就业问题&#xff0c;大厂裁员&#xff0c;小厂倒闭&#xff0c;每年大批量的应届毕业生也涌入就业市场。 近几日&#xff0c;统计局也发布了就业相关数据&#xff0c;全国失业青年达600多万&#xff0c;面对此…

Solr原理剖析

一、简介 Solr是一个高性能、基于Lucene的全文检索服务器。Solr对Lucene进行了扩展&#xff0c;提供了比Lucene更为丰富的查询语言&#xff0c;并实现了强大的全文检索功能、高亮显示、动态集群&#xff0c;具有高度的可扩展性。同时从Solr 4.0版本开始&#xff0c;支持SolrCl…

《Ansible自动化工具篇:ubuntu操作系统基于ansible工具一键远程离线部署之K8S1.24.12二进制版集群》

一、部署背景 由于业务系统的特殊性&#xff0c;我们需要针对不同的客户环境部署二进制版K8S集群&#xff0c;由于大都数用户都是专网环境&#xff0c;无法使用外网&#xff0c;为了更便捷&#xff0c;高效的部署&#xff0c;针对业务系统的特性&#xff0c;我这边编写了 基于a…

pytest 核心库 pluggy 详解

目录 前言&#xff1a; 代码案例 实例化: 添加到钩子定义中 (add_hookspecs): 注册插件 (register): 传递实现插件的实体类对象 运行插件 pm.hook.myhook(arg11, arg22):本质就是调用对象的call方法 前言&#xff1a; pytest 是一个广泛使用的自动化测试框架&#xff0c…

明星代言的益处:提升品牌价值与销售增长的有力策略

​在当今竞争激烈的商业世界中&#xff0c;企业为了脱颖而出&#xff0c;吸引更多目标消费者的关注&#xff0c;常常需要运用一系列巧妙的市场营销策略。而其中&#xff0c;明星代言无疑是一种备受瞩目的行之有效的手段。通过让明星成为产品或服务的代言人&#xff0c;企业能够…

freeBSD:(虚拟机和实体机)官网下载——安装

freebsdiso镜像获取 获取 FreeBSD | The FreeBSD Project 官网 根据你 计算机型号找对应的镜像&#xff0c;现在大部分都是amd64的 找寻你需要的镜像&#xff0c;我这里选择4g的镜像&#xff0c;点击即可下载 刻录u盘&#xff08;虚拟机用户可以跳过&#xff09; 这里我们使…