修改DictTag组件,当value没有匹配的值时,展示value

上级 a33090c9
......@@ -7,7 +7,7 @@
:key="item.value"
:index="index"
:class="item.raw.cssClass"
>{{ item.label }}</span
>{{ item.label + ' ' }}</span
>
<el-tag
v-else
......@@ -17,10 +17,13 @@
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
:class="item.raw.cssClass"
>
{{ item.label }}
{{ item.label + ' ' }}
</el-tag>
</template>
</template>
<template v-if="unmatch && showValue">
{{ unmatchArray | handleArray }}
</template>
</div>
</template>
......@@ -33,6 +36,16 @@ export default {
default: null,
},
value: [Number, String, Array],
// 当未找到匹配的数据时,显示value
showValue: {
type: Boolean,
default: true,
}
},
data() {
return {
unmatchArray: [], // 记录未匹配的项
}
},
computed: {
values() {
......@@ -42,11 +55,38 @@ export default {
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;
})
},
}
};
</script>
<style scoped>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>
\ No newline at end of file
</style>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册