<script>
export default {
name: "DictTag",
props: {
options: {
type: Array,
default: null,
},
value: [Number, String, Array],
// 当未找到匹配的数据时，显示value
showValue: {
type: Boolean,
default: true,
}
},
data() {
return {
unmatchArray: [], // 记录未匹配的项
}
},
computed: {
values() {
if (this.value !== null && typeof this.value !== 'undefined') {
return Array.isArray(this.value) ? this.value : [String(this.value)];
} else {
return [];
}
},
unmatch(){
this.unmatchArray = [];
if (this.value !== null && typeof this.value !== 'undefined') {
// 传入值为非数组
if(!Array.isArray(this.value)){
if(this.options.some(v=> v.value == this.value )) return false;
this.unmatchArray.push(this.value);
return true;
}
// 传入值为Array
this.value.forEach(item => {
if (!this.options.some(v=> v.value == item )) this.unmatchArray.push(item)
});
return true;
}
// 没有value不显示
return false;
},
},
filters: {
handleArray(array) {
if(array.length===0) return '';
return array.reduce((pre, cur) => {
return pre + ' ' + cur;
})
},
},
render(h) {
let items = [];
if (this.values.length > 0 && this.options.length > 0) {
for (let index=0,length=this.options.length; index<length; index++) {
let item = this.options[index];
if (!this.values.includes(item.value)) continue;
if (item.raw.listClass == 'default' || item.raw.listClass == '') {
items.push(h('span', {
index,
class: item.raw.cssClass,
}, [item.label + ' ']));
}
else {
items.push(h('el-tag', {
index,
'disable-transitions': true,
type: item.raw.listClass == 'primary' ? '' : item.raw.listClass,
class: item.raw.cssClass,
}, [item.label + ' ']));
}
}
}
if (this.unmatch && this.showValue) {
items.push(this.unmatchArray | this.handleArray);
}
return h("div", items);
}
};
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
|
