table下拉框多选回显

src/components/DictTag/src/DictTag.vue

@@ -18,7 +18,10 @@ export default defineComponent({
   },
   setup(props) {
     const dictData = ref<DictDataType>()
+    let dictDataList:any[] = []
     const getDictObj = (dictType: string, value: string) => {
+      // 判断 是否多个回显标签
+      if (value.indexOf(',') == -1) {
         const dictOptions = getDictOptions(dictType)
         dictOptions.forEach((dict: DictDataType) => {
           if (dict.value === value) {
@@ -28,6 +31,21 @@ export default defineComponent({
             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,6 +57,8 @@ export default defineComponent({
       }
       getDictObj(props.type, props.value.toString())
       // 添加标签的文字颜色为白色，解决自定义背景颜色时标签文字看不清的问题
+      // 根据 dictDataList 进行区分 是否多个
+      if (!dictDataList) {
         return (
           <ElTag
             style={dictData.value?.cssClass ? 'color: #fff' : ''}
@@ -53,6 +73,25 @@ export default defineComponent({
             {dictData.value?.label}
           </ElTag>
         )
+      } else {
+        return (
+          dictDataList.map(item => {
+            return <ElTag
+                    style={item?.cssClass ? 'color: #fff' : ''}
+                    type={item?.colorType}
+                    color={
+                      item?.cssClass && isHexColor(item?.cssClass)
+                        ? item?.cssClass
+                        : ''
+                    }
+                    disableTransitions={true}
+                  >
+                    {item?.label}
+                  </ElTag>
+          })
+        )
+      }
+      
     }
     return () => rederDictTag()
   }