From 253502018f72d477d5f021d8a0d411336c2471d8 Mon Sep 17 00:00:00 2001
From: ray <1490493387@qq.com>
Date: Wed, 23 Oct 2024 00:58:52 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=BF=AE=E5=A4=8D=E5=AD=97?=
 =?UTF-8?q?=E5=85=B8=E7=BB=84=E4=BB=B6=E5=88=9D=E5=A7=8B=E5=80=BC=E6=97=A0?=
 =?UTF-8?q?=E6=B3=95=E5=9B=9E=E6=98=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Dict/index.vue | 34 ++++++++++++++++++++--------------
 1 file changed, 20 insertions(+), 14 deletions(-)

diff --git a/src/components/Dict/index.vue b/src/components/Dict/index.vue
index 10773bb1..bf48b873 100644
--- a/src/components/Dict/index.vue
+++ b/src/components/Dict/index.vue
@@ -52,7 +52,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch, onBeforeMount } from "vue";
 import { useDictStore } from "@/store";
 
 const dictStore = useDictStore();
@@ -109,7 +108,24 @@ watch(
     if (props.type === "checkbox") {
       selectedValue.value = Array.isArray(newValue) ? newValue : [];
     } else {
-      selectedValue.value = newValue;
+      selectedValue.value = newValue?.toString() || "";
+    }
+  },
+  { immediate: true }
+);
+
+// 监听 options 变化并重新匹配 selectedValue
+watch(
+  () => options.value,
+  (newOptions) => {
+    // options 加载后，确保 selectedValue 可以正确匹配到 options
+    if (newOptions.length > 0 && selectedValue.value !== undefined) {
+      const matchedOption = newOptions.find(
+        (option) => option.value === selectedValue.value
+      );
+      if (!matchedOption) {
+        selectedValue.value = ""; // 如果找不到匹配项，清空选中
+      }
     }
   }
 );
@@ -120,17 +136,7 @@ function handleChange(val: any) {
 }
 
 // 获取字典数据
-onBeforeMount(async () => {
-  options.value = await dictStore.getDictionary(props.code);
-
-  if (props.modelValue !== undefined) {
-    if (props.type === "checkbox") {
-      selectedValue.value = Array.isArray(props.modelValue)
-        ? props.modelValue
-        : [];
-    } else {
-      selectedValue.value = props.modelValue;
-    }
-  }
+onMounted(() => {
+  options.value = dictStore.getDictionary(props.code);
 });
 </script>