vue 给特定满足条件的表单数据添加背景颜色,组件的 row-class-name

news2024/11/13 7:56:19
1、:row-class-name="tableRowClassName" 可为表格每行根据后面的函数绑定class名
<!-- 列表框 -->
    <div class="tableList">
      <el-table :data="teamModelListTable"  style="width: 100%"
                @selection-change="handleSelectionChange"
                :row-class-name="tableClassNameRow"
                tooltip-effect="dark"
                id="newGridList"
                ref="gridShouldRespondList">
        <el-table-column
          type="selection"
          :reserve-selection="false"
        ></el-table-column>
        <el-table-column label="序号" type="index" width="100" align="center">
          <template slot-scope="scope">{{
              scope.$index + 1 + pageSize * (currentPage - 1)
            }}
          </template>
        </el-table-column>
        <el-table-column show-overflow-tooltip prop="feedName" label="反馈人" ></el-table-column>
        <el-table-column show-overflow-tooltip prop="gridName" label="网格名称" ></el-table-column>
        <el-table-column show-overflow-tooltip prop="finishSituation" label="完成情况"></el-table-column>
        <el-table-column show-overflow-tooltip prop="isFinished" label="是否完成"></el-table-column>
      </el-table>
methods: {
    tableClassNameRow(row, rowIndex) {
      console.log(row)
      if (row){
        if (row.isFinished != null || row.isReceived != null ){
          return 'is-finished-filled';
        }else {
          return '';
        }
      }
    },

   ...其他方法
}
 .is-finished-filled {
    background-color: #07e56c !important; /* 高亮颜色,可以根据需求自定义 */
    font-weight: bold; /* 另外一种可能的高亮方式 */
  }

2、效果图

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

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

相关文章

基于Python的哔哩哔哩国产动画排行数据分析系统

需要本项目的可以私信博主&#xff0c;提供完整的部署、讲解、文档、代码服务 随着经济社会的快速发展&#xff0c;中国影视产业迎来了蓬勃发展的契机&#xff0c;其中动漫产业发展尤为突出。中国拥有古老而又璀璨的文明&#xff0c;仅仅从中提取一部分就足以催生出大量精彩的…

数字图像处理和机器视觉中的常用特殊矩阵及MATLAB实现详解

一、前言 Matlab的名称来源于“矩阵实验室&#xff08;Matrix Laboratory&#xff09;”&#xff0c;其对矩阵的操作具有先天性的优势&#xff08;特别是相对于C语言的数组来说&#xff09;。在数字图像处理和机器视觉实践中&#xff0c;为了提高编程效率&#xff0c;MATLAB 提…

用Java手写jvm之实现查找class

写在前面 完成类加载器加载class的三阶段&#xff0c;加载&#xff0c;解析&#xff0c;初始化中的加载&#x1f600;&#x1f600;&#x1f600; 源码 。 jvm想要运行class&#xff0c;是根据类全限定名称来从特定的位置基于类加载器来查找的&#xff0c;分别如下&#xff1a;…

MySQL常见指令

MySQL中的数据类型 大致分为五种&#xff1a;数值&#xff0c;日期和时间&#xff0c;字符串&#xff0c;json&#xff0c;空间类型 每种类型也包括也一些不同的子类型&#xff0c;根据需要来选择。 如数值类型包括整数类型和浮点数类型 整数类型根据占用的存储空间的不同 又…

Javascript 沙漏图案(Hour-glass Pattern)

给定正整数 n&#xff0c;以沙漏形式打印数字模式。示例&#xff1a; 输入&#xff1a;rows_no 7 输出&#xff1a; 1 2 3 4 5 6 7 2 3 4 5 6 7 3 4 5 6 7 4 5 6 7 5 6 7 6 7 7 6 7 5 6 7 4 5 6 7 3 4 5 6 7 2 3 4 5 6 7 1 2 3 4 5 6…

指针的面试题

这里写目录标题 判断链表中是否有环描述代码检测链表中是否存在环链表中存在环想检测链表中是否存在环&#xff0c;而不需要找到环的入口 判断链表中是否有环 题目 描述 判断给定的链表中是否有环。如果有环则返回true&#xff0c;否则返回false。 数据范围&#xff1a;链表…

Java语言程序设计——篇九(1)

&#x1f33f;&#x1f33f;&#x1f33f;跟随博主脚步&#xff0c;从这里开始→博主主页&#x1f33f;&#x1f33f;&#x1f33f; 内部类 概述内部类—内部类的分类成员内部类实战演练 局部内部类实战演练 匿名内部类实战演练 静态内部类实战演练 概述 内部类或嵌套类&#…

不支持jdk8的jenkins部署jdk8项目

1、背景 目前最新的jenkins必须基于jdk8以上&#xff0c;才能安装。jenkins最新的插件部分也不支持jdk8了。 2、全局工具配置 配置一个jdk8 配置一个jdk8以上的版本&#xff0c;如jdk17 3、部署maven项目 jdk17项目 可以直接使用maven插件&#xff0c;部署。 jdk8项目 由…

