当前位置: 首页 > news >正文

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

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-columntype="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、效果图

相关文章:

  • 北京网站建设多少钱?
  • 辽宁网页制作哪家好_网站建设
  • 高端品牌网站建设_汉中网站制作
  • 使用puma部署ruby on rails的记录
  • 物联网主机 E6000:智慧应急领域的创新力量
  • html-docx-js和file-saver实现html导出word
  • vue3前端开发-小兔鲜项目-登录组件的开发表单验证
  • Android WebViewClient 的 `shouldOverrideUrlLoading` 方法
  • 学习在测试时学习(Learning at Test Time): 具有表达性隐藏状态的循环神经网络(RNNs)
  • Linux中tomcat下载教程
  • 国产系统银河麒麟SP10桌面版安装nvidia 4060TI驱动
  • 算法第十五天:leetcode19.删除链表的倒数第N个节点
  • Visual stdio code 运行C项目环境搭建
  • openCv -- 优势
  • Docker 搭建Elasticsearch详细步骤
  • 【C++】模板详解
  • 如何撤销/回滚远程修改
  • Springboot项目的行为验证码AJ-Captcha(源码解读)
  • [数据结构]链表的实现在PHP中
  • ABAP的include关键字,Java的import, C的include和C4C ABSL 的import比较
  • Java多态
  • Laravel核心解读--Facades
  • Linux编程学习笔记 | Linux多线程学习[2] - 线程的同步
  • Lucene解析 - 基本概念
  • 机器人定位导航技术 激光SLAM与视觉SLAM谁更胜一筹?
  • 小试R空间处理新库sf
  • TPG领衔财团投资轻奢珠宝品牌APM Monaco
  • 阿里云服务器如何修改远程端口?
  • 带你开发类似Pokemon Go的AR游戏
  • ​iOS实时查看App运行日志
  • #Java第九次作业--输入输出流和文件操作
  • #我与Java虚拟机的故事#连载02:“小蓝”陪伴的日日夜夜
  • $().each和$.each的区别
  • (9)STL算法之逆转旋转
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第1节 (全局数据、栈和堆)
  • (Java数据结构)ArrayList
  • (Ruby)Ubuntu12.04安装Rails环境
  • (阿里云在线播放)基于SpringBoot+Vue前后端分离的在线教育平台项目
  • (附源码)ssm捐赠救助系统 毕业设计 060945
  • (论文阅读31/100)Stacked hourglass networks for human pose estimation
  • (四)js前端开发中设计模式之工厂方法模式
  • (图文详解)小程序AppID申请以及在Hbuilderx中运行
  • (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境
  • (一) 初入MySQL 【认识和部署】
  • .bat批处理(十):从路径字符串中截取盘符、文件名、后缀名等信息
  • .net core + vue 搭建前后端分离的框架
  • .Net Core与存储过程(一)
  • .NET 表达式计算:Expression Evaluator
  • .NET 某和OA办公系统全局绕过漏洞分析
  • .NET导入Excel数据
  • .net和jar包windows服务部署
  • .Net下的签名与混淆
  • .NET与 java通用的3DES加密解密方法
  • @Autowired多个相同类型bean装配问题
  • @SuppressWarnings(unchecked)代码的作用
  • @Transactional注解下,循环取序列的值,但得到的值都相同的问题
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • [ 网络通信基础 ]——网络的传输介质(双绞线,光纤,标准,线序)