郑州企业如何建网站,wordpress无法加载预览图片,地图设计网站,软件开发专业排名背景
本项目以若依前端vue2版本为例#xff0c;项目中有根据字典值回显文本的函数selectDictLabel#xff0c;但是有时候我们需要带颜色的回显#xff0c;大概这样的
用法
template v-slotscopedict-label :optionsdangerLevelOptions :value项目中有根据字典值回显文本的函数selectDictLabel但是有时候我们需要带颜色的回显大概这样的
用法
template v-slotscopedict-label :optionsdangerLevelOptions :valuescope.row.dangerLevel /
/template
scriptimport 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源码
以下仅供参考还可以将颜色优化为typedefault | success | warning | danger等
templatedivtemplate v-for(item, index) in optionstemplate v-ifvalues.includes(item.value)span:keyitem.value:indexindex:style{ color: item.color }{{ item.label }}/span/template/template/div
/templatescript
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
