根据字典值回显,有颜色的

背景

本项目以若依前端vue2版本为例,项目中有根据字典值回显文本的函数selectDictLabel,但是有时候我们需要带颜色的回显,大概这样的在这里插入图片描述

用法

<template v-slot='scope'><dict-label :options="dangerLevelOptions" :value="scope.row.dangerLevel" />
</template>
<script>import DictLabel from '@/components/DictTag/label';export default{components: {DictLabel},data() {return {dangerLevelOptions: [{ value: '1', label: '一般隐患', color: '#1786D9' },{ value: '2', label: '较大隐患', color: '#FCD46E' },{ value: '3', label: '重大隐患', color: '#FF7826' },{ value: '4', label: '特别重大隐患', color: '#FF756F' },]}}}
</script>

源码

以下仅供参考,还可以将颜色优化为type:default | success | warning | danger

<template><div><template v-for="(item, index) in options"><template v-if="values.includes(item.value)"><span:key="item.value":index="index":style="{ color: item.color }">{{ item.label }}</span></template></template></div>
</template><script>
export default {name: "DictLabel",props: {options: {type: Array,default: null,},value: [Number, String, Array],},computed: {values() {if (this.value !== null && typeof this.value !== 'undefined') {return Array.isArray(this.value) ? this.value : [String(this.value)];} else {return [];}},},
};
</script>

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

XXL-JOB分布式定时任务框架快速入门

文章目录 前言定时任务分布式任务调度 1、XXL-JOB介绍1.1 XXL-JOB概述1.2 XXL-JOB特性1.3 整体架构 2、XXL-JOB任务中心环境搭建2.1 XXL-JOB源码下载2.2 IDEA导入xxljob工程2.3 初始化数据库2.4 Docker安装任务管理中心 3、XXL-JOB任务注册测试3.1 引入xxl-job核心依赖3.2 配置…

deepin V23前瞻丨deepin V23与飞腾腾锐D3000完成适配,持续丰富deepin操作系统硬件生态

查看原文 近日&#xff0c;自主核心芯片研发飞腾公司宣布与deepin V23完成适配&#xff0c;包含飞腾新一代桌面CPU飞腾腾锐D3000、FT-2000/64、桌面芯片飞腾腾锐D2000等多款产品&#xff0c;为用户带来更智能、安全、稳定的使用体验。 飞腾腾锐D3000集成8个飞腾自主研发的新一…

Golang多版本环境安装并存

1. 准备 请先安装最新版本的Go&#xff0c;详见 https://go.dev/doc/install go version2. 配置镜像加速 go env -w GO111MODULEon go env -w GOPROXYhttps://goproxy.cn,direct3. 安装Go指定版本 Golang官方提供dl工具来实现多版本的Go环境管理&#xff0c;详见项目&#…

小白零基础学数学建模应用系列(二):基于Python的共享单车系统建模与仿真分析

共享单车系统作为一种绿色环保的出行方式&#xff0c;已成为现代城市公共交通的重要组成部分。本文将使用Python编程语言&#xff0c;并结合modsim库&#xff0c;构建并仿真一个共享单车系统的模型&#xff0c;通过这一过程来展示如何进行系统的建模与分析。 文章目录 一、背景…

虚拟化—XenServer安装教程详细(附客户端连接)

&#x1f3e1;作者主页&#xff1a;点击&#xff01; &#x1f427;Linux基础知识(初学)&#xff1a;点击&#xff01; &#x1f427;Linux高级管理防护和群集专栏&#xff1a;点击&#xff01; &#x1f510;Linux中firewalld防火墙&#xff1a;点击&#xff01; ⏰️创作…

Unity 编写自己的aar库,接收Android广播(broadcastReceiver)并传递到Unity

编写本文是因为找了很多文章&#xff0c;都比较片段&#xff0c;不容易理解&#xff0c;对于Android新手来说理解起来不友好。我这里写了一个针对比较小白的文章&#xff0c;希望有所帮助。 Android端 首先还是先来写Android端&#xff0c;我们新建一个Android空项目&#xf…

重新定义AI绘画体验,Midjourney全面进阶指令指南

前言 在人工智能绘画的世界里,Midjourney无疑是一颗璀璨的明珠。今天,就让我们一同探索这个神奇工具的奥秘,开启一段全新的AI绘画之旅。 一、奇妙之门:Midjourney的本质 与众不同的是,Midjourney并非一个单纯的软件,而是栖身于Discord平台的一位"云端画师"。有别于本…

【微信小程序】网络数据请求

1. 小程序中网络数据请求的限制 2. 配置 request 合法域名 3. 发起 GET 请求 调用微信小程序提供的 wx.request() 方法&#xff0c;可以发起 GET 数据请求&#xff0c;示例代码如下&#xff1a; 4. 发起 POST 请求 调用微信小程序提供的 wx.request() 方法&#xff0c;可以…

(计算机网络)网络层

