若依框架给字典字段新增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-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 + ''
    },

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

深兰科技熊猫汽车牵手首恒出行,人工智能技术提升商用车运营服务

8月8日&#xff0c;深兰科技集团旗下熊猫新能源汽车(上海)有限公司(下称熊猫新能源汽车)与河南首恒出行服务有限公司(下称首恒出行)在深兰科技总部举行签约仪式&#xff0c;首恒出行将向熊猫新能源汽车年定向采购10000台商用车&#xff0c;双方将在汽车后市场领域进行技术合作。…

如何在出差期间远程访问企业ERP系统?内网穿透解决您的难题!

文章目录 概述1.查看象过河服务端端口2.内网穿透3. 异地公网连接4. 固定公网地址4.1 保留一个固定TCP地址4.2 配置固定TCP地址 5. 使用固定地址连接 概述 ERP系统对于企业来说重要性不言而喻&#xff0c;不管是财务、生产、销售还是采购&#xff0c;都需要用到ERP系统来协助。…

动画制作选择Blender还是Maya

Blender和Maya是两种最广泛使用的 3D 建模和动画应用程序。许多经验丰富的用户表示&#xff0c;Blender 在雕刻工具方面远远领先于 Maya&#xff0c;并且在 3D 建模方面达到了相同的质量水平。对于刚接触动画行业的人来说&#xff0c;您可能会问“我应该使用 Blender 还是 Maya…

【操作系统】24王道考研笔记——第一章 计算机系统概述

第一章 计算机系统概述 一、操作系统基本概念 1.1 定义 1.2 特征 并发 &#xff08;并行&#xff1a;指两个或多个事件在同一时刻同时发生&#xff09; 共享 &#xff08;并发性指计算机系统中同时存在中多个运行着的程序&#xff0c;共享性指系统中的资源可供内存中多个并…

网络连接(3次握手和4次挥手)

在进行3次握手和4次挥手传输数据时&#xff0c;都可能会出现丢包的情况&#xff0c;推荐看出现丢包问题的情况以及解决方法 一.为什么要进行3次握手&#xff1f; 在进行网络连接时&#xff0c;需要3次握手 3次握手的初心就是两方面&#xff1a; 1.投石问路&#xff0c;验证通…

HDMI接口的PCB布局布线要求

高清多媒体接口&#xff08;High Definition Multimedia Interface&#xff09;&#xff0c;简称&#xff1a;HDMI&#xff0c;是一种全数字化视频和声音发送接口&#xff0c;可以发送未压缩的音频及视频信号。随着技术的不断提升&#xff0c;HDMI的传输速率也不断的提升&#…

【力扣每日一题】1572. 矩阵对角线元素的和 8.11打卡

文章目录 题目思路代码 题目 1572. 矩阵对角线元素的和 难度&#xff1a; 简单 描述&#xff1a; 给你一个正方形矩阵 mat&#xff0c;请你返回矩阵对角线元素的和。 请你返回在矩阵主对角线上的元素和副对角线上且不在主对角线上元素的和。 返回合并后的二叉树。 注意…

企业权限管理(十)-用户详情

