index.vue
2.07 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<template>
<div>
<template v-for="(item, index) in options">
<template v-if="values.includes(item.value)">
<span
v-if="item.elTagType == 'default' || item.elTagType == ''"
:key="item.value"
:index="index"
:class="item.elTagClass"
>{{ item.label + " " }}</span
>
<el-tag
v-else
:disable-transitions="true"
:key="item.value + ''"
:index="index"
:type="item.elTagType === 'primary' ? '' : item.elTagType"
:class="item.elTagClass"
>{{ 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: {
type: Array,
default: null,
},
// 当前的值
value: [Number, String, Array],
// 当未找到匹配的数据时，显示value
showValue: {
type: Boolean,
default: true,
},
});
const values = computed(() => {
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>
.el-tag + .el-tag {
margin-left: 10px;
}
</style>