vue3+elementPlus:el-table-column表格列动态设置单元格颜色

news2024/10/6 20:37:08

:cell-style属性

//html
  <el-table
        empty-text="暂无数据"
        :data="datalist.table"
        :max-height="height"
        row-key="id"
        border
        :cell-style="cellStyle"
      >
<el-table>

//js
//动态设置单元格颜色
const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (column.property == "alarmLevel") {
    // console.log(row);
    if (row.alarmLevel == 1) {
      return { backgroundColor: "rgba(80,227,194,0.4)", color: "#333333" };
    } else if (row.alarmLevel == 2) {
      return { backgroundColor: "rgba(247,220,111,0.4)", color: "#333333" };
    } else if (row.alarmLevel == 3) {
      return { backgroundColor: "rgba(234,149,24,0.4)", color: "#333333" };
    } else if (row.alarmLevel == 4) {
      return { backgroundColor: "rgba(216,30,6,0.4)", color: "#333333" };
    }
  }
};

上一篇文章,

vue3+echarts:Vue中使用echarts从后端获取数据并赋值显示_vue3中使用echars绘制折线图,获取后台数据-CSDN博客文章浏览阅读845次,点赞4次,收藏5次。vue3+echarts:Vue中使用echarts从后端获取数据并赋值显示,echarts异步加载,获取后端数据_vue3中使用echars绘制折线图,获取后台数据https://blog.csdn.net/weixin_43928112/article/details/136042118?spm=1001.2014.3001.5501

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

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

相关文章

矢量数据库简单介绍:在 Postgres使用 pg_vector

矢量数据库简单介绍&#xff1a;在 Postgres使用 pg_vector 作为向人工智能大规模转变的一部分&#xff0c;矢量数据库越来越受欢迎。它们也称为矢量化数据库&#xff0c;在人工智能领域发挥着至关重要的作用&#xff0c;因此了解它们的工作原理非常重要。为此&#xff0c;我们…

某准网招聘接口逆向之WebPack扣取

​​​​​逆向网址 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20v 逆向链接 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vc2VhcmNoP3BhZ2VOdW09MSZxdWVyeT1weXRob24mdHlwZT01 逆向接口 aHR0cHM6Ly93d3cua2Fuemh1bi5jb20vYXBpX3RvL3NlYXJjaC9qb2IuanNvbg 逆向过程 请求方式&#xff1a;GET 参数构成…

FPGA高端项目:FPGA基于GS2971的SDI视频接收+纯verilog图像缩放+多路视频拼接,提供8套工程源码和技术支持

目录 1、前言免责声明 2、相关方案推荐本博已有的 SDI 编解码方案本方案的SDI接收转HDMI输出应用本方案的SDI接收图像缩放应用本方案的SDI接收HLS图像缩放HLS多路视频拼接应用本方案的SDI接收OSD多路视频融合叠加应用本方案的SDI接收HLS多路视频融合叠加应用本方案的SDI接收GTX…

基于Redis自增实现全局ID生成器(详解)

本博客为个人学习笔记&#xff0c;学习网站与详细见&#xff1a;黑马程序员Redis入门到实战 P48 - P49 目录 全局ID生成器介绍 基于Redis自增实现全局ID 实现代码 全局ID生成器介绍 背景介绍 当用户在抢购商品时&#xff0c;就会生成订单并保存到数据库的某一张表中&#…

Python 读取写入excel文件

使用Python读取和写入excel的xlsx、xls文件 目录 读取xlsx文件 安装三方库 引入三方库 读取数据 打开文件 表名 最大行数 最大列数 读取一张表 读取整个文件 返回xls整体内容 安装三方包 读取内容 写入xls文件 引入三方库 创建文件并写入数据 报错及解决 报错…

SSL 证书,了解一下常识

公司的网站、应用怎么才能保证在互联网上安全运行&#xff0c;不被攻击、盗取数据呢&#xff1f; 创业必经之路&#xff0c;一步一步走就对了&#xff0c;可能没赶上红利期&#xff0c;但不做就等于0。 概述 SSL 证书&#xff08;SSL Certificates&#xff09;又称数字证书&am…

3/7—21. 合并两个有序链表

代码实现&#xff1a; 方法1&#xff1a;递归 ---->难点 /*** Definition for singly-linked list.* struct ListNode {* int val;* struct ListNode *next;* };*/ struct ListNode* mergeTwoLists(struct ListNode *list1, struct ListNode *list2) {/*1.如果l1为…

Vivado使用记录(未完待续)

一、Zynq开发流程 二、软件安装 三、软件使用 字体大小修改&#xff1a;Setting、Font 四、Vivado基本开发流程 1、创建工程 Quick Start 组包含有 Create Project&#xff08;创建工程&#xff09;、 Open Project&#xff08;打开工程&#xff09;、 Open Example Project&…

