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

news2024/12/28 20:12:17

背景

本项目以若依前端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.coloradmin.cn/o/2036186.html

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

相关文章

2024年办公协作新趋势:8种值得瞩目的工作方式

过去两年中&#xff0c;疫情的爆发推动了远程办公业务的发展&#xff0c;并且随着疫情的常态化和企业数字化转型的加速&#xff0c;中国企业对协作办公软件的需求显著增加。数据显示&#xff0c;2021年中国协作办公市场规模已达264.2亿元&#xff0c;预计到2023年将增长至330.1…

Asymmetric Loss For Multi-Label Classification

从b站视频区看到的一篇论文&#xff0c;来自阿里。据他所说&#xff0c;他的多标签分类数据长尾最大到100:1&#xff0c;再做增广也没用&#xff0c;用了这篇论文的loss直接起飞。 链接在此 首先&#xff0c;常规的loss 既然是多标签分类&#xff0c;那么最基础的方法肯定是…

《探索 Unity 开发:创新与挑战》

《探索 Unity 开发&#xff1a;创新与挑战》 在当今的游戏开发和虚拟现实领域&#xff0c;Unity 已经成为了一款备受青睐的引擎。它的强大功能和灵活性&#xff0c;为开发者们提供了无限的创作可能。在这篇博客中&#xff0c;我们将深入探讨 Unity 开发的各个方面&#xff0c;包…

HarmonyOS应用二之代办事项案例

目录&#xff1a; 1、代码分析2、ArkTS的基本组成3、重点扩展 1、代码分析 1.1代码&#xff1a; 在鸿蒙&#xff08;‌HarmonyOS&#xff09;‌的ArkTS框架中&#xff0c;‌aboutToAppear() 是一个自定义组件的生命周期函数&#xff0c;‌它在组件即将显示时被系统自动调用1。…

生信入门:序列比对之ncbi_blast在线使用

1.背景 blast作为一种序列相似性比对工具&#xff0c;是生物信息分析最常用的一款软件&#xff0c;必须掌握。不管是做两序列相似性的简单比对&#xff0c;还是引物特异性、序列的来源等个性化分析&#xff0c;都会用到blast比对。许多看似高大上的基因分析&#xff0c;都可归…

1688商品详情API返回值中的物流与配送信息

在阿里巴巴1688平台上&#xff0c;商品详情API的返回值通常会包含丰富的商品信息&#xff0c;但具体到“物流与配送信息”这部分&#xff0c;它可能不直接包含在API的标准返回字段中&#xff0c;因为物流和配送信息往往与订单处理、库存状态以及物流服务商的实时数据相关联&…

探索Linux -- 冯诺依曼体系、初始操作系统、初始进程、fork函数

一、冯诺依曼体系结构 1、概念 冯诺依曼结构也称普林斯顿结构&#xff0c;是一种将程序指令存储器和数据存储器合并在一起的存储器结构。 最早的计算机器仅内含固定用途的程序。若想要改变此机器的程序&#xff0c;就必须更改线路、更改结构甚至重新设计此机器。当然最早的计…

安卓应用开发学习:查看手机传感器信息

一、引言 在手机app的开发中经常会用到手机的传感器&#xff0c;在《Android App 开发进阶与项目实战》一书的第10章就介绍了传感器的一些功能和用法。要想使用传感器&#xff0c;首先得知道手机具备哪些传感器。书中有传感器类型取值的说明&#xff0c;并提供了一个查看手机传…

vulnhub系列:DC-9

vulnhub系列&#xff1a;DC-9 靶机下载 一、信息收集 nmap扫描存活&#xff0c;根据mac地址寻找IP nmap 192.168.23.0/24nmap扫描IP 端口等信息 nmap 192.168.23.144 -p- -sV -Pn -O访问80端口 dirsearch目录扫描 python3 dirsearch.py -u http://192.168.23.144/页面查看…

8.12-基于gtids的主从复制搭建+lvs

一、LVS 1.角色 主机名ip地址功能web01192.168.2.101rsweb02192.168.2.102realserveenat内网:192.168.2.103 外网:192.168.2.120directorserver,ntpdns192.168.2.105dns 2..web服务器 [rootweb01 ~]# yum -y install nginx ​ [rootweb01 ~]# echo "web01" > …

