From cb80de3742d66cfee20bc3136c735e5ca5a7d45c Mon Sep 17 00:00:00 2001 From: RuoYi <yzz_ivy@163.com> Date: 星期三, 29 十一月 2023 12:44:42 +0800 Subject: [PATCH] 优化字典标签支持自定义分隔符 --- src/components/DictTag/index.vue | 46 ++++++++++++++++++++-------------------------- 1 files changed, 20 insertions(+), 26 deletions(-) diff --git a/src/components/DictTag/index.vue b/src/components/DictTag/index.vue index 71a3480..e29b276 100644 --- a/src/components/DictTag/index.vue +++ b/src/components/DictTag/index.vue @@ -7,8 +7,7 @@ :key="item.value" :index="index" :class="item.elTagClass" - >{{ item.label + " " }}</span - > + >{{ item.label + " " }}</span> <el-tag v-else :disable-transitions="true" @@ -16,8 +15,7 @@ :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"> @@ -27,7 +25,7 @@ </template> <script setup> -// // 璁板綍鏈尮閰嶇殑椤� +// 璁板綍鏈尮閰嶇殑椤� const unmatchArray = ref([]); const props = defineProps({ @@ -43,34 +41,30 @@ type: Boolean, default: true, }, + separator: { + type: String, + default: ",", + } }); const values = computed(() => { - if (props.value !== null && typeof props.value !== "undefined") { - return Array.isArray(props.value) ? props.value : [String(props.value)]; - } else { - return []; - } + 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 = []; - 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; + if (props.value === null || typeof props.value === 'undefined' || props.value === '' || 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) { @@ -85,4 +79,4 @@ .el-tag + .el-tag { margin-left: 10px; } -</style> \ No newline at end of file +</style> -- Gitblit v1.9.3