Zenario CMS 9.2 文件上传漏洞(CVE-2022-23043)

前言 CVE-2022-23043 是一个影响 Zenario CMS 9.2 的严重漏洞。该漏洞允许经过身份验证的管理员用户绕过文件上传限制。具体来说&#xff0c;管理员可以通过创建一个新的带有 ".phar" 扩展名的“文件/MIME 类型”&#xff0c;然后上传一个恶意文件。在上传过程中&am…

运维锅总详解NFS

NFS是什么&#xff1f;如何对NFS进行部署及优化&#xff1f;NFS工作流程是什么&#xff1f;NFS的性能及优缺点是什么&#xff1f;NFS发展历史又是怎样的&#xff1f;希望本文能帮您解答这些疑惑&#xff01; 一、NFS简介 NFS (Network File System) 是由 Sun Microsystems 在…

【最新】cudnn安装教程

最近换了新电脑需要重新安装cuda和cudnn&#xff0c;发现现在cudnn的安装比以前方便多了&#xff0c;直接在官网下载exe安装包一键运行即可。安装的时候注意cuda和cudnn的对应关系即可&#xff1a;【最新】cuda和cudnn和显卡驱动的对应关系-CSDN博客 访问cudnn下载链接cuDNN 9…

docker-compose 根据yaml拉取镜像出问题

在学习go微服务时&#xff0c;用docker-compose启动nacos以及对应的mysql时出现上面的问题&#xff0c; 使用的yaml如下 version: "3.8" services:nacos:image: nacos/nacos-server:${NACOS_VERSION}container_name: nacos-standalone-mysqlenv_file:- ../env/cust…

SpringCloud+Vue3多对多,多表联查

♥️作者&#xff1a;小宋1021 &#x1f935;‍♂️个人主页&#xff1a;小宋1021主页 ♥️坚持分析平时学习到的项目以及学习到的软件开发知识&#xff0c;和大家一起努力呀&#xff01;&#xff01;&#xff01; &#x1f388;&#x1f388;加油&#xff01; 加油&#xff01…

c/c++的内存管理(超详细)

一、c/c的内存分布 这是操作系统中对于内存的划分&#xff1a; 我们重点掌握以下几个区域即可&#xff1a; 1.栈 (调用函数会建立栈帧) 2.堆(动态开辟的空间) 3.数据段(静态区)&#xff1a;存放静态变量以及全局变量 4.代码段 (常量区) 先来看看一个题目&#xff1a; int…

JDK的配置

安装好JDK后&#xff0c;配置三个环境变量 第一步&#xff0c;配置JAVA_HOME. 先找到JDK的安装目录&#xff0c;然后复制路径&#xff0c;在电脑的环境变量里增添变量名为JAVA_HOME,变量值为 C:\Program Files\Java\jdk1.8.0_192。&#xff08;具体根据你的JDK安装路径&…

Lombok的认识

Lombok的作用 Lombok是一个Java库&#xff0c;它可以通过简单的注解形式来帮助开发人员简化Java代码的编写&#xff0c;特别是减少模板代码的书写。具体来说&#xff0c;Lombok的主要作用包括&#xff1a; 减少模板代码&#xff1a;Lombok可以通过注解自动生成getter、setter、…

Python——Pandas(第三讲)

文章目录 修改替换变量值对应数值的替换指定数值范围的替换 虚拟变量变换数值变量分段数据分组基于拆分进行筛选 分组汇总使用 agg 函数进行汇总引用自定义函数 长宽格式转换转换为最简格式长宽型格式的自由互转 多个数据源的合并数据的横向合并concat 命令 处理缺失值认识缺失…

【Apache Doris】3.0存算分离|标准部署篇(一)

【Apache Doris】3.0存算分离&#xff5c;标准部署篇&#xff08;一&#xff09; 一、前提概要二、环境信息三、前置准备四、FoundationDB安装五、OpenJDK 17安装六、 Meta Service安装七、集群安装八、快速体验 接上 数据架构新篇章&#xff1a;存算一体与存算分离的协同演进。…

Meta 发布Llama 3.1开源模型 NVIDIA推出AI 代工服务

在这周二&#xff0c;Meta发布了最新的AI模型Llama 3.1&#xff0c;并且是一个开源模型&#xff0c;面向公众免费提供&#xff0c;且提供8B、70B、305B参数版本&#xff0c;模型整体效果可与 GPT-4、GPT-4o、Claude 3.5 Sonnet 等领先的闭源模型相媲美。 此次Llama 3.1 系列改…

Hadoop3.3.5的安装与单机/伪分布式配置

文章目录 一、安装须知二、安装jdk三、安装shh四、安装配置hadoop五、运行hadoop 一、安装须知 本次安装的Hadoop版本为hadoop3.3.5。 在这之前完成了VMware虚拟软件的安装&#xff0c;并安装了Ubuntu22.04&#xff0c;在这基础上进行相关配置。 二、安装jdk 在Ubuntu中使用…