目录 一.网络层提供哪种服务 二.两种服务的比较 三.ip协议 四.ip地址 五.ip地址的分类 六.子网掩码 七.路由器介绍 一.网络层提供哪种服务 1.ip地址--唯一的标识互联网上的某一台主机 2. 虚电路&#xff1a;虚拟的电路 二.两种服务的比较 ip数据报&#xff0c;不需要建…

Visual Studio Code 安装与 C/C++ 语言运行总结

​ 大家好&#xff0c;我是程序员小羊&#xff01; 前言&#xff1a; Visual Studio Code&#xff08;简称 VS Code&#xff09;是由微软开发的一款轻量级、强大的代码编辑器&#xff0c;支持多种编程语言和开发框架。由于其丰富的插件生态系统和灵活的配置选项&#xff0c;VS…

Layui——隐藏表单项后不再进行验证

目录 修改后的部分代码 修改后的完整代码 我编辑用户信息和添加新用户用的是同一个表单&#xff0c;不同的是编辑用户信息里没有密码项和确认密码项&#xff0c;但是把它们隐藏后仍然要进行验证&#xff0c;也就是说它们俩的验证并没有随着表单项的隐藏而关闭。原因&#xf…

gitlab实现CI/CD自动化部署

gitlab实现CI/CD自动化部署 项目根目录中新增gitlab-ci.yml在gitlab上查看gitlab-runner配置方法配置服务器环境推送代码&#xff0c;触发runner&#xff0c;实现自动构建和部署参考 gitlab支持通过配置CI/CD实现自动化部署我们的代码项目&#xff0c;主要核心就是配置gitlab-c…

【mamba学习】(一)SSM原理与说明

mamba输入输出实现与transformer几乎完全一样的功能&#xff0c;但速度和内存占用具有很大优势。对比transformer&#xff0c;transformer存在记忆有限的情况&#xff0c;如果输入或者预测的序列过长可能导致爆炸&#xff08;非线性&#xff09;&#xff0c;而mamba不存在这种情…

【精通SDL之----SDL_RenderReadPixels截屏】

SDL_RenderReadPixels截屏 前言一、SDL_RenderReadPixels简介二、问题现象三、规避方案1. 离屏纹理2. ding! *灵光一现* 前言 最近使用SDL2在鸿蒙系统(Harmoney OS)上截取视频播放过程中的数据&#xff0c;发现捕获的数据为空&#xff0c;然在windows上却可以正常捕获&#xff…

Linux-软件管理

文章目录 19. 软件管理19.1 linux软件介绍19.2 RPM包概述19.3 RPM软件包安装19.4 RPM软件包依赖问题19.5 DPKG软件包19.6 linux 软件包前端工具19.7 windows 前端工具winget19.8 linux 前端工具yum概述19.9 设置yum远程仓库19.10 yum 软件包管理19.11 epel软件仓库19.12 yum本地…

海康相机二次开发学习笔记1-环境配置

因为最近可以用一段时间海康加密狗,Visionpro二次开发暂时停更一段时间,开始记录一下海康相机二次开发的学习笔记. 环境配置 1. 创建项目 打开Visual Studio,新建.NetFramework项目,选择WindowsForms,点击下一步,选择项目名称,点击下一步,点击确定打开项目属性,点击生成选项…

TED: 1靶场复现【附代码】(权限提升)

机下载地址&#xff1a; Ted: 1 ~ VulnHubTed: 1, made by Avraham Cohen. Download & walkthrough links are available.https://www.vulnhub.com/entry/ted-1,327/ 1. 主机发现端口扫描目录扫描敏感信息获取 1.1. 主机发现 nmap -sn 192.168.59.0/24|grep -B 2 00:0C…

面试题:什么是 Redis 的雪崩、穿透和击穿?Redis 崩溃之后会怎么样?该如何应对这种情况?如何处理 Redis 的穿透?

面试题&#xff1a;什么是 Redis 的雪崩、穿透和击穿&#xff1f;Redis 崩溃之后会怎么样&#xff1f;该如何应对这种情况&#xff1f;如何处理 Redis 的穿透&#xff1f; 面试题面试官心理分析面试题剖析缓存雪崩缓存穿透缓存击穿 面试题 了解什么是 Redis 的雪崩、穿透和击穿…

百度智能云发布3款轻量级+2款场景大模型

文心大模型ERNIE 3.5是目前百度智能云千帆大模型平台上最受欢迎的基础大模型之一。针对用户的常见通用的对话场景&#xff0c;ERNIE 3.5 在指令遵循、上下文学习和逻辑推理能力三方面分别进行了能力增强。 ERNIE Speed作为三款轻量级大模型中的“大个子”&#xff0c;推理场景…

微调LLama 3.1——七月论文审稿GPT第5.5版:拿早期paper-review数据集微调LLama 3.1

前言 对于llama3&#xff0c;我们之前已经做了针对llama3 早7数据微调后的测评 去pk llama2的早7数据微调后&#xff0c;推理测试集中的早期paper&#xff1a;出来7方面review去pk gpt4推理测试集中的早期paper&#xff1a;7方面reviewground truth是早期paper的7方面人工rev…