From 4952ac0a3dba9880a2ab5feef36b215c36457573 Mon Sep 17 00:00:00 2001 From: 刘鹏飞 <17385020532@163.com> Date: 星期三, 12 四月 2023 15:14:09 +0800 Subject: [PATCH] 修改DictTag组件,当value没有匹配的值时,展示value --- ruoyi-ui/src/components/DictTag/index.vue | 46 +++++++++++++++++++++++++++++++++++++++++++--- 1 files changed, 43 insertions(+), 3 deletions(-) diff --git a/ruoyi-ui/src/components/DictTag/index.vue b/ruoyi-ui/src/components/DictTag/index.vue index 4c196c4..279b613 100644 --- a/ruoyi-ui/src/components/DictTag/index.vue +++ b/ruoyi-ui/src/components/DictTag/index.vue @@ -7,7 +7,7 @@ :key="item.value" :index="index" :class="item.raw.cssClass" - >{{ item.label }}</span + >{{ item.label + ' ' }}</span > <el-tag v-else @@ -17,9 +17,12 @@ :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 @@ default: null, }, value: [Number, String, Array], + // 当未找到匹配的数据时,显示value + showValue: { + type: Boolean, + default: true, + } + }, + data() { + return { + unmatchArray: [], // 记录未匹配的项 + } }, computed: { values() { @@ -42,11 +55,38 @@ 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> -- Gitblit v1.9.2