!40 优化字典标签支持数组和多标签

Merge pull request !40 from 抓蛙师/ts

src/components/DictTag/index.vue

@@ -2,7 +2,8 @@
   <div>
     <template v-for="(item, index) in options">
       <template v-if="values.includes(item.value)">
-        <span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="item.value" :index="index" :class="item.elTagClass">
+        <span v-if="item.elTagType == 'default' || item.elTagType == ''" :key="item.value" :index="index"
+              :class="item.elTagClass">
           {{ item.label + " " }}
         </span>
         <el-tag
@@ -24,7 +25,7 @@
 </template>
 
 <script setup lang="ts">
-import { propTypes } from '@/utils/propTypes';
+import {propTypes} from '@/utils/propTypes';
 
 
 const props = defineProps({
@@ -37,46 +38,38 @@ const props = defineProps({
   value: [Number, String, Array] as PropType<number | string | Array<number | string>>,
   // 当未找到匹配的数据时，显示value
   showValue: propTypes.bool.def(true),
-});
+  separator: {
-
+    type: String,
-const values = computed(() => {
+    default: ','
-  if (props.value !== null && typeof props.value !== "undefined") {
-    return Array.isArray(props.value) ? props.value : [String(props.value)];
-  } else {
-    return [];
   }
 });
+const values = computed(() => {
+  if (props.value === '' || props.value === null || typeof props.value === "undefined") return []
+  let valu= Array.isArray(props.value) ? props.value.map(item => '' + item) : String(props.value).split(props.separator);
+  console.log("valu",valu)
+  return valu
+});
 
 const unmatch = computed(() => {
-  if (props.value !== null && typeof props.value !== "undefined") {
+  if (props.options?.length == 0 || props.value === '' || props.value === null || typeof props.value === "undefined") return false
-    // 传入值为非数组
+  // 传入值为非数组
-    if (!Array.isArray(props.value)) {
+  values.value.forEach(item => {
-      if (props.options.some((v) => v.value == props.value)) {
+    if (!props.options.some(v => v.value === item)) {
-        return false;
+      return true // 如果有未匹配项，将标志设置为true
-      }
-      return true;
     }
-    return true;
+  })
-  }
+  return false // 返回标志的值
-  // 没有value不显示
-  return false;
 });
 
 const unmatchArray = computed(() => {
 // 记录未匹配的项
   const itemUnmatchArray: Array<string | number> = [];
-  if (props.value !== null && typeof props.value !== "undefined") {
+  if (props.value !== '' && props.value !== null && typeof props.value !== "undefined") {
-    // 传入值为非数组
+    values.value.forEach(item => {
-    if (!Array.isArray(props.value)) {
+      if (!props.options.some(v => v.value === item)) {
-      itemUnmatchArray.push(props.value);
+        itemUnmatchArray.push(item);
-    } else {
+      }
-      // 传入值为Array
+    })
-      props.value.forEach((item) => {
-        if (!props.options.some((v) => v.value == item)) {
-          itemUnmatchArray.push(item);
-        }
-      });
-    }
   }
   // 没有value不显示
   return handleArray(itemUnmatchArray);

src/views/system/client/index.vue

@@ -53,11 +53,7 @@
         <el-table-column label="客户端秘钥" align="center" prop="clientSecret" />
         <el-table-column label="授权类型" align="center">
           <template #default="scope">
-            <div>
+            <dict-tag :options="sys_grant_type" :value="scope.row.grantTypeList" />
-              <template v-for="(type, index) in scope.row.grantTypeList" :key="index">
-                <dict-tag class="el-check-tag" :options="sys_grant_type" :value="type" />
-              </template>
-            </div>
           </template>
         </el-table-column>
         <el-table-column label="设备类型" align="center">