diff --git a/src/components/DictTag/src/DictTag.vue b/src/components/DictTag/src/DictTag.vue index db37f7140..b4d096efb 100644 --- a/src/components/DictTag/src/DictTag.vue +++ b/src/components/DictTag/src/DictTag.vue @@ -18,16 +18,34 @@ export default defineComponent({ }, setup(props) { const dictData = ref() + let dictDataList:any[] = [] const getDictObj = (dictType: string, value: string) => { - const dictOptions = getDictOptions(dictType) - dictOptions.forEach((dict: DictDataType) => { - if (dict.value === value) { - if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') { - dict.colorType = '' + // 判断 是否多个回显标签 + if (value.indexOf(',') == -1) { + const dictOptions = getDictOptions(dictType) + dictOptions.forEach((dict: DictDataType) => { + if (dict.value === value) { + if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') { + dict.colorType = '' + } + dictData.value = dict } - dictData.value = dict - } - }) + }) + } else { + dictDataList = [] + value.split(',').forEach(item => { + const dictOptions = getDictOptions(dictType) + dictOptions.forEach((dict: DictDataType) => { + if (dict.value === item) { + if (dict.colorType + '' === 'primary' || dict.colorType + '' === 'default') { + dict.colorType = '' + } + dictData.value = dict + dictDataList.push(dictData.value) + } + }) + }) + } } const rederDictTag = () => { if (!props.type) { @@ -39,20 +57,41 @@ export default defineComponent({ } getDictObj(props.type, props.value.toString()) // 添加标签的文字颜色为白色,解决自定义背景颜色时标签文字看不清的问题 - return ( - - {dictData.value?.label} - - ) + // 根据 dictDataList 进行区分 是否多个 + if (!dictDataList) { + return ( + + {dictData.value?.label} + + ) + } else { + return ( + dictDataList.map(item => { + return + {item?.label} + + }) + ) + } + } return () => rederDictTag() }