el-table中根据状态改单元格样式

news2024/11/20 9:28:31

需求:el-table中,有一列需要根据状态不同,显示的样式也不通。

解决方法: :cell-style="cellStyle"

   <el-table
        :data="tableData"
        style="width: 100%"
        size="mini"
        border
        :header-cell-style="{ textAlign: 'center', color: '#606266' }"
        :cell-style="cellStyle"
      >

   <el-table-column prop="result" label="检测结果"></el-table-column>
  </el-table>

    // 当监测结果为 已携带 的状态,加上背景色,字体颜色
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (row.result == '携带' && column.label == '检测结果') {
        return 'background:#d9001b;textAlign: center;color:#fff;'
      } else {
        return 'textAlign: center'
      }
    },

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

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

相关文章

基于大数据可视化的化妆品推荐及数据分析系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称&#xff1a;Visual Studio Code vscode用来写html文件&#xff0c;打开文件夹与创建文件夹&#xff1a;①选择文件夹 ②拖拽文件 生成浏览器的html文件的快捷方式&#xff1a; &#xff01;enter 运行代码到网页的方法&#xff1a; 普通方法&#xff1a…

毕业设计选题:基于ssm+vue+uniapp的自助购药小程序

开发语言&#xff1a;Java框架&#xff1a;ssmuniappJDK版本&#xff1a;JDK1.8服务器&#xff1a;tomcat7数据库&#xff1a;mysql 5.7&#xff08;一定要5.7版本&#xff09;数据库工具&#xff1a;Navicat11开发软件&#xff1a;eclipse/myeclipse/ideaMaven包&#xff1a;M…

进阶SpringBoot之 Dubbo 及 Zookeeper 安装

Dubbo 文档 Dubbo 是一款高性能、轻量级的开源 Java RPC 框架 它提供了三大核心功能&#xff1a; 面向接口的远程方法调用、智能容错和负载平衡、服务自动注册和发现 ZooKeeper 是一个分布式的&#xff0c;开放源码的分布式应用程序协调服务&#xff0c;是 Hadoop 和 Hbase …

Vue75 编程式路由导航

笔记 作用&#xff1a;不借助<router-link> 实现路由跳转&#xff0c;让路由跳转更加灵活 具体编码&#xff1a; //$router的两个API this.$router.push({name:xiangqing,params:{id:xxx,title:xxx} })this.$router.replace({name:xiangqing,params:{id:xxx,title:xxx} …

K8s flink-operator 例子

1.参考官网&#xff1a; https://nightlies.apache.org/flink/flink-kubernetes-operator-docs-stable/docs/try-flink-kubernetes-operator/quick-start/ 2.首先环境具备 k8s、helm 我的环境 k8s 1.30 最新版本了 [rootk8s-master ~]# kubectl get no -owide NAME …

【QGIS】软件下载安装及GIS4WRF插件使用

【QGIS】软件下载安装及GIS4WRF插件使用 QGIS软件下载软件安装GIS4WRF插件导入参考 QGIS软件下载 官网-QGIS-Spatial without Compromise 下载安装包&#xff0c;居然有1.2G&#xff0c;那就慢慢下载吧&#xff01; 软件安装 双击安装包&#xff0c;如下&#xff1a; 接受…

MATLAB案例 | 沪深股市收益率的二元Copula模型

沪深股市收益率的二元Copula模型 1. 案例描述2.实现流程2.1 确定随机变量的边缘分布2.1.1 参数法计算流程2.1.2 非参数法 2.2 选取适当的Copula函数2.3 参数估计 3. 完整代码参考资料 1. 案例描述 现有上海和深圳股市同时期日开盘价、最高价、最低价、收盘价、收益率等数据,跨…

9.2自适应阈值分割

基本概念 在图像处理中&#xff0c;阈值分割是一种简单而有效的图像分割方法&#xff0c;它根据像素值将图像分割成前景和背景。自适应阈值分割是阈值分割的一种高级形式&#xff0c;它考虑了图像局部区域的亮度变化&#xff0c;从而能够更准确地分割图像。OpenCV是一个强大的…

完全二叉树和堆排序

