elementUi中的el-table表格的内容根据后端返回的数据用不同的颜色展示

news2024/10/5 19:38:55

效果图如下:

首先

首先:需要在表格行加入 <template slot-scope="{ row }"> </template>标签

 <el-table-column  prop="usable" align="center" label="状态" width="180" >
            <template slot-scope="{ row }">
              <span :class="fontLightClass(row.usable)">{{  row.usable ==true ? "启用" : "停用"}}</span>
            </template>
          </el-table-column>

 2.在methods里面加入这个方法:

  fontLightClass(usable){
      if(usable == true){
    		return 'fgreen'
    }else{
      return 'fred'
    }
    },

 3.去设置自己喜欢的颜色:

<style scoped>

.fred {
  color: red;
}
.fgreen {
  color: green;
}

</style>

//还有另一种(这种后端返回的数据里面带有背景色的字段)

 <el-table-column prop="risk_level_name" align="center" label="风险等级"   width="180" >
          <template slot-scope="{ row }">
            <div
              :style="{
                marginLeft: 18 + '%',
                textAlign: 'center',
                width: 98 + 'px',
                color: '#333333 !important',
                backgroundColor: 'rgb(' + row.color_value + ')',
              }">
              <label>{{ row.risk_level_name }}</label>
            </div>
          </template>
        </el-table-column>

 

 

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

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

相关文章

MPC模型预测控制器学习笔记(附程序)

本文用于记录学习DR_CAN老师发布的MPC系列视频教程的相关内容&#xff0c;文章中放的源码也是DR_CAN老师提供的程序示例&#xff0c;链接如下&#xff1a; DR_CAN老师的视频教程链接&#xff08;点击可跳转&#xff09; DR_CAN老师提供的程序示例&#xff08;点击可跳转&#x…

探索三丰云:免费虚拟主机与云服务器的新选择**

随着云计算技术的飞速发展&#xff0c;我们有了更多的选择来满足我们的在线业务需求。今天&#xff0c;我想向大家推荐一款我最近发现的优质服务——三丰云。 三丰云&#xff08;https://www.sanfengyun.com&#xff09;是一家提供免费虚拟主机和免费云服务器的公司&#xff0…

热门框架漏洞

文章目录 一、Thinkphp5.0.23 代码执行1.thinkphp5框架2.thinkphp5高危漏洞3.漏洞特征4.THinkphp5.0 远程代码执行--poc5.*TP5实验一(Windows)a.搭建实验环境b.测试phpinfoc.写入shelld.使用菜刀连接 6.*TP5实验二(Linux)a.测试方法b.测试phpinfoc.写入shelld.反弹shell&#x…

Windows系统中Apache Http服务器简单使用

1 简介 Apache HTTP服务器是一个开源的、跨平台的Web服务器软件。它由Apache软件基金会开发和维护。Apache HTTP服务器可以在多种操作系统上运行&#xff0c;如Windows、Linux、Unix等&#xff0c;并且支持多种编程语言和技术&#xff0c;如PHP、Perl、Python、Java等。…

物联网智慧种植农业大棚系统

一、项目背景 智慧农业是是将物联网技术和农业生产箱管理的新型农业&#xff0c;依托部署在农业生产现场的各种传感节点&#xff0c;以物联网网关为通道形成数据传输网络&#xff0c;可以实现控制柜、环境监测传感器、气象监测机器等设备的远程监控&#xff0c;达到及时高校的…

docker 安装 Nginx

1、下载 docker pull nginx:latest 2、本地创建管理目录 mkdir -p /var/docker/nginx/conf mkdir -p /var/docker/nginx/log mkdir -p /var/docker/nginx/html 3、将容器中的相应文件复制到管理目录中 /usr/docker/nginx docker run --name nginx -p 80:80 -d nginxdocke…

小猫爪:嵌入式小知识18-XCP SeedNKey.dll

小猫爪&#xff1a;嵌入式小知识18-XCP SeedNKey.dll 0 目录1 前言2 生成DLL2.1 下载模板代码2.2 函数简介2.2 DLL编译 3 使用DLLEND 0 目录 小猫爪&#xff1a;嵌入式小知识15-XCP基础简介小猫爪&#xff1a;嵌入式小知识16-XCP协议简介小猫爪&#xff1a;嵌入式小知识17-XCP…

OpenGl图像的位移及旋转

一般而言&#xff0c;改变物体的位置时&#xff0c;需要改变每一帧所有顶点的坐标&#xff0c;计算量巨大 可以将每一个顶点用向量值表示&#xff0c;使用位移矩阵&#xff0c;缩放矩阵&#xff0c;旋转矩阵对顶点进行操作。 顶点着色器&#xff1a; #version 330 core layo…

