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

news2024/11/25 18:39:19

首先获取所要新增的字典,并且根据字典的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-select
          v-model="queryParams.riskLevel"
          placeholder="风险等级"
          clearable
          style="width: 240px"
          ref="measureParamLevelId"
          @change="chageTextColor($event,'measureParamLevelId')"
        >
          <el-option
            v-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 + ''
    },

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

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

相关文章

轻松搞定文件批量复制与重命名,让文件管理更高效

亲爱的用户们&#xff0c;您是否曾经遇到过这样的困扰&#xff1a;需要将大量的文件复制到指定的文件夹中&#xff0c;但是其中可能存在一些重名文件&#xff0c;导致复制过程繁琐且容易出错&#xff1f;那么&#xff0c;我们为您推出全新的文件管理神器&#xff0c;让您的文件…

Linux 进程的地址空间

一、进程 进程&#xff1a;是一个正在运行的程序 PCB : 即是进程控制块&#xff0c;是进程存在的唯一标志。用来描述进程的属性信息&#xff0c;如进程的pid。 每一个进程都是通过fork复制而来的。 在执行fork之后&#xff0c;先将PCB复制一份给子进程&#xff0c;复制之前先…

SpringBoot代理访问本地静态资源400 404

SpringBoot代理访问静态资源400 404 背景&#xff1a;pdf文件上传到linux服务器上&#xff0c;使用SpringBoot代理访问问题&#xff1a;访问过程中可能会出现400、404问题 前提&#xff1a;保证有文件&#xff0c;并且文件路径正确 SpringBoot如何配置静态资源代理&#xff0…

SpringCloudAlibaba 2021.0.5.0 集成Nacos2.2.0 集群配置中心使用记录

Nacos2.2.0集群配置中心使用记录,踩过太多坑 Nacos2.2.0集群搭建参考 1. Nacos配置中心使用 官方文档&#xff1a; https://github.com/alibaba/springcloudalibaba/wiki/Nacosconfig 1.1 准备配置 新建配置 config:name: coisini server:port: 9420DataId&#xff1a;每个项…

Jmeter-压测时接口按照顺序执行-临界部分控制器

文章目录 临界部分控制器存在问题 临界部分控制器 在进行压力测试时&#xff0c;需要按照顺序进行压测&#xff0c;比如按照接口1、接口2、接口3、接口4 进行执行 查询结果是很混乱的&#xff0c;如果请求次数少&#xff0c;可能会按照顺序执行&#xff0c;但是随着次数增加&a…

【Visual Studio Code】--- Win11 安装 VS Code 超详细

Win11 安装 VS Code 超详细 概述一、下载 Vscode二、安装 Vscode 概述 一个好的文章能够帮助开发者完成更便捷、更快速的开发。书山有路勤为径&#xff0c;学海无涯苦作舟。我是秋知叶i、期望每一个阅读了我的文章的开发者都能够有所成长。 一、下载 Vscode Vscode官网 二、…

如何用DDX指标捕捉买卖力量的变化?

DDX指标&#xff08;Demand-Delivery Index&#xff0c;需求交付指数&#xff09;是一个用于测量市场供需关系和情绪变化的量化工具。通过分析每日的买入单数、卖出单数以及持仓人数&#xff0c;投资者可以利用DDX指标捕捉市场买卖力量的变化&#xff0c;从而做出更明智的投资决…

vscode|pycharm + docker + python

1&#xff0c;docker run的时候要加上port docker run -it --gpusall -p 2222:22 -v /挂载目录/:/docker 目录1/ -v /挂载目录/:/docker 目录2/ --namexxx image:v2 /bin/bash 2&#xff0c;docker 内部要安装ssh 2.1方法命令&#xff1a; apt-get update apt-get install…

第三章 图论 No.13拓扑排序

文章目录 裸题&#xff1a;1191. 家谱树差分约束拓扑排序&#xff1a;1192. 奖金集合拓扑序&#xff1a;164. 可达性统计差分约束拓扑序&#xff1a;456. 车站分级 拓扑序和DAG有向无环图联系在一起&#xff0c;通常用于最短/长路的线性求解 裸题&#xff1a;1191. 家谱树 119…

