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

背景

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