From 99e66bf11c38ebe2f21f73b956918468eae4929c Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期日, 30 六月 2024 08:02:22 +0800 Subject: [PATCH] 若依 3.8.8 --- ruoyi-ui/src/components/DictTag/index.vue | 55 ++++++++++++++++++++++++++++++++++++++++++++++--------- 1 files changed, 46 insertions(+), 9 deletions(-) diff --git a/ruoyi-ui/src/components/DictTag/index.vue b/ruoyi-ui/src/components/DictTag/index.vue index 4c196c4..6b5b230 100644 --- a/ruoyi-ui/src/components/DictTag/index.vue +++ b/ruoyi-ui/src/components/DictTag/index.vue @@ -3,11 +3,11 @@ <template v-for="(item, index) in options"> <template v-if="values.includes(item.value)"> <span - v-if="item.raw.listClass == 'default' || item.raw.listClass == ''" + v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)" :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,20 +36,54 @@ default: null, }, value: [Number, String, Array], + // 当未找到匹配的数据时,显示value + showValue: { + type: Boolean, + default: true, + }, + separator: { + type: String, + default: "," + } + }, + 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 []; - } + if (this.value === null || typeof this.value === 'undefined' || this.value === '') return [] + return Array.isArray(this.value) ? this.value.map(item => '' + item) : String(this.value).split(this.separator) }, + unmatch() { + this.unmatchArray = [] + // 没有value不显示 + if (this.value === null || typeof this.value === 'undefined' || this.value === '' || this.options.length === 0) return false + // 传入值为数组 + let unmatch = false // 添加一个标志来判断是否有未匹配项 + this.values.forEach(item => { + if (!this.options.some(v => v.value === item)) { + this.unmatchArray.push(item) + unmatch = true // 如果有未匹配项,将标志设置为true + } + }) + return unmatch // 返回标志的值 + }, + }, + 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