el-table给某一行加背景色

news2024/10/2 16:14:49

数据列表中总价大于100的一行背景色为红色,效果图如下:

代码示例:

<template>
  <div id="app">
   
    <!-- 测试区域!!!!!!!!!!!!!!!!! -->
    <el-table :data="tableData" style="width: 50%" :row-class-name="tableRowClassName">
      <el-table-column prop="name" label="物品" width="180" />
      <el-table-column prop="danjia" label="单价" width="100" />
      <el-table-column label="数量" align="center" prop="num" />
      <el-table-column label="总价" align="center" prop="zongjia" />
    </el-table> 
    <!-- 测试区域结束!!!!!!!!!!!!!!! -->

  </div>
</template>
<script>

export default {
  name: '',
  data(){
    return{
       tableData:[
          {
            id:1,
            name:"物品1",
            danjia: 10,
            num: 1,
            zongjia:10
          },
          {
            id:2,
            name:"物品2",
            danjia: 50,
            num: 5,
            zongjia:250
          },
          {
            id:3,
            name:"物品3",
            danjia: 30,
            num: 3,
            zongjia:90
          },
        ],

    }
  },
  methods:{
    //指定行颜色
    tableRowClassName: function({ row, rowIndex }) {
      console.log(row, 'row');
      console.log("rowIndex",rowIndex);
      if (row.zongjia>100) {
        return 'rowbg';
      }
    }
  },
  mounted(){
    
  }
}
</script>

<style>
.rowbg{
  background: pink!important;
}
</style>

注意:加的样式里面后边要加上 !important  否则权重不够样式加不上。 

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

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

相关文章

正式发布!万应低代码入选中国信通院《2023高质量数字化转型技术解决方案集》

随着科技的快速发展和市场竞争的日益激烈&#xff0c;数字化转型已成为企业持续发展和提升竞争力的关键。然而&#xff0c;在数字化转型的过程中&#xff0c;许多企业面临着诸多痛点&#xff0c;如缺乏先进的技术与方案、难以实现数据互通和集成、无法有效提升业务效率与规模。…

Redis-----SSM整合redis及redis的注解式开发以及redis的击穿,穿透,雪崩三种解决方案

目录 SSM项目整合Redis 导入pom依赖 配置文件spring-redis.xml redis.properties 配置redis的key生成策略 redis的注解式开发及应用场景 什么是redis的注解式 redis注解式的场景应用 Cacheable 自定义策略 Cacheable可以指定三个属性&#xff0c;value、key和condition…

自制圆形时钟⏰

如果想着做一个类似的家里的圆形时钟的样式的钟表&#xff0c;可以使用这样的方法&#xff1a; #import "ViewController.h" interface ViewController () property (nonatomic,weak)CALayer *second; property (nonatomic ,weak)CALayer *minute; property (nona…

内存卡读不出来怎么办?正确解决方法看这!

“不知道大家有没有遇到过内存卡读不出来的情况呀&#xff1f;我内存卡里还有很多重要的文件和材料&#xff0c;现在都无法读取&#xff0c;有什么方法可以帮我解决这个问题吗&#xff1f;” 内存卡的使用越来越频繁&#xff0c;可能很多用户会将比较重要的文件都保存在内存卡中…

【Python基础】 Python设计模式之单例模式介绍

单例模式 1.设计模式2.单例设计模式的应用场景3.new方法4. Python 中的单例 1.设计模式 设计模式 是 前人工作的总结和提炼&#xff0c;通常&#xff0c;被人们广泛流传的设计模式都是针对 某一特定问题 的成熟的解决方案使用 设计模式 是为了可重用代码、让代码更容易被他人理…

只需两步折叠GoLand的控制台中多余的信息,控制台显示无效内容太多(GOROOT、GOPATH)

一、问题&#xff1a;Goland控制台无效内容过多&#xff1a; GoLand的控制台显示无效内容太多&#xff08;GOROOT、GOPATH&#xff09;&#xff0c;一键将折叠控制台多余的信息&#xff0c;如图所示&#xff1a; 二、解决方法&#xff1a; 第一步&#xff1a;Window系统是&am…

【网络编程】如何将UDP协议变得更可靠

(꒪ꇴ꒪ )&#xff0c;Hello我是祐言QAQ我的博客主页&#xff1a;C/C语言&#xff0c;数据结构&#xff0c;Linux基础&#xff0c;ARM开发板&#xff0c;网络编程等领域UP&#x1f30d;快上&#x1f698;&#xff0c;一起学习&#xff0c;让我们成为一个强大的攻城狮&#xff0…

Verilog刷题[hdlbits] :Always case

题目&#xff1a;Always case Case statements in Verilog are nearly equivalent to a sequence of if-elseif-else that compares one expression to a list of others. Its syntax and functionality differs from the switch statement in C. Verilog中的Case语句几乎等同…

答题小程序排位pk答题怎么玩