智慧视频终端解决方案

依托富瀚微智慧视频SOC&#xff0c;提供以视频为核心的智能产品及解决方案

ubuntu設定QGC獲取pixhawk Mini4(PX4 Mini 4) 的imu信息

ubuntu20.04 QGC使用v4.3.0的版本 飛控pixhawk Mini4 飛控上只使用一條micor USB連接電腦&#xff0c;沒有其他線 安裝命令 sudo apt-get remove modemmanager -y sudo apt install gstreamer1.0-plugins-bad gstreamer1.0-libav gstreamer1.0-gl -y sudo apt install libf…

邮件营销新手必读指南?怎样做好邮件营销?

邮件营销的全流程及步骤&#xff1f;做好邮件营销有哪些注意点&#xff1f; 邮件营销作为一种传统却依然高效的推广手段&#xff0c;被众多企业所青睐。对于新手来说&#xff0c;如何开展邮件营销&#xff0c;却是一个值得探讨的话题。AokSend将为你提供一份邮件营销新手必读指…

Java面试题总结10之MySQL索引和锁

索引的基本原理 把无需的数据变成有序的查询 1&#xff0c;把创建了索引的列的内容进行排序 2&#xff0c;对排序结果生成倒排表 3&#xff0c;到倒排表内容上拼上数据地址链 4&#xff0c;在查询的时候&#xff0c;先拿到倒排表内容&#xff0c;再取出数据地址链&#xf…

【HarmonyOS】ArkTS-函数

目录 函数-Function函数基本使用函数的参数箭头函数 函数-Function 函数&#xff1a;是可以被重复使用的代码块 作用&#xff1a;函数可以把具有相同或相似逻辑的代码“包裹”起来&#xff0c;有利于代码复用。 函数基本使用 定义函数 function 函数名() { 函数体 }调用函数 …

白酒:蒸馏技术的优化与新型蒸馏设备的研发

蒸馏技术是豪迈白酒生产中的重要环节&#xff0c;直接关系到产品的质量和风格。云仓酒庄在蒸馏技术的优化和新型蒸馏设备的研发方面进行了大量探索和实践&#xff0c;旨在提升白酒的品质和口感。 首先&#xff0c;蒸馏技术的优化对于豪迈白酒的品质至关重要。传统的蒸馏技术通常…

0环PEB断链

在操作系统层面上&#xff0c;进程本质上就是一个结构体&#xff0c;当操作系统想要创建一个进程时&#xff0c;就分配一块内存&#xff0c;填入一个结构体&#xff0c;并为结构体中的每一项填充一些具体值。而这个结构体&#xff0c;就是EPROCESS 在0x088 偏移处有一个指针Act…

关于JVM的小总结(待补充)

JVM组成及他们之间的关系 装载类子系统字节码执行引擎运行时数据区 装载类子系统 类加载器字节码调节器类加载运行时数据区 字节码执行引擎 运行时数据区 线程私有 虚拟机栈本地方法栈程序计数器 线程共享 堆方法区&#xff08;元空间&#xff09;

基于Vue的分类招生App设计与实现

目 录 摘 要 I Abstract II 引 言 1 1 绪论 3 1.1 项目的研究背景与意义 3 1&#xff0e;1 研究背景 31&#xff0e;2 研究意义 3 1.2 研究现状 4 1.3 技术简介 43&#xff0e;1 前端开发技术 43&#xff0e;2 服务端开发技术 53&#xff0e;3 数据库 6 1.4 本章小结 6 2 项目…

MercadoLibre(美客多)运营策略:补单操作的重要性与条件要求

在美客多平台上&#xff0c;许多商家普遍认为&#xff0c;店铺的重要性远超产品本身&#xff0c;同时竞争环境也显得相对宽松。因此&#xff0c;他们倾向于认为在美客多进行补单操作并非必要之举。然而&#xff0c;深入剖析美客多平台的运营规则后&#xff0c;我们不难发现补单…

基于springboot的大学生智能消费记账系统的设计与实现(程序+数据库+文档)

** &#x1f345;点赞收藏关注 → 私信领取本源代码、数据库&#x1f345; 本人在Java毕业设计领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#xff0c;希望你能有所收获&#xff0c;少走一些弯路。&#x1f345;关注我不迷路&#x1f345;** 一、研究背景…

nestjs10.x使用jwt生成token

1 安装依赖&#xff1a; pnpm install --save nestjs/jwtpnpm install passport passport-jwt nestjs/jwtpnpm install types/passport-jwt --save-dev 2 可以使用命令新建auth鉴权文件夹 nest g mo auth // auth.module.ts nest g s auth // auth.service.ts nest g co …