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的自动升降压芯…

最近在对接电商供应链,说说开放平台API接口

B2B电商开放平台的设计需要从以下几面去思考&#xff1a; 开放平台API接口的接入&#xff0c;主要是从功能需求的角度&#xff0c;设计满足业务需求的接口及对应的字段&#xff1b; 平台与商家之间信息的对接&#xff0c;对接的方法有哪些&#xff1f;对接过程中需要可能会遇到…

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设…

代码随想录算法训练营第五十三天

1143.最长公共子序列 稍微思考即可通过&#xff0c;但是dp状态转移方程并不明确&#xff0c;靠感觉写的。解答和我想的也差不多。 1035.不相交的线 就是最长公共子序列的抽象版本&#xff0c;解答方式一模一样&#xff0c;不过对于抽象问题&#xff0c;要能将其对应为做过的…

pyspark读取数据库性能优化

当数据量很大时&#xff0c;读取方式 dbtable写sql语句 dbtable和query配置不能同时存在&#xff0c;选一种即可。里面都可以直接写sql语句 jdbcDF spark.read.format("jdbc")\.option("driver",driver)\.option("url",url)\.option("d…

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

有人问&#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; 希望大家多多支…

【Java】集合 之 使用 TreeMap

TreeMap 我们已经知道&#xff0c;HashMap 是一种以空间换时间的映射表&#xff0c;它的实现原理决定了内部的Key是无序的&#xff0c;即遍历HashMap的Key时&#xff0c;其顺序是不可预测的&#xff08;但每个Key都会遍历一次且仅遍历一次&#xff09;。 还有一种Map&#xf…

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

&#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;让参观者能够更深入地了解展览的主题和内容。 一、叙事性设计的关键要素 主题与目标 叙事性设计的第一步…

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

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

1038. 从二叉搜索树到更大和树 --力扣 --JAVA

题目 给定一个二叉搜索树 root (BST)&#xff0c;请将它的每个节点的值替换成树中大于或者等于该节点值的所有节点值之和。 提醒一下&#xff0c; 二叉搜索树 满足下列约束条件&#xff1a; 节点的左子树仅包含键 小于 节点键的节点。节点的右子树仅包含键 大于 节点键的节点。…

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

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