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

效果图如下:

首先

首先:需要在表格行加入 <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.mzph.cn/news/60031.shtml

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

相关文章

LeetCode——最大子数组和(中等)

题目 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连续部分。 示例 1&#xff1a; 输入&#xff1a;nums [-2,1,-3,4,-1,2,1,-5,4] 输出&#x…

ELK安装、部署、调试 (二) ES的安装部署

ElasticSearch是一个基于Lucene的搜索服务器。它提供了一个分布式多用户能力的全文搜索引擎&#xff0c;基于RESTful web接口操作ES&#xff0c;也可以利用Java API。Elasticsearch是用Java开发的&#xff0c;并作为Apache许可条款下的开放源码发布&#xff0c;是当前流行的企业…

C. Divisor Chain Harbour.Space Scholarship Contest 2023-2024 (Div. 1 + Div. 2)

Problem - C - Codeforces 题目大意&#xff1a;给出一个数k&#xff0c;每次操作可以选择当前k的一个因数x&#xff0c;并令kk-x&#xff0c;要求令k变成1&#xff0c;且相同的x 出现次数不超过2&#xff0c;最大操作次数1000 2<k<1e9 思路&#xff1a;因为每个数的l…

Linux 桌面上的 Firefox 面临着大问题

导读毫无疑问&#xff0c;无论是在桌面、笔记本电脑还是移动设备上&#xff0c;浏览器都是任何操作系统中最重要的应用之一。 如果没有一个功能强大、快速且稳定的浏览器&#xff0c;操作系统的实用性将大幅度降低&#xff0c;以至于我相当确定&#xff0c;如果一个操作系统没有…

十年JAVA搬砖路——软件工程概述

软件工程是一门关注软件开发过程的学科&#xff0c;它涉及到软件的设计、开发、测试、部署和维护等方面。软件工程的目标是通过系统化的方法和工具&#xff0c;以确保软件项目能够按时、按预算和按要求完成。 **• 软件工程的7个基本概念&#xff1a; ** **1. 软件生命周期&…

在阿里云请求发短信接口去掉证书验证

composer require alibabacloud/dysmsapi-20170525 2.0.23 cURL error 60: SSL certificate problem: unable to get local issuer certificate (see https://curl.haxx.se/libcurl/c/libcurl-errors.html) for https://dysmsapi.aliyuncs.com/?PhoneNumbers 两种方法 第一…

Mysql的page,索引,Explain Type等基本常识

Mysql的基本问题 Mysql 为什么建议使用自增id&#xff1f; 因为id&#xff08;主键&#xff09;是自增的话&#xff0c;那么在有序的保存用户数据到页中的时候&#xff0c;可以天然的保存&#xff0c;并且是在聚集索引&#xff08;id&#xff09;中的叶子节点可以很好的减少插…

MATLAB算法实战应用案例精讲-【概念篇】构建数据指标方法

目录 前言 几个相关概念 算法原理 什么是数据指标体系?

WebGL非矩阵变换

目录 平移 示例代码&#xff1a; 齐次坐标矢量的最后一个分量w 旋转 p的坐标&#xff0c;可得等式 R1&#xff1a; 使用r、α、β来表示点p的坐标&#xff0c;可得等式 R2&#xff1a; 利用三角函数两角和公式&#xff0c;可得等式 R3&#xff1a; 最后&#xff0c;将…

下岗吧,Excel

ChatGPT的诞生使Excel公式变得过时。通过使用 ChatGPT 的代码解释器你可以做到&#xff1a; 分析数据创建图表 这就像用自然语言与电子表格交谈一样。我将向大家展示如何使用 ChatGPT 执行此操作并将结果导出为Excel格式&#xff1a; 作为示例&#xff0c;我将分析并创建美国…

阿里云效和阿里在线idea使用

阿里云效 https://flow.aliyun.com/all?page1 阿里在线idea&#xff1a;https://ide.aliyun.com/ 在云效中创建的项目可以在在线idea 打开 运行中的项目 设置ssh 设置以后可以使用云效率的代码构建来构建代码 设置 添加自有云或者体验5h

元素居中的方法总结

目录 垂直居中 行内元素垂直居中 单行文本垂直居中 1.line-height: 200px; 多行文本垂直居中 1.tablevertical-align:middle 块级元素垂直居中 1.display: flex;align-items: center; 2.使用position top margin-top 水平居中 行内元素水平居中 1.text-align:cente…

uniapp 滚动到指定元素的位置(锚点)

需求&#xff1a;在页面中&#xff0c;不管位于何处&#xff0c;点击按钮页面滚动到对应的标题位置。 最简单有效的方式&#xff08;直接复制改数据就行&#xff09; 使用 scroll-view 标签的属性&#xff1a;scroll-top(距离值 num) 或 scroll-into-view(子元素的id,不能以…

如何让你的jupyter notebook 排版得像Word(Markdown和网页文件写法)

案例背景 很多时候我们在jupyter notebook里面的写代码&#xff0c;画图&#xff0c;但是文字分析什么的写在里面纯文本不好看&#xff0c;需要进行排版&#xff0c;那么就得用markdown的写法&#xff0c;如何还想居中或者更花里胡哨的字体&#xff0c;那就得要网页文件的一些…

阿里云将关停代销业务

我是卢松松&#xff0c;点点上面的头像&#xff0c;欢迎关注我哦&#xff01; 阿里云自从逐渐分拆独立之后&#xff0c;做了很多调整。最近它又做了一个大动作&#xff1a;据DoNews消息&#xff0c;阿里云将会在今年9月30日之前&#xff0c;全面关停代销业务。 这件事实际上…

mysql profiling profiles profile

要想优化一条 Query&#xff0c;我们就需要清楚的知道这条 Query 的性能瓶颈到底在哪里&#xff0c;是消耗的 CPU计算太多&#xff0c;还是需要的的 IO 操作太多&#xff1f;要想能够清楚的了解这些信息&#xff0c;在 MySQL 5.0 和 MySQL 5.1正式版中已经可以非常容易做到了&a…

剑走偏锋:非传统问题在面试中的应对策略

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

滑动窗口系列4-Leetcode322题零钱兑换-限制张数-暴力递归到动态规划再到滑动窗口

这个题目是Leecode322的变种&#xff0c;322原题如下&#xff1a; 我们这里的变化是把硬币变成可以重复的&#xff0c;并且只有coins数组中给出的这么多的金币&#xff0c;也就是说有数量限制&#xff1a; package dataStructure.leecode.practice;import java.util.Arrays; i…

用NeRFMeshing精确提取NeRF网络中的3D网格

准确的 3D 场景和对象重建对于机器人、摄影测量和 AR/VR 等各种应用至关重要。 NeRF 在合成新颖视图方面取得了成功&#xff0c;但在准确表示底层几何方面存在不足。 推荐&#xff1a;用 NSDT编辑器 快速搭建可编程3D场景 我们已经看到了最新的进展&#xff0c;例如 NVIDIA 的…

get和post请求的区别

GET和POST是HTTP请求的两种方法,其区别如下 ① GET请求表示从指定的服务器中获取数据(请求数据),比如查询用户信息;POST请求表示将数据提交到指定的服务器进行处理(发送数据), ② GET请求是一个幂等的请求,一般用于对服务器资源不会产生影响的场景,比如说请求一个网友的…