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

背景

本项目以若依前端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>