【kruskal】最小生成树算法详解

最小生成树kruskal 洛谷 P3366 【模板】最小生成树 算法介绍 最小生成树&#xff08;Minimum Spanning Tree, MST&#xff09;是一个无向图中连接所有顶点的边的集合&#xff0c;这个集合满足两点&#xff1a;第一&#xff0c;它是一棵树&#xff0c;即任意两个顶点之间恰好有…

打靶记录9——Vikings

靶机下载地址&#xff1a;https://www.vulnhub.com/entry/vikings-1,741/ 难度&#xff1a; 低&#xff08;中&#xff09;&#xff0c;CTF风格的靶机 目标&#xff1a; 取得 root 权限 2 个flag 涉及的攻击方法&#xff1a; 主机发现端口扫描Web信息收集编码转换/文件还…

ThinkPHP5.1.C+CmsEasy-SQL注入

目录 1、ThinkPHP 中存在的 SQL注入 漏洞&#xff08; select 方法注入&#xff09; 1.1环境配置 1.1.1将 composer.json 文件的 require 字段设置成如下&#xff1a; 1.1.2设置application/index/controller/Index.php 文件 1.1.3在 application/database.php 文件中配置…

Xcode 在原生集成flutter项目

笔者公司有一个从2017年就开始开发的iOS和安卓原生项目&#xff0c;现在计划从外到内开始进行项目迁徙。 1》从gitee拉取flutter端的代码&#xff1b;&#xff08;Android报错Exception: Podfile missing&#xff09; 2》替换Xcode里的cocopods里Podfile的路径 然后报警 然后…

centos7.9删除home分区扩容至根分区

一、说明 拿到新服务器查看磁盘空间分为根(/),home,swap,boot/efi。home分区站到整个分区的87%以上。和预设的不一致&#xff0c;需要把home删除&#xff0c;扩容至根分区。 新服务器的分区是通过lvm划分的。 二、查看磁盘 三、查看磁盘分区 四、卸载home 卸载前做好备份&a…

自由职业四年,我整理了一些建议

我是勋荣&#xff0c;一个独立开发者。运营了自己的社群&#xff0c;有自己的软件产品。目前还在探索各种副业的路上~ 1我的独立开发之路 刚毕业就找不到Android岗位的我瑟瑟发抖。在广州&#xff0c;稀里糊涂做了Java后端开发。有一天加班 通宵&#xff0c;早上借住在同事家…

机器学习速成第三集——无监督学习之聚类(理论部分)!

目录 聚类的定义和原理 常见的聚类算法 应用场景 总结 无监督学习中聚类算法的最新进展是什么&#xff1f; K-Means聚类算法在处理大规模数据集时的性能优化方法有哪些&#xff1f; 并行计算模型&#xff1a; 多核处理器优化&#xff1a; 分层抽样&#xff1a; 特征缩…

【数值计算方法】非线性方程求根-数值实验

第一题 newton method 非线性方程组的向量函数为: F ( x , y ) ( f 1 ( x , y ) f 2 ( x , y ) ) { ( x − 2 ) 2 ( y − 3 2 x ) 2 − 5 0 , 2 ( x − 3 ) 2 ( y / 3 ) 2 − 4 0. F(x,y)\begin{pmatrix} f_1(x,y)\\f_2(x,y)\end{pmatrix}\left.\left\{\begin{array}{…

Linux 基本指令讲解

linux 基本指令 clear 清屏 Alt Enter 全屏/退出全屏 pwd 显示当前用户所处路径 cd 改变目录 cd /root/mikecd … 返回上级目录cd - 返回最近所处的路径cd ~ 直接返回当前用户自己的家目 roor 中&#xff1a;/root普通用户中&#xff1a;/home/mike mkdir 创建一个文件夹(d) …

高可用集群keepalived详解(基础部署与企业应用示例)

目录 一、高可用集群简介 1.1 集群的类型 1.2系统的可用性 1.3 如何实现高可用 1.4 VRRP(虚拟路由冗余协议)---解决静态网关单点风险 1.4.1 VRRP相关术语 1.4.2 VRRP相关技术 二、Keepalived 部署 2.1 keepalived 架构 2.2 环境准备 三、keepalived基本配置 3.1 全局…