LeetCode--HOT100题(46)

目录 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;114. 二叉树展开为链表&#xff08;中等&#xff09; 给你二叉树的根结点 root &#xff0c;请你将它展开为一个单链表&#xff1a; 展开后的单链…

解决Jackson解析JSON时出现的Illegal Character错误

&#x1f337;&#x1f341; 博主猫头虎 带您 Go to New World.✨&#x1f341; &#x1f984; 博客首页——猫头虎的博客&#x1f390; &#x1f433;《面试题大全专栏》 文章图文并茂&#x1f995;生动形象&#x1f996;简单易学&#xff01;欢迎大家来踩踩~&#x1f33a; &a…

微信小程序echart导出图片

echarts版本5.1.0 用到的echarts组件是uni插件市场的echart组件 <div style"overflow: hidden;"><dCanvas class"uni-ec-canvass" id"uni-ec-canvas" ref"canvas" canvas-id"mychart-gauge" :ec"ec"&g…

恒运资本:如何利用股票筹码进行选股?有什么方法?

在进行股票之前最重要的便是进行股票的挑选&#xff0c;股票挑选有许多办法&#xff0c;比如说消息面选股、使用筹码进行选股等。那么怎么使用股票筹码进行选股&#xff1f;有什么办法&#xff1f;就下面就由恒运资本为大家剖析&#xff1a; 投资者能够根据以下筹码变动特点来进…

基于猎食者算法优化的BP神经网络(预测应用) - 附代码

基于猎食者算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码 文章目录 基于猎食者算法优化的BP神经网络&#xff08;预测应用&#xff09; - 附代码1.数据介绍2.猎食者优化BP神经网络2.1 BP神经网络参数设置2.2 猎食者算法应用 4.测试结果&#xff1a;5.Matlab代…

QT基础教程之八Qt消息机制和事件

QT基础教程之八Qt消息机制和事件 QPainter Qt 的绘图系统允许使用相同的 API 在屏幕和其它打印设备上进行绘制。整个绘图系统基于QPainter&#xff0c;QPainterDevice和QPaintEngine三个类。 QPainter用来执行绘制的操作&#xff1b;QPaintDevice是一个二维空间的抽象&#…

【已解决】激活虚拟环境报错:此时不应有Anaconda3\envs\[envs]\Library\ssl\cacert.pem。

新建虚拟环境后&#xff0c;进入虚拟环境的时候出现这样的报错&#xff1a; 此时不应有Anaconda3 envs yolov5 Library ssl cacert.pem。 但是之前装的虚拟环境也还能再次激活&#xff0c;base环境也无任何问题&#xff0c;仅新装的虚拟环境无法激活。 查遍了百度谷歌&#xff…

鸿蒙系列-如何使用好 ArkUI 的 @Reusable?

如何使用好 ArkUI 的 Reusable&#xff1f; OpenHarmony 组件复用机制 在ArkUI中&#xff0c;UI显示的内容均为组件&#xff0c;由框架直接提供的称为 系统组件&#xff0c;由开发者定义的称为 自定义组件。 在进行 UI 界面开发时&#xff0c;通常不是简单的将系统组件进行组合…

classpath:和classpath*:的区别

1、classpath是什么 classpath是指编译之后的target中的classes目录&#xff0c;该目录中存放的内容和源程序中对应的例子如下&#xff1a; 2、classpath:和classpath*:的区别 classpath&#xff1a; 只会到你的target下面的class路径中查找找文件 classpath*&#xff1a; …

使用 Python编程: 下载 YouTube 音频的桌面应用程序

最近我开发了一个使用 Python 编写的桌面应用程序&#xff0c;可以方便地下载 YouTube 音频。该应用程序使用了 wxPython、yt_dlp 和 tqdm 库&#xff0c;提供了一个简单直观的用户界面&#xff0c;并具备高效的下载功能。 C:\pythoncode\new\youtube-dl-audio.py 程序介绍 …

在 Spring Boot 中集成 MinIO 对象存储

MinIO 是一个开源的对象存储服务器&#xff0c;专注于高性能、分布式和兼容S3 API的存储解决方案。本文将介绍如何在 Spring Boot 应用程序中集成 MinIO&#xff0c;以便您可以轻松地将对象存储集成到您的应用中。 安装minio 拉取 minio Docker镜像 docker pull minio/minio创…

Linux串口驱动

《I.MX6ULL 参考手册》第 3561 页的“Chapter 55 Universal Asynchronous Receiver/Transmitter(UART) I.MX6ULL串口原理 1.1UART与USART UART是异步通信&#xff0c;USART是异步/同步通信&#xff0c;比UART多了一条时钟线 USART 的全称是 Universal Synchronous/Asynchr…