完全二叉树 完全二叉树满足以下两个条件&#xff1a; 所有层的节点都完全填满&#xff1a;除了最后一层外&#xff0c;每一层的节点数都是最大节点数&#xff0c;即除了最后一层&#xff0c;其他层的节点数都是满的。 最后一层的节点尽可能地向左排列&#xff1a;在满足第一…

调试技巧 conso.trace()

console 的 trace() 方法向 Web 控制台输出一个堆栈跟踪。 trace是一个很好的调试错误的办法&#xff0c; console.trace() 方法用于显示当前执行的代码在堆栈中的调用路径。 可以查看函数在哪一些地方做了调用 这个在找不出变量在何处被修改的时候&#xff0c;很有用 同时…

TCP网络编程概述、相关函数、及实现超详解

文章目录 TCP网络编程概述1. TCP协议的特点2. TCP与UDP的差异3. TCP编程流程 TCP网络编程相关函数详解1. socket()&#xff1a;创建套接字参数说明&#xff1a;返回值&#xff1a;示例&#xff1a; 2. connect()&#xff1a;客户端连接服务器参数说明&#xff1a;返回值&#x…

力扣每日一题 公司命名 集合 找规律

Problem: 2306. 公司命名 &#x1f468;‍&#x1f3eb; 灵神题解 class Solution {public long distinctNames(String[] ideas) {// 创建一个大小为26的HashSet数组&#xff0c;用于存储每个首字母对应的字符串集合Set<String>[] groups new HashSet[26];Arrays.set…

基于Python大数据的音乐推荐及数据分析可视化系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

Cadence Allegro17.4 板框倒角

一、Cadence Allegro 板框倒角有倒斜角和倒圆角两种形式&#xff1a; 1、 板框倒斜角 2、 板框倒圆角 二、有些时候不能倒角 如果我们绘制的板框是Shape属性的是不能正常倒角设置&#xff0c;要将Shape属性的板框更改为lines属性的板框。 1、 选择菜单栏Shape——Decompose …

Wireshark_流量分析

在当今数字化的时代&#xff0c;网络流量分析对于确保网络的稳定运行、排查故障以及保障网络安全至关重要。Wireshark 作为一款功能强大的网络数据包分析工具&#xff0c;为我们提供了多种实用的功能&#xff0c;帮助我们深入了解网络中的数据传输情况。 1、数据包筛选 数据包…

HTTP和HTTPS的区别,HTTP协议转HTTPS协议测试需要注意内容

简单快捷&#xff1a;HTTP 相对于 HTTPS 更简单和快速。在开发过程中&#xff0c;可能频繁地修改代码并测试&#xff0c;使用 HTTP 可以减少一些开发中的额外步骤和复杂性。 不涉及敏感信息&#xff1a;在本地开发环境中&#xff0c;通常不涉及真实用户数据或敏感信息的传输&a…

单链表实现和数组模拟单链表

现在有一个排好序的若干个元素(升序),现在要插入一个元素啊&#xff0c;请你输入插入该元素后的序列(升序) 请分别用单链表实现&#xff0c;和数组模拟单链表实现 为什么要用数组模拟单链表 1.内存局部性&#xff1a;数组在内存中是连续存储的&#xff0c;因此在访问元素时可…

了解针对基座大语言模型(类似 ChatGPT 的架构,Decoder-only)的重头预训练和微调训练

&#x1f349; CSDN 叶庭云&#xff1a;https://yetingyun.blog.csdn.net/ 随着自然语言处理&#xff08;NLP&#xff09;技术的飞速进步&#xff0c;基于 Transformer 架构的大语言模型在众多任务中取得了显著成就。特别是 Decoder-only 架构&#xff0c;如 GPT 系列模型&…

“警警”有条:zCloud告警中心的告警与处置实践

ENMOTECH 随着金融行业数字化转型步伐的加快&#xff0c;海量数据处理成为常态&#xff0c;而作为数据存储和管理的核心——数据库的稳定性与效率直接影响着企业的运营成效。某金融科技企业使用了近10个品类、300余套数据库来承载业务&#xff0c;在专业运维、集中管理等方面都…