当前位置: 首页 > 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 + ''},

http://www.lryc.cn/news/129669.html

相关文章:

  • JDK 8 升级 JDK 17 全流程教学指南
  • Docker 网络之 ipvlan 和 macvlan
  • 【Rust】Rust学习 第十三章Rust 中的函数式语言功能:迭代器与闭包
  • 【Linux操作系统】详解Linux系统编程中的管道进程通信
  • 【Redis从头学-4】Redis中的String数据类型实战应用场景之验证码、浏览量、点赞量、Json格式存储
  • linux 统计命令
  • docker部署springboot应用
  • YOLO v5、v7、v8 模型优化
  • 回归预测 | MATLAB实现SSA-BP麻雀搜索算法优化BP神经网络多输入单输出回归预测(多指标,多图)
  • QT的mysql(数据库)最佳实践和常见问题解答
  • 使用PyMuPDF库的PDF合并和分拆程序
  • 2023/8/18 - You need to rely on yourself to achieve the life you want
  • Data Abstract for .NET and Delphi Crack
  • Eclipse集成MapStruct
  • 采用pycharm在虚拟环境使用pyinstaller打包python程序
  • Rx.NET in Action 中文介绍 前言及序言
  • Azure Blob存储使用
  • mysql、redis面试题
  • 22、touchGFX学习Model-View-Presenter设计模式
  • Python Opencv实践 - 图像高斯滤波(高斯模糊)
  • 使用 Qt 生成 Word 和 PDF 文档的详细教程
  • ssm+vue校园美食交流系统源码
  • 电力系统基础知识(一)—电力系统概述
  • spring(15) SpringBoot启动过程
  • 耕地单目标语义分割实践——Pytorch网络过程实现理解
  • 画质提升+带宽优化,小红书音视频团队端云结合超分落地实践
  • 【傅里叶级数与傅里叶变换】数学推导——3、[Part4:傅里叶级数的复数形式] + [Part5:从傅里叶级数推导傅里叶变换] + 总结
  • 第二章MyBatis入门程序
  • AgentBench::AI智能体发展的潜在问题(二)
  • C++中的运算符总结(4):逻辑运算符(上)