使用PDF文件入侵任何操作系统

提示&#xff1a;我们8月28号开学,所以我得快点更新了&#xff0c;不能拖了&#x1f625; 文章目录 前言一、打开终端总结 前言 PDF文件被广泛应用于共享信息&#xff0c;电子邮件&#xff0c;网站或文档或存储系统的真实链接 它可以用于恶意软件的载体。 不要问我什么意思&am…

Spring学习笔记(思维导图)

目录 基本概念 Spring优点&#xff1a; Spring缺点&#xff1a; AOP 实现原理&#xff1a; Jdk动态代理&#xff1a; CGlib: 静态代理&#xff1a; JDK动态代理和CGlib的对比&#xff1a; 配置方式&#xff1a; 基本概念&#xff1a; 事务管理 基本概念 事务控制 事…

Bingchat和ChatGPT主要区别

Bing Chat由chatgpt GPT-4技术提供支持&#xff0c;这是流行的ChatGPT的最新语言模型。Bing Chat通过更具交互性和上下文联动的响应来优化搜索引擎。它允许用户提出问题并获得更人性化、精确化或创造力的答案。用户还可以在答案末尾查看的参考来源。该工具可以充当个人研究、计…

每天一个知识点——L2R

面试的时候&#xff0c;虽然做过医疗文献搜索&#xff0c;也应用过L2R的相关模型&#xff0c;但涉及到其中的一些技术细节&#xff0c;都会成为我拿不下offer永远的痛。也尝试过去理解去背下一些知识点&#xff0c;终究没有力透纸背&#xff0c;随着时间又开始变得模糊&#xf…

Mysql使用数据类型为datetime导致无法返回规定格式解决

Mysql使用数据类型为datetime&#xff0c;在java中使用Date获取到返回的实际是一个秒数。 1.可以通过注解JsonFormat 直接转换成对应格式 pattern&#xff1a;格式 timezone&#xff1a;时区 2.手动转换&#xff0c;封装方法 /** * 时间转yyyy-MM-dd HH:mm:ss * * return */ …

【产品人卫朋】硬件产品经理:产品成功的四个要素

目录 要素一&#xff1a;快速行动 要素二&#xff1a;衡量产品增长力 了解你的目标用户 衡量用户参与度 要素三&#xff1a;避免浪费金钱 要素四&#xff1a;组建一支能打的团队 硬件产品的成功离不开四个核心要素&#xff0c;分别是&#xff1a; &#xff08;1&#xf…

消防二维码管理系统搭建教程

针对消防管理中普遍存在的消防设施巡查、维修、报修等需求&#xff0c;可以在草料二维码上搭建消防管理二维码系统&#xff0c;为每个消防设施生成一张独立的二维码&#xff0c;实现微信扫码进行巡检、维修、隐患上报等功能。 系统搭建流程 消防管理二维码系统由一个个二维码…

无涯教程-Perl - setservent函数

描述 在第一次调用getservent之前,应先调用此函数。 STAYOPEN参数是可选的,在大多数系统上未使用。当getservent()检索服务数据库中下一行的信息时,然后setervent设置(或重置)枚举到主机条目集的开头。 语法 以下是此函数的简单语法- setservent STAYOPEN返回值 此函数不返…

安防视频监控汇聚平台EasyCVR视频监控综合管理平台接入Ehome告警,公网快照不显示的问题解决步骤

智能视频监控汇聚平台TSINGSEE青犀视频EasyCVR可拓展性强、视频能力灵活、部署轻快&#xff0c;可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等&#xff0c;以及支持厂家私有协议与SDK接入&#xff0c;包括海康Ehome、海大宇等设备的SDK等&#xff0c;视频监控管理平台…

Compute shader SV 理解图

本图转子&#xff1a;【Computeshader】个人总结_蒋伟博的博客-CSDN博客

Spring解决循环依赖问题

一、什么是循环依赖&#xff1f; 例如&#xff0c;就是A对象依赖了B对象&#xff0c;B对象依赖了A对象。&#xff08;下面的代码属于属性的循环依赖&#xff0c;也就是初始化阶段的循环依赖&#xff0c;区别与底下构造器的循环依赖&#xff09; // A依赖了Bclass A{public B b;…