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.rhkb.cn/news/124057.html

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

相关文章

【业务功能篇91】微服务-springcloud-多线程-线程池执行顺序

一、线程的实现方式 1. 线程的实现方式 1.1 继承Thread class ThreadDemo01 extends Thread{Overridepublic void run() {System.out.println("当前线程:" Thread.currentThread().getName());} }1.2 实现Runnable接口 class ThreadDemo02 implements Runnable{…

20个经典巧妙电路合集

1、防反接保护&#xff08;二极管&#xff09; 在实际电子设计中&#xff0c;防反接保护电路非常重要&#xff0c;不要觉得自己肯定不会接错&#xff0c;实际上无论多么小心&#xff0c;还是会犯错误...... 最简单的就是利用二极管了&#xff0c;利用二极管的单向导电性&#…

米贸搜什么是网站排名流量

当谈到数字营销时&#xff0c;你的网站应该作为线上营销的中心枢纽。包括&#xff1a;Ads付费广告、EDM邮件营销、SEO搜索引擎优化等都旨在吸引用户访问你的网站&#xff0c;并在网站上进行深度转化。 被广泛应用且最有效的营销策略之一就是SEO&#xff0c;流量排名是衡量网站受…

管理类联考——数学——汇总篇——知识点突破——数据分析——计数原理——减法原理除法原理

减法原理 正面难则反着做(“ − - −”号) 【思路】当出现“至少、至多”、“否定用语"等正面较难分类的题目&#xff0c;可以采用反面进行求解&#xff0c;注意部分反面的技巧以及“且、或"的反面用法。 除法原理 看到相同&#xff0c;定序用除法消序( “ &quo…

数据结构--5.0.1图的存储结构

目录 一、邻接矩阵&#xff08;无向图&#xff09; 二、邻接矩阵&#xff08;有向图&#xff09; 三、邻接矩阵&#xff08;网&#xff09; 四、邻接表&#xff08;无向图&#xff09; 五、邻接表&#xff08;有向图&#xff09; ——图的存储结构相比较线性表与树来说就复…

ChatGPT 总结数据分析的所有知识点

ChatGPT功能非常多,特别是对某个行业,某个方向,某个技术进行总结那是相当专业的。 如下图。 直接用一个指令便总结出来数据分析当中的所有知识点内容。 AIGC ChatGPT ,BI商业智能, 可视化Tableau, PowerBI, FineReport, 数据库Mysql Oracle, Office, Python ,ETL Ex…

UE4/UE5 动画控制

工程下载​ ​​​​​​​​​​​​​https://mbd.pub/o/bread/ZJ2cm5pu 蓝图控制sequence播放/倒播动画&#xff1a; 设置开启鼠标指针&#xff0c;开启鼠标事件 在场景中进行过场动画制作 设置控制事件

Excel VSTO开发5 -Excel对象结构

版权声明&#xff1a;本文为博主原创文章&#xff0c;转载请在显著位置标明本文出处以及作者网名&#xff0c;未经作者允许不得用于商业目的。 5 Excel对象结构 Excel提供了几个比较重要的对象&#xff1a; Application、Workbooks、Workbook、Worksheets、Worksheet 为了便…

I.MX RT1176笔记(9)-- 程序异常追踪(CmBacktrace 和 segger rtt)

前言 在使用 ARM Cortex-M 系列 MCU时候&#xff0c;有时候会遇到各种异常&#xff08;Hard Fault, Memory Management Fault, Bus Fault, Usage Fault, Debug Fault&#xff09;&#xff0c;这时候我们根据经验查询PC指针&#xff0c;LR寄存器&#xff0c;堆栈数据定位地址然…

2023 年全国大学生数学建模D题目-圈养湖羊的空间利用率

D题目应该是专科题目&#xff1f;&#xff1f;&#xff1f;不确定了 感觉类似一个细胞分裂问题一样&#xff0c;1&#xff0c;2&#xff0c;4&#xff0c;8&#xff0c; 题目1中规中矩 按照前面说的分配方法&#xff0c;一步一步计算进行 缺口的问题考虑反推回去&#xff0c…

Friend.tech热潮未过,在推特刷屏的TipCoin又是个啥?

Web3社交赛道风起云涌&#xff0c;Friend.tech的热潮还没过&#xff0c;最近又有一款名为Tip Coin社交项目在X&#xff08;前Twitter&#xff09;开始刷屏。 TipCoin作为一款社交类区块链项目依托于X平台&#xff0c;用户通过在X平台上发布内容来进行“挖矿”&#xff0c;获得项…

计算机安全学习笔记(IV):基于角色的访问控制 - RBAC

RBAC(Role-Based Access Control)基于用户在系统中设定的角色而不是用户的身份。一般来说&#xff0c;RBAC模型定义角色为组织中的一项工作职责&#xff0c;RBAC系统给角色而不是给单独的用户分配访问权。用户根据他们的职责被静态地或动态地分配给不同的角色。 RBAC模型间的关…

uniapp 路由不要显示#

在Uniapp中&#xff0c;路由默认使用的是hash模式&#xff0c;即在URL中添加#符号。如果你不想在URL中显示#&#xff0c;可以切换为使用history模式。 要在Uniapp中使用history模式&#xff0c;可以按照以下步骤进行操作&#xff1a; 打开manifest.json文件。在"app&qu…

达之云BI平台助力中国融通集团陕西军民服务社有限公司实现数字化运营

中国融通集团陕西军民服务社是一家大型综合类零售购物中心&#xff0c;公司目前管理系统运行了10年左右&#xff0c;面临系统新零售支持发展严重滞后&#xff0c;行业主流应用落地困难&#xff0c;如线上业务、到家业务、全渠道营销、电子发票、自助收银、扫码购、无感停车、未…

2023高教社杯数学建模国赛的工具箱准备

2023高教社杯数学建模国赛的工具箱准备 数学建模国赛工具箱&#xff08;私信领取&#xff09;&#xff01;&#xff01;&#xff01;小编仔细阅读了比赛官方网站上的规则和要求&#xff0c;以及比赛的题型和时间安排&#xff0c;现总结分享给大家。欢迎私信和评论&#xff0c;…

【大麦小米学量化】使用天勤TqSdk实现期货量化交易(入门)

文章目录 酱香拿铁的故事一、TqSdk 是什么&#xff1f;二、准备工作1. 安装tqsdk库&#xff08;Python环境提前准备好&#xff09;2. 注册快期账户3. 支持的期货公司&#xff08;更新以官方公布为准&#xff09; 三、初试牛刀1. 示例代码&#xff1a;2. 运行后提示如下&#xf…

JavaScript 之 Symbol 数据类型

一、简介 ​ symbol类型是ES6新引入的一种基本数据类型&#xff0c;该类型具有静态属性和静态方法。其中静态属性暴露了几个内建的成员对象&#xff0c;静态方法暴露了全局的symbol注册。 ​ symbol类型具有以下特点&#xff1a;① 唯一性&#xff1a;每个symbol值都是唯一的…

Day_81-87 CNN卷积神经网络

目录 一. CNN卷积神经网络与传统神经网络的不同 1. 模型图 2. 参数分布情况 3. 卷积神经网络和传统神经网络的层次结构 4. 传统神经网络的缺点&#xff1a; 二. CNN的基本操作 1. 卷积 2. 池化 三. CNN实现过程 1. 算法流程图 2. 输入层 3. 卷积层 4. 激活层 5. 池化层 6. 全连…

监控系统典型架构

监控系统典型架构如下&#xff1a; 从左往右看&#xff1a; 采集器是负责采集监控数据的&#xff0c;采集到数据之后传输给服务端&#xff0c;通常是直接写入时序库。 对时序库的数据进行分析和可视化。 告警引擎产生告警事件之后交给告警发送模块做不同媒介的通知。 可视化比…

Ubuntu下QT操作Mysql数据库

本篇总结一下一下Ubuntu下QT操作Mysql数据库。 目录 1. 启动Mysql数据库服务器 2.查看QT支持的数据库驱动 3.连接数据库 4. 增加表和记录 5. 删除记录 6. 修改记录 7. 查询记录 8.完整代码和运行效果 常见错误总结&#xff1a; (1) 数据库服务没启动报错信息 (2) 有…