ant Design of vue 实现table每栏动态根据条件设置背景颜色(table栏每一栏颜色自定义)

效果图:
在这里插入图片描述
注意效果图中,table的表格每一栏颜色都要不一样

代码实现:

页面结构:

 <a-table :columns="columns" :loading="tableLoading" :data-source="tableData" rowKey='id' size="middle":rowClassName="rowClassName"><template slot="operate" slot-scope="text, record"><p class="detailP" @click="openModel(text, record)">详情 </p></template>
</a-table>

方法:

  rowClassName(record, index) {return index % 2 == 0 ? "first" : "second";},

样式:

/deep/.ant-table-tbody .first {background-color: #061236 !important;
}/deep/.ant-table-tbody .second {background-color: #071641 !important;
}

关键点:通过rowClassName这个属性去动态根据条件设置样式

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

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

相关文章

Spring 向页面传值以及接受页面传过来的参数的方式

一、从页面接收参数 Spring MVC接收请求提交的参数值的几种方法&#xff1a; 使用HttpServletRequest获取。 RequestMapping("/login.do") public String login(HttpServletRequest request){ String name request.getParameter("name") String pa…

5-20V升降压转12V2A自动升降压芯片:AH6971高效、稳定、安全

5-20V升降压转12V2A自动升降压芯片&#xff1a;高效、稳定、安全 随着科技的飞速发展&#xff0c;各种电子设备对电源的要求越来越高。一款高效、稳定、安全的电源芯片成为众多工程师亟待解决的问题。今天&#xff0c;我们就来为大家介绍一款5-20V升降压转12V2A的自动升降压芯…

GPU深度学习性能的三驾马车:Tensor Core、内存带宽与内存层次结构

编者按&#xff1a;近年来&#xff0c;深度学习应用日益广泛&#xff0c;其需求也在快速增长。那么&#xff0c;我们该如何选择合适的 GPU 来获得最优的训练和推理性能呢&#xff1f; 今天&#xff0c;我们为大家带来的这篇文章&#xff0c;作者的核心观点是&#xff1a;Tensor…

NET Core迁移前工作

前段时间迁移.NET Core做了大量的试水和评估&#xff0c;今天整理一下分享给大家。大致有以下几个部分&#xff1a; 1. .NET Core的由来 2. 为什么要迁移.NET Core 3. .NET Core3.X主要特性 4. .NET Standard和.NET Core 5. .NET Core Roadmap&版本选择 接下来&#…

Linux4.8、环境变量续

个人主页&#xff1a;Lei宝啊 愿所有美好如期而遇 前言 如果对环境变量没有基本的理解&#xff0c;那么建议先看完这篇文章&#xff1a;环境变量https://blog.csdn.net/m0_74824254/article/details/134661113?spm1001.2014.3001.5501 环境变量与本地变量区别 使用export设…

自动化测试的成本高效果差,那么自动化测试的意义在哪呢?

有人问&#xff1a;自动化测试的成本高效果差&#xff0c;那么自动化测试的意义在哪呢&#xff1f; 我觉得这个问题带有很强的误导性&#xff0c;是典型的逻辑陷阱之一。“自动化测试的成本高效果差”是真的吗&#xff1f;当然不是。而且我始终相信&#xff0c;回答问题的最…

COMP4121Advanced Algorithms

COMP4121Advanced Algorithms WeChat&#xff1a;yj4399_ Sina Visitor System

【Linux】 OpenSSH_9.3p1 升级到 OpenSSH_9.5p1(亲测无问题,建议收藏)

&#x1f468;‍&#x1f393;博主简介 &#x1f3c5;云计算领域优质创作者   &#x1f3c5;华为云开发者社区专家博主   &#x1f3c5;阿里云开发者社区专家博主 &#x1f48a;交流社区&#xff1a;运维交流社区 欢迎大家的加入&#xff01; &#x1f40b; 希望大家多多支…

数据结构之二叉树及面试题讲解

&#x1f495;"从前种种譬如昨日死&#xff1b;从后种种譬如今日生"&#x1f495; 作者&#xff1a;Mylvzi 文章主要内容&#xff1a;数据结构之二叉树及面试题讲解 一.概念 1.树的定义 树是一种非线性的数据结构&#xff0c;是由n个结点组成的一种非线性集合&…

Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同?

面试官&#xff1a;Vue3.0 所采用的 Composition Api 与 Vue2.x 使用的 Options Api 有什么不同&#xff1f; 开始之前 Composition API 可以说是Vue3的最大特点&#xff0c;那么为什么要推出Composition Api&#xff0c;解决了什么问题&#xff1f; 通常使用Vue2开发的项目&…