用户详情 UserController findById方法 Controller RequestMapping("/user") public class UserController {Autowiredprivate IUserService userService;//查询指定id的用户RequestMapping("/findById.do")public ModelAndView findById(String id) thro…

【设计模式——学习笔记】23种设计模式——状态模式State(原理讲解+应用场景介绍+案例介绍+Java代码实现)

文章目录 案例引入介绍基本介绍登场角色应用场景 案例实现案例一类图实现 案例二&#xff1a;借贷平台源码剖析传统方式实现分析状态修改流程类图实现 案例三&#xff1a;金库警报系统系统的运行逻辑伪代码传统实现方式使用状态模式 类图实现分析问题问题一问题二 总结文章说明…

【广州华锐视点】VR线上教学资源平台提供定制化虚拟现实学习内容

虚拟现实&#xff08;VR&#xff09;技术的出现为我们提供了一种全新的在线教学方式。由广州华锐视点开发的VR线上教学资源平台&#xff0c;作为一个综合性的学习工具&#xff0c;正在教育领域迅速发展&#xff0c;并被越来越多的教育机构和学生所接受。那么&#xff0c;VR线上…

TikTok广告投放如何做?2023超全实用干货

目前Tiktok月活用户达到12亿&#xff0c;覆盖150地方&#xff0c;66%用户年龄30以下&#xff0c;流量不容小觑。在部分地区&#xff0c;TikTik广告已经是能够与Facebook与Google广告掰掰手腕的程度了。且目前来说&#xff0c;投放TikTok ads的成本比FB ads要低一些&#xff0c;…

搭建Web服务器并用cpolar发布至公网访问

本地电脑搭建Web服务器并用cpolar发布至公网访问 文章目录 本地电脑搭建Web服务器并用cpolar发布至公网访问前言1. 首先在电脑安装PHPStudy、WordPress、cpolar2. 安装cpolar&#xff0c;进入Web-UI界面3. 安装wordpress4. 进入wordpress网页安装程序5. 利用cpolar建立的内网穿…

SpringBoot集成KoTime

koTime是一个开源免费的springboot项目性能分析工具&#xff0c;通过追踪方法调用链路以及对应的运行时长快速定位性能瓶颈&#xff0c;除此之外&#xff0c;代码热更新、异常检测都可以有&#xff01; 一.添加KoTime依赖&#xff1a; <dependency><groupId>cn.l…

【直接收藏】前端 VUE 高阶面试题(二)

44.vuex的数据丢失知道吗 怎么解决 原理&#xff1a;可以利用缓存&#xff0c;将vuex中的state&#xff0c;在缓存中备份一下&#xff0c;当状态发生改变时&#xff0c;同步缓存的的备份。同时当刷新时&#xff0c;去缓存中的备份&#xff0c;给state赋值 实际开发中我们一般…

【机器学习6】数据预处理(三)——处理类别数据(有序数据和标称数据)

处理类别数据 &#x1f331;简要理解处理类别数据的重要性☘️类别数据的分类☘️方便研究——用pandas创建包含多种特征的数据集&#x1f340;映射有序特征&#x1f340;标称特征标签编码&#x1f340;标称特征的独热编码&#x1f331;独热编码的优缺点 &#x1f331;简要理解…

NeuralNLP-NeuralClassifier的使用记录(二),训练预测自己的【中文文本多分类】

NeuralNLP-NeuralClassifier的使用记录&#xff0c;训练预测自己的【中文文本多分类】 数据准备&#xff1a; ​ 与英文的训练预测一致&#xff0c;都使用相同的数据格式&#xff0c;将数据通过代码处理为JSON格式&#xff0c;以下是我使用的一种&#xff0c;不同的原数据情况…

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

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

【数据分析入门】Numpy进阶

目录 一、数据重塑1.1 透视1.2 透视表1.3 堆栈/反堆栈1.3 融合 二、迭代三、高级索引3.1 基础选择3.2 通过isin选择3.3 通过Where选择3.4 通过Query选择3.5 设置/取消索引3.6 重置索引3.6.1 前向填充3.6.2 后向填充 3.7 多重索引 四、重复数据五、数据分组5.1 聚合5.2 转换 六、…

电气测试相关

项目&#xff1a; 长期过电压 瞬态过电压 瞬态欠压 跳跃启动 卸载 纹波电压 电源电压缓慢下降和上升 电源电压缓慢下降、快速上升 复位行为 短暂中断 启动脉冲 带电气系统控制的电压曲线 引脚中断 连接器中断 反极性 信号线和负载电路短路 启动行为 对分流不…

Flink之Task解析

Flink之Task解析 对Flink的Task进行解析前,我们首先要清楚几个角色TaskManager、Slot、Task、Subtask、TaskChain分别是什么 角色注释TaskManager在Flink中TaskManager就是一个管理task的进程,每个节点只有一个TaskManagerSlotSlot就是TaskManager中的槽位,一个TaskManager中可…