当前位置: 首页 > news >正文

若依框架给字典字段新增color值,并且实现下拉列表选项进行颜色设置

首先获取所要新增的字典,并且根据字典的value值选取对应的颜色参数

this.getDicts("risk_level").then(response => {const color = {mild:'#F1F4BD',moderate:'#EEC920',severe:'#FF6C0D',very_severe:'#FF0000',no_harm:'green'};const res = response.data.map((item)=>{return {color:color[item.dictValue],...item}});this.risk_level_color = res;console.log(this.risk_level_color);
});

前端显示

el-option渲染,使用v-html进行渲染

<el-form-item label="风险等级" prop="riskLevel"><el-selectv-model="queryParams.riskLevel"placeholder="风险等级"clearablestyle="width: 240px"ref="measureParamLevelId"@change="chageTextColor($event,'measureParamLevelId')"><el-optionv-for="dict in risk_level_color":key="dict.dictValue":label="dict.dictLabel":value="dict.dictValue"v-html="'<span style=color:'+dict.color+'>'+dict.dictLabel+'</span>'"/></el-select></el-form-item>

method方法

chageTextColor($event, selectedRef) {const color = this.risk_level_color.filter((item)=>{return item.dictValue==$event})[0].color;// 改变下拉框颜色值this.$refs[selectedRef].$el.children[0].children[0].style.color = '' + color + ''},

相关文章:

若依框架给字典字段新增color值,并且实现下拉列表选项进行颜色设置

首先获取所要新增的字典&#xff0c;并且根据字典的value值选取对应的颜色参数 this.getDicts("risk_level").then(response > {const color {mild:#F1F4BD,moderate:#EEC920,severe:#FF6C0D,very_severe:#FF0000,no_harm:green};const res response.data.map(…...

JDK 8 升级 JDK 17 全流程教学指南

JDK 8 升级 JDK 17 首先已有项目升级是会经历一个较长的调试和自测过程来保证允许和兼容没有问题。先说几个重要的点 遇到问题别放弃仔细阅读报错&#xff0c;精确到每个单词每一行&#xff0c;不是自己项目的代码也要点进去看看源码到底是为啥报错明确你项目引入的包&#x…...

Docker 网络之 ipvlan 和 macvlan

Docker ipvlan 和 macvlan 引言 本文讲解了Docker 网络模式中的 ipvlan 和 macvlan 的区别,目前自己在生产环境中使用的 ipvlan 模式非常问题.也解决了实际业务问题. IPvlan L2 mode example ipvlan 无需网卡混杂模式 , 运行如下命令后可以生成一个 vlan 子接口 , 会和主网卡…...

【Rust】Rust学习 第十三章Rust 中的函数式语言功能:迭代器与闭包

Rust 的设计灵感来源于很多现存的语言和技术。其中一个显著的影响就是 函数式编程&#xff08;functional programming&#xff09;。函数式编程风格通常包含将函数作为参数值或其他函数的返回值、将函数赋值给变量以供之后执行等等。 更具体的&#xff0c;我们将要涉及&#…...

【Linux操作系统】详解Linux系统编程中的管道进程通信

在Linux系统编程中&#xff0c;管道是一种常用的进程间通信方式。它可以实现父子进程之间或者兄弟进程之间的数据传输。本文将介绍如何使用管道在Linux系统中进行进程通信&#xff0c;并给出相应的代码示例。 文章目录 1. 管道的概念2. 管道的创建和使用2.1 原型2.2 示例 3. 父…...

【Redis从头学-4】Redis中的String数据类型实战应用场景之验证码、浏览量、点赞量、Json格式存储

&#x1f9d1;‍&#x1f4bb;作者名称&#xff1a;DaenCode &#x1f3a4;作者简介&#xff1a;啥技术都喜欢捣鼓捣鼓&#xff0c;喜欢分享技术、经验、生活。 &#x1f60e;人生感悟&#xff1a;尝尽人生百味&#xff0c;方知世间冷暖。 &#x1f4d6;所属专栏&#xff1a;Re…...

linux 统计命令

统计命令 使用wc来进行统计 # wc [选项] 文件名wc -l a 2 awc -w a 8 a---------------l 统计行数-w 统计单词数-m 统计字符数-c 统计字节数 https://zhhll.icu/2021/linux/基础/统计命令/ 本文由 mdnice 多平台发布...

docker部署springboot应用

一、下载安装docker curl -fsSL https://get.docker.com | bash -s docker --mirror Aliyun 启动&#xff1a;systemctl start docker 二、配置国内镜像源 &#xff08;1&#xff09;在/etc/docker目录中添加daemon.json文件&#xff0c;内容如下&#xff1a; { …...

YOLO v5、v7、v8 模型优化

YOLO v5、v7、v8 模型优化 魔改YOLOyaml 文件解读模型选择在线做数据标注 YOLO算法改进YOLOv5yolo.pyyolov5.yaml更换骨干网络之 SwinTransformer更换骨干网络之 EfficientNet优化上采样方式&#xff1a;轻量化算子CARAFE 替换 传统&#xff08;最近邻 / 双线性 / 双立方 / 三线…...

回归预测 | MATLAB实现SSA-BP麻雀搜索算法优化BP神经网络多输入单输出回归预测(多指标,多图)

回归预测 | MATLAB实现SSA-BP麻雀搜索算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09; 目录 回归预测 | MATLAB实现SSA-BP麻雀搜索算法优化BP神经网络多输入单输出回归预测&#xff08;多指标&#xff0c;多图&#xff09;效果一览基本…...

QT的mysql(数据库)最佳实践和常见问题解答

涉及到数据库&#xff0c;首先安利一个软件Navicat Premium&#xff0c;用来查询数据库很方便 QMysql驱动是Qt SQL模块使用的插件&#xff0c;用于与MySQL数据库进行通信。要编译QMysql驱动&#xff0c;您需要满足以下条件&#xff1a; 您需要安装MySQL的客户端库和开发头文件…...

使用PyMuPDF库的PDF合并和分拆程序

PDF工具应用程序是一个使用wxPython和PyMuPDF库编写的简单工具&#xff0c;用于合并和分拆PDF文件。它提供了一个用户友好的图形界面&#xff0c;允许用户选择源文件夹和目标文件夹&#xff0c;并对PDF文件进行操作。 C:\pythoncode\blog\pdfmergandsplit.py 功能特点 选择文…...

2023/8/18 - You need to rely on yourself to achieve the life you want

...

Data Abstract for .NET and Delphi Crack

Data Abstract for .NET and Delphi Crack .NET和Delphi的数据摘要是一套或RAD工具&#xff0c;用于在.NET、Delphi和Mono中编写多层解决方案。NET和Delphi的数据摘要是一个套件&#xff0c;包括RemObjects.NET和Delphi版本的数据摘要。RemObjects Data Abstract允许您创建访问…...

Eclipse集成MapStruct

Eclipse集成MapStruct 在Eclipse中添加MapStruct依赖配置Eclipse支持MapStruct①安装 m2e-aptEclipse Marketplace的方式安装Install new software的方式安装&#xff08;JDK8用到&#xff09; ②添加到pom.xml 今天拿到同事其他项目的源码&#xff0c;导入并运行的时候抛出了异…...

采用pycharm在虚拟环境使用pyinstaller打包python程序

一年多以前&#xff0c;我写过一篇博客描述了如何虚拟环境打包&#xff0c;这一次有所不同&#xff0c;直接用IDE pycharm构成虚拟环境并运行pyinstaller打包 之前的博文&#xff1a; 虚拟环境venu使用pyinstaller打包python程序_伊玛目的门徒的博客-CSDN博客 第一步&#xf…...

Rx.NET in Action 中文介绍 前言及序言

Rx 处理器目录 (Catalog of Rx operators) 目标可选方式Rx 处理器(Operator)创建 Observable Creating Observables直接创建 By explicit logicCreate Defer根据范围创建 By specificationRangeRepeatGenerateTimerInterval Return使用预设 Predefined primitivesThrow …...

Azure Blob存储使用

创建存储账户,性能选择标准即可&#xff0c;冗余选择本地冗余存储即可 容器选择类别选择专用即可 可以上传文件到blob中 打开文件可以看到文件的访问路径 4.编辑中可以修改文件 复制链接&#xff0c;尝试访问&#xff0c;可以看到没有办法访问&#xff0c;因为创建容器的时候选…...

mysql、redis面试题

mysql 相关 1、数据库优化查询方法 外键、索引、联合查询、选择特定字段等等2、简述mysql和redis区别 redis&#xff1a; 内存型非关系数据库&#xff0c;数据保存在内存中&#xff0c;速度快mysql&#xff1a;关系型数据库&#xff0c;数据保存在磁盘中&#xff0c;检索的话&…...

22、touchGFX学习Model-View-Presenter设计模式

touchGFX采用MVP架构&#xff0c;如下所示&#xff1a; 本文界面如下所示&#xff1a; 本文将实现两个操作&#xff1a; 1、触摸屏点击开关按键实现打印开关显示信息&#xff0c;模拟开关灯效果 2、板载案按键控制触摸屏LED灯的显示和隐藏 一、触摸屏点击开关按键实现打印开…...

终极解决方案:3分钟免费恢复微信网页版完整访问权限

终极解决方案&#xff1a;3分钟免费恢复微信网页版完整访问权限 【免费下载链接】wechat-need-web 让微信网页版可用 / Allow the use of WeChat via webpage access 项目地址: https://gitcode.com/gh_mirrors/we/wechat-need-web 还在为微信网页版无法登录而烦恼吗&am…...

VisualHMI LUA脚本中get_float与set_float函数实战详解

1. 项目概述&#xff1a;从界面到逻辑的桥梁在工业HMI&#xff08;人机界面&#xff09;开发中&#xff0c;我们常常会遇到一个看似简单却至关重要的需求&#xff1a;如何让屏幕上显示的一个数值&#xff0c;与背后控制器&#xff08;如PLC&#xff09;里的一个浮点数寄存器精准…...

嵌入式硬件设计中的“隐形保镖”:电压跟随电路如何让你的系统更稳定?

嵌入式硬件设计中的“隐形保镖”&#xff1a;电压跟随电路如何让你的系统更稳定&#xff1f; 在复杂的嵌入式系统中&#xff0c;信号链的完整性往往决定了整个产品的可靠性。想象一下&#xff0c;当你精心设计的传感器数据经过长距离传输后&#xff0c;最终到达MCU时却出现了严…...

解锁AI编程新体验:开源助手完整配置指南

解锁AI编程新体验&#xff1a;开源助手完整配置指南 【免费下载链接】cursor-free-vip [Support 0.45]&#xff08;Multi Language 多语言&#xff09;自动注册 Cursor Ai &#xff0c;自动重置机器ID &#xff0c; 免费升级使用Pro 功能: Youve reached your trial request li…...

Vector CAN卡配置避坑指南:xlSetApplConfig函数详解与硬件通道分配实战

Vector CAN卡配置避坑指南&#xff1a;xlSetApplConfig函数详解与硬件通道分配实战 当你在深夜调试Vector CAN设备时&#xff0c;突然看到"Channel already assigned"的红色错误提示&#xff0c;是否感到一阵窒息&#xff1f;这种场景对于使用Vector硬件进行二次开发…...

理发师会被 AI 取代吗?这可能是 AI 时代最有意思的一个社会学问题

今天去理发了。对着镜子&#xff0c;看着我的头发随着剪刀的飞舞一点点掉下来时&#xff0c;我忽然开始神游&#xff1a;AI 会不会取代理发师&#xff1f; 这问题乍一听有点像胡思乱想&#xff0c;可越想越觉得&#xff0c;它其实非常适合拿来当成 AI 时代的一块切片。 因为理发…...

新手开发者第一步,在Taotoken平台获取API Key并完成基础验证

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 新手开发者第一步&#xff0c;在Taotoken平台获取API Key并完成基础验证 对于希望快速体验和接入大模型能力的开发者而言&#xff…...

书成紫微动,律定凤凰驯:千古诗句留伏笔,只为海棠山铁哥而来

世间文字千万&#xff0c;唯有谶语藏岁月天机&#xff1b; 文坛更迭千载&#xff0c;唯有天命待当世真人。一、诗谶降世&#xff1a;「书成紫微动&#xff0c;律定凤凰驯」这不是文采佳句&#xff0c; 是华夏预埋千载的 隐秘伏笔&#xff0c; 是一场跨越世代的 天命预约。千年之…...

3步掌握天龙八部单机版数据编辑:从游戏管家到创意设计师的蜕变之路

3步掌握天龙八部单机版数据编辑&#xff1a;从游戏管家到创意设计师的蜕变之路 【免费下载链接】TlbbGmTool 某网络游戏的单机版本GM工具 项目地址: https://gitcode.com/gh_mirrors/tl/TlbbGmTool 你是否曾在天龙八部单机版中遇到过这样的困扰&#xff1a;角色成长太慢…...

Arm Corstone SSE-300内存架构与安全设计解析

1. Arm Corstone SSE-300内存架构深度解析在嵌入式系统设计中&#xff0c;内存映射是连接软件与硬件的关键纽带。作为Arm最新推出的子系统解决方案&#xff0c;Corstone SSE-300通过精心设计的内存架构&#xff0c;为开发者提供了高性能、高安全性的开发平台。我在实际项目中使…...