From 8552850e2c8e5845ccac0bb3d5e4f6689969ce29 Mon Sep 17 00:00:00 2001
From: RuoYi <yzz_ivy@163.com>
Date: 星期日, 23 四月 2023 16:43:15 +0800
Subject: [PATCH] DictTag组件，当value没有匹配的值时，展示value
---
src/components/DictTag/index.vue | 49 ++++++++++++++++++++++++++++++++++++++++++++-----
1 files 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 @@
},
// 褰撳墠鐨勫��
value: [Number, String, Array],
-})
+ // 褰撴湭鎵惧埌鍖归厤鐨勬暟鎹椂锛屾樉绀簐alue
+ 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>
--
Gitblit v1.9.3