交流插座电器漏电断路器的低功耗控制芯片D4140,内置桥式整流器漏电灵敏度可调,采用SOP8和DIP8 的封装形式

D4140 是一种用于交流插座电器漏电断路器的低功耗控制器。这些设备可以检测到接地的危险电流路径&#xff0c;例如设备掉进水中。在发生有害或致命的电击之前&#xff0c;断路器会断开线路。内置有整流桥&#xff0c;齐纳管稳压器&#xff0c;运算放大器&#xff0c;电流基准&a…

论文阅读——Loss odyssey in medical image segmentation

Loss odyssey in medical image segmentation github&#xff1a;https://github.com/JunMa11/SegLossOdyssey 这篇文章回顾了医学图像分割中的20种不同的损失函数&#xff0c;旨在回答&#xff1a;对于医学图像分割任务&#xff0c;我们应该选择哪种损失函数&#xff1f; 首…

倾斜摄影三维模型的根节点合并的优势分析

倾斜摄影三维模型的根节点合并的优势分析 根节点合并是倾斜摄影三维模型处理中的一项重要技术&#xff0c;它具有许多优势&#xff0c;可以显著提升模型数据的处理效率和渲染性能。在本文中&#xff0c;我们将对倾斜摄影三维模型的根节点合并的优势进行详细分析。 1、数据大小…

计算机毕业设计|基于SpringBoot+SSM+MyBatis框架的迷你仿天猫商城购物系统设计与实现

计算机毕业设计|基于SpringBootMyBatis框架的仿天猫商城购物系统设计与实现 迷你仿天猫商城是一个基于SpringBootSSMMyBatis框架的综合性B2C电商平台&#xff0c;需求设计主要参考天猫商城的购物流程&#xff1a;用户从注册开始&#xff0c;到完成登录&#xff0c;浏览商品&am…

家用小型洗衣机哪款性价比高?内衣洗衣机品牌推荐

近日&#xff0c;国内著名的电子商务平台公布了“内衣洗衣机产业趋势”的研究报告。该报告指出&#xff0c;由于消费者对生活质量的要求越来越高&#xff0c;内衣洗衣机的行业也有了长足的发展&#xff0c;特别是在今年以来&#xff0c;内衣洗衣机的销售额同比上涨了830%&#…

汽车音响静音检测电路芯片D3703F,6V~16V SOP8封装

D3703F 是一块汽车音响静 音检测电路。用于音 响系统检测在放音或快进/退时进行静音检测&#xff0c;电压范围: 6V~16V&#xff0c;信号检测和静音时间可通过外围电阻 、电容来改变。D3703F采用SOP8的封装形式封装 主要特点: 快进/退时也可进行静音 检测 信号检测…

小黄鸟(HTTPCanary)安装及Android高版本CA证书配置

小黄鸟&#xff08;HTTPCanary&#xff09;安装及Android高版本CA证书配置 HTTPCanary及CA证书安装 1.HTTPCanary下载2.导出CA证书3.安装CA证书 1.HTTPCanary下载 从下面链接下载安装HTTPCanary 链接: https://xiao6ming6.lanzouq.com/iQcB902w15pg 密码:4wby 2.导出CA证书 1.…

关于this和构造器的理解

1.类中的this关键字表示当前对象的引用。它可以被用于解决变量名冲突问题&#xff0c;或者在一个方法中调用类的另一个方法。如果在方法中没有明确指定要使用哪个变量&#xff0c;那么编译器就会默认使用this关键字来表示当前对象。 下面是一个输出this关键字的示例代码&#…

信息泄露威胁:日本科技巨头遭网络攻击,超40万条数据悬崖边缘!

11月27日下午&#xff0c;日本最主要通讯应用程序Line的运营商、日本LY公司发布公告称&#xff0c;有攻击者通过附属公司的NAVER Cloud系统访问了其内部服务器&#xff0c;可能泄露了数十万条包含用户、员工和业务合作伙伴在内的数据。 这一数据泄露事件发生在10月9日&#xff…

关于你对 Zookeeper 的理解

看看普通人和高手是如何回答这个问题的&#xff1f; 普通人 Zookeeper 是一种开放源码的分布式应用程序协调服务 是一个分布式的小文件存储系统 一般对开发者屏蔽分布式应用开发过过程种的底层细节 用来解决分布式集群中应用系统的一致性问题 高手 对于 Zookeeper 的理解…