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 | 65 +++++++++++++++++++++++++------- 1 files changed, 51 insertions(+), 14 deletions(-) diff --git a/ruoyi-ui/src/components/DictTag/index.vue b/ruoyi-ui/src/components/DictTag/index.vue index b0484bc..6b5b230 100644 --- a/ruoyi-ui/src/components/DictTag/index.vue +++ b/ruoyi-ui/src/components/DictTag/index.vue @@ -1,25 +1,28 @@ <template> <div> <template v-for="(item, index) in options"> - <template v-if="values.includes(item.dictValue)"> + <template v-if="values.includes(item.value)"> <span - v-if="item.listClass == 'default' || item.listClass == ''" - :key="item.dictValue" + v-if="(item.raw.listClass == 'default' || item.raw.listClass == '') && (item.raw.cssClass == '' || item.raw.cssClass == null)" + :key="item.value" :index="index" - :class="item.cssClass" - >{{ item.dictLabel }}</span + :class="item.raw.cssClass" + >{{ item.label + ' ' }}</span > <el-tag v-else :disable-transitions="true" - :key="item.dictValue" + :key="item.value" :index="index" - :type="item.listClass == 'primary' ? '' : item.listClass" - :class="item.cssClass" + :type="item.raw.listClass == 'primary' ? '' : item.raw.listClass" + :class="item.raw.cssClass" > - {{ item.dictLabel }} + {{ item.label + ' ' }} </el-tag> </template> + </template> + <template v-if="unmatch && showValue"> + {{ unmatchArray | handleArray }} </template> </div> </template> @@ -33,16 +36,50 @@ 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> -- Gitblit v1.9.2