答题小程序排位PK答题升级赛是一个备受喜爱的功能&#xff0c;它不仅增加了用户之间的互动和竞争&#xff0c;同时也为答题小程序增添了更多的趣味性和挑战性。那么&#xff0c;如何参与答题小程序的排位PK答题升级赛呢&#xff1f;本文将详细介绍答题小程序的排位PK答题升级赛…

网络安全与TikTok:年轻一代的数字素养

在数字时代&#xff0c;互联网成为我们生活的重要组成部分&#xff0c;而社交媒体平台则在年轻一代中变得日益流行。其中&#xff0c;TikTok作为一个短视频分享平台&#xff0c;吸引了全球数以亿计的用户&#xff0c;尤其年轻人。 然而&#xff0c;与其快速的普及相伴随的是网…

思维模型 首因效应

本系列文章 主要是 分享 思维模型&#xff0c;涉及各个领域&#xff0c;重在提升认知。先入为主&#xff0c;一见钟情。 1 首因效应的应用 1.1 面试中的首因效应 小李是一名应届毕业生&#xff0c;他准备参加一家知名互联网公司的面试。在面试前&#xff0c;他做了充分的准备…

leetcode 215. 数组中的第K个最大元素

2023.11.7 本题两个思路&#xff0c;一个是先将数组排序&#xff0c;再从后往前数第k个元素即为第k个最大的元素。 或者使用优先队列&#xff0c;将数组元素放入队列中&#xff0c;当队列元素数量超过k时&#xff0c;弹出队列元素&#xff0c;由于优先队列的性质&#xff0c;每…

CodeWhisperer 的正确使用

1、重点&#xff1a; 重点1&#xff1a; 推出 Amazon Bedrock。这项新服务允许用户通过 API 访问来自 AI21 Labs、Anthropic、Stability AI 和亚马逊的基础模型。&#xff08;Anthropic 就是之前跟 ChatGPT 掰手腕的 Claude 的模型。Stability AI 就是 Stable Diffusion 背后的…

外汇天眼:如何识破网络交友诈骗套路? 看到这7大特征请提高警觉

随着各种社群平台与交友APP不断推陈出新&#xff0c;现代人愈来愈习惯透过网路建立人际关系甚至谈恋爱。 但由于网络具有极高的匿名性&#xff0c;因此也成为诈骗温床&#xff0c;对社会造成相当严重的损失。 有鉴于此&#xff0c;外汇天眼根据一直以来收到针对黑平台的投诉与…

各省市30米分辨率DEM数据,推荐下载!

今天给大家推荐一个新数据 —— 各省市30米分辨率DEM数据&#xff01; 各省市30米分辨率DEM数据广泛应用于国土资源调查、水利水电工程、地质灾害预警、城市规划等领域&#xff0c;对于了解区域内的地形地貌、地形分析、土地利用等具有非常重要的意义。 网站搜索“citybox城市…

数据时代的新引擎:数据治理与开发,揭秘数据领域的黄金机遇!

文章目录 一、数据时代的需求二、数据治理与开发三、案例分析四、黄金机遇《数据要素安全流通》《Python数据挖掘&#xff1a;入门、进阶与实用案例分析》《数据保护&#xff1a;工作负载的可恢复性 》《Data Mesh权威指南》《分布式统一大数据虚拟文件系统 Alluxio原理、技术与…

Microsoft 365 与Office 365 有什么区别?

从2020年起&#xff0c;部分Office 365 品牌的订阅计划整合到了Microsoft 365中&#xff0c;虽然这更符合微软对产品战略的定位&#xff0c;但却增加了用户分辨这两种产品的难度。 文章目录 Office 365包含哪些内容Microsoft 365包含哪些内容Microsoft 365包含哪些订阅Microso…

2023中国视频云市场报告:腾讯云音视频解决方案份额连续六次蝉联榜首,加速全球化布局

近日&#xff0c;国际数据公司&#xff08;IDC&#xff09;发布了《中国视频云市场跟踪&#xff08;2023上半年&#xff09;》报告&#xff0c;腾讯云音视频的解决方案份额连续六次蝉联榜首&#xff0c;并在视频生产创作与媒资管理市场份额中排名第一。同时&#xff0c;在实时音…

为什么深度学习模型的预测结果为数据集均值

如图&#xff0c;上边的为真值&#xff0c;下边的为预测值&#xff0c;可见预测值都是在30左右 一直debug不出来。后来发现是loss处写错了 用的torch.nn.MSELoss(pred,target)&#xff0c;其中pred的size是(batchsize,1), target的size是(batchsize)&#xff0c;此时会有警告但…

vue 集成高德地图,点击图标,弹出van-action-sheet,一闪而过的问题探究

代码 <van-action-sheet v-model"sheetShow" title""><div class"van-list-vol"><van-col span"3"><div><van-imagestyle"height: 40px; width: 40px"round:src"hospital.orgUrl? hospita…