table下拉框多选回显

src/components/DictTag/src/DictTag.vue

@@ -18,16 +18,34 @@ export default defineComponent({
   },
   setup(props) {
     const dictData = ref<DictDataType>()
+    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 (
-        <ElTag
-          style={dictData.value?.cssClass ? 'color: #fff' : ''}
-          type={dictData.value?.colorType}
-          color={
-            dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
-              ? dictData.value?.cssClass
-              : ''
-          }
-          disableTransitions={true}
-        >
-          {dictData.value?.label}
-        </ElTag>
-      )
+      // 根据 dictDataList 进行区分 是否多个
+      if (!dictDataList) {
+        return (
+          <ElTag
+            style={dictData.value?.cssClass ? 'color: #fff' : ''}
+            type={dictData.value?.colorType}
+            color={
+              dictData.value?.cssClass && isHexColor(dictData.value?.cssClass)
+                ? dictData.value?.cssClass
+                : ''
+            }
+            disableTransitions={true}
+          >
+            {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()
   }