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
89
90
91
92
93
94
95
96
97
98
99
100
101
<template>
<div>
<template v-for="(item, index) in options">
<template v-if="values.includes(item.value)">
<span
v-if="
(item.elTagType == 'default' || item.elTagType == '') &&
(item.elTagClass == '' || item.elTagClass == null)
"
:key="item.value"
:index="index"
:class="item.elTagClass"
>{{ item.label + ' ' }}</span
>
<el-tag
v-else
:key="item.value + ''"
:disable-transitions="true"
:index="index"
:type="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,
},
separator: {
type: String,
default: ',',
},
})
const values = computed(() => {
if (
props.value === null ||
typeof props.value === 'undefined' ||
props.value === ''
)
return []
return Array.isArray(props.value)
? props.value.map((item) => '' + item)
: String(props.value).split(props.separator)
})
const unmatch = computed(() => {
unmatchArray.value = []
// 没有value不显示
if (
props.value === null ||
typeof props.value === 'undefined' ||
props.value === '' ||
!Array.isArray(props.options) ||
props.options.length === 0
)
return false
// 传入值为数组
let unmatch = false // 添加一个标志来判断是否有未匹配项
values.value.forEach((item) => {
if (!props.options.some((v) => v.value === item)) {
unmatchArray.value.push(item)
unmatch = true // 如果有未匹配项，将标志设置为true
}
})
return unmatch // 返回标志的值
})
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>