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

news/2025/2/5 5:08: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.ppmy.cn/news/1081183.html

相关文章

Python中异步编程是什么意思? - 易智编译EaseEditing

异步编程是一种编程模式&#xff0c;用于处理可能会导致程序等待的操作&#xff0c;例如网络请求、文件读写或长时间的计算任务&#xff0c;而不会阻塞整个程序的执行。 在传统的同步编程中&#xff0c;当程序执行一个耗时的操作时&#xff0c;它会等待该操作完成&#xff0c;…

数据治理-数据管理成熟度评估

是什么&#xff1f; 能力成熟度评估是一种基于能力成熟度模型框架的能力提升方案&#xff0c;描述了数据管理能力初始状态发展到最优化的过程。 历史发展 能力成熟度评估概念源于美国国防部为评估软件承包商而建立的标准。20世纪80年代中期&#xff0c;卡内基梅隆大学软件工程…

STS4 New 安装Spring Bean Configuration File

背景介绍 在创建spring项目后&#xff0c;如果想想创建spring bean Configuration的时候&#xff0c;发下菜单没有这个选项&#xff0c;需要通过下载Spring Roo插件可满足该操作。 参考案例 参考地址&#xff1a; STS4 New 菜单没有Spring Bean Configuration File选项_SQZHA…

stable diffusion实践操作-提示词

系列文章目录 stable diffusion实践操作 stable diffusion实践操作-提示词-人物属性 stable diffusion实践操作-提示词-人物服饰 stable diffusion实践操作-提示词-整体环境 stable diffusion实践操作-提示词-图片结构 stable diffusion实践操作-CLIP 文章目录 系列文章目录前…

Windows10上使用llama-recipes(LoRA)来对llama-2-7b做fine-tune

刚刚在Windows10上搭建环境来对llama2做finetune&#xff0c;里面坑还是挺多的&#xff0c;这里把印象中的坑整理了一下以作备忘。 llama-recipes是meta的开源项目&#xff0c;Github地址为&#xff1a;GitHub - facebookresearch/llama-recipes: Examples and recipes for Ll…

数据结构-第一期——数组(Python)

目录 00、前言&#xff1a; 01、一维数组 一维数组的定义和初始化 一维变长数组 一维正向遍历 一维反向遍历 一维数组的区间操作 竞赛小技巧&#xff1a;不用从a[0]开始&#xff0c;从a[1]开始 蓝桥杯真题练习1 读入一维数组 例题一 例题二​ 例题三 实战训…

python web 开发与 Node.js + Express 创建web服务器入门

目录 1. Node.js Express 框架简介 2 Node.js Express 和 Python 创建web服务器的对比 3 使用 Node.js Express 创建web服务器示例 3.1 Node.js Express 下载安装 3.2 使用Node.js Express 创建 web服务器流程 1. Node.js Express 框架简介 Node.js Express 是一种…

Qt —UDP通信QUdpSocket 简介 +案例

1. UDP通信概述 UDP是无连接、不可靠、面向数据报&#xff08;datagram&#xff09;的协议&#xff0c;可以应用于对可靠性要求不高的场合。与TCP通信不同&#xff0c;UDP通信无需预先建立持久的socket连接&#xff0c;UDP每次发送数据报都需要指定目标地址和端口。 QUdpSocket…