From 8552850e2c8e5845ccac0bb3d5e4f6689969ce29 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: Sun, 23 Apr 2023 16:43:15 +0800
Subject: [PATCH] =?UTF-8?q?DictTag=E7=BB=84=E4=BB=B6=EF=BC=8C=E5=BD=93valu?=
=?UTF-8?q?e=E6=B2=A1=E6=9C=89=E5=8C=B9=E9=85=8D=E7=9A=84=E5=80=BC?=
=?UTF-8?q?=E6=97=B6=EF=BC=8C=E5=B1=95=E7=A4=BAvalue?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/components/DictTag/index.vue | 49 ++++++++++++++++++++++++++++----
1 file changed, 44 insertions(+), 5 deletions(-)
diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue
index 0f49315..4667310 100644
--- a/src/components/DictTag/index.vue
+++ b/src/components/DictTag/index.vue
@@ -7,7 +7,8 @@
:key="item.value"
:index="index"
:class="item.elTagClass"
- >{{ item.label }}</span>
+ >{{ item.label + " " }}</span
+ >
<el-tag
v-else
:disable-transitions="true"
@@ -15,13 +16,20 @@
:index="index"
:type="item.elTagType === 'primary' ? '' : item.elTagType"
:class="item.elTagClass"
- >{{ item.label }}</el-tag>
+ >{{ item.label + " " }}</el-tag
+ >
</template>
</template>
+ <template v-if="unmatch && showValue">
+ {{ unmatchArray | handleArray }}
+ </template>
</div>
</template>
<script setup>
+// // 记录未匹配的项
+const unmatchArray = ref([]);
+
const props = defineProps({
// 数据
options: {
@@ -30,16 +38,47 @@ const props = defineProps({
},
// 当前的值
value: [Number, String, Array],
-})
+ // 当未找到匹配的数据时，显示value
+ showValue: {
+ type: Boolean,
+ default: true,
+ },
+});
const values = computed(() => {
- if (props.value !== null && typeof props.value !== 'undefined') {
+ if (props.value !== null && typeof props.value !== "undefined") {
return Array.isArray(props.value) ? props.value : [String(props.value)];
} else {
return [];
}
-})
+});
+const unmatch = computed(() => {
+ unmatchArray.value = [];
+ if (props.value !== null && typeof props.value !== "undefined") {
+ // 传入值为非数组
+ if (!Array.isArray(props.value)) {
+ if (props.options.some((v) => v.value == props.value)) return false;
+ unmatchArray.value.push(props.value);
+ return true;
+ }
+ // 传入值为Array
+ props.value.forEach((item) => {
+ if (!props.options.some((v) => v.value == item))
+ unmatchArray.value.push(item);
+ });
+ return true;
+ }
+ // 没有value不显示
+ return false;
+});
+
+function handleArray(array) {
+ if (array.length === 0) return "";
+ return array.reduce((pre, cur) => {
+ return pre + " " + cur;
+ });
+}
</script>
<style scoped>