!704 Vue的DictTag组件,当value没有匹配的值时,展示value
Merge pull request !704 from Aurora/master
This commit is contained in:
commit
af15a3b274
|
@ -7,7 +7,7 @@
|
||||||
:key="item.value"
|
:key="item.value"
|
||||||
:index="index"
|
:index="index"
|
||||||
:class="item.raw.cssClass"
|
:class="item.raw.cssClass"
|
||||||
>{{ item.label }}</span
|
>{{ item.label + ' ' }}</span
|
||||||
>
|
>
|
||||||
<el-tag
|
<el-tag
|
||||||
v-else
|
v-else
|
||||||
|
@ -17,10 +17,13 @@
|
||||||
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
|
:type="item.raw.listClass == 'primary' ? '' : item.raw.listClass"
|
||||||
:class="item.raw.cssClass"
|
:class="item.raw.cssClass"
|
||||||
>
|
>
|
||||||
{{ item.label }}
|
{{ item.label + ' ' }}
|
||||||
</el-tag>
|
</el-tag>
|
||||||
</template>
|
</template>
|
||||||
</template>
|
</template>
|
||||||
|
<template v-if="unmatch && showValue">
|
||||||
|
{{ unmatchArray | handleArray }}
|
||||||
|
</template>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -33,6 +36,16 @@ export default {
|
||||||
default: null,
|
default: null,
|
||||||
},
|
},
|
||||||
value: [Number, String, Array],
|
value: [Number, String, Array],
|
||||||
|
// 当未找到匹配的数据时,显示value
|
||||||
|
showValue: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
unmatchArray: [], // 记录未匹配的项
|
||||||
|
}
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
values() {
|
values() {
|
||||||
|
@ -42,7 +55,34 @@ export default {
|
||||||
return [];
|
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>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
Loading…
Reference in New Issue