From 8382e758a89f2a3e9dd4ce220847534b3e30d99f Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Mon, 7 Jul 2025 17:28:47 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E4=B8=8B=E6=8B=89=E6=A1=86=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomDropdown.vue | 54 +++++++++++++++++++++++++++------------
 1 file changed, 38 insertions(+), 16 deletions(-)

diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 56435aa..801884f 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -1,29 +1,27 @@
 <template>
-    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }"
-        :style="{ width }">
+    <div class="custom-select" v-clickaway="closeDropdown" ref="dropdown" :class="{ 'is-open': isOpen }" :style="{width}">
         <!-- 触发按钮 -->
         <div class="select-trigger" @click="toggleDropdown">
             <slot name="trigger">
-                {{ selectedItem ? selectedItem[displayKey] : placeholder }}
+                {{ selectedItem && selectedItem[displayKey] ? selectedItem[displayKey] : placeholder }}
             </slot>
-            <img class="arrow-icon"
-                :src="isOpen ? require('../assets/dropDown_open.png') : require('../assets/dropDown_expand.png')" alt="">
+            <img class="arrow-icon" :src="isOpen? require('../assets/dropDown_open.png'):require('../assets/dropDown_expand.png')" alt="">
         </div>
 
         <!-- 下拉内容 -->
         <transition name="slide-fade">
             <div v-if="isOpen" class="select-dropdown">
                 <slot v-if="isOpen" name="normal"></slot>
-                <div v-if="options">
-                    <div v-for="(item, index) in options" :key="index" class="dropdown-item "
+                <div v-if="options && options.length">
+                    <div v-for="(item, index) in options" :key="index" class="dropdown-item"
                         :class="{ 'is-selected': isSelected(item) }" @click="selectItem(item)">
                         <slot name="item" :item="item">
-                            <div class="flex-between">
+                            <div class="flex-between" v-if="item">
                                 <div class="left">
                                     <p class="one">{{ item[displayKey] }}</p>
                                 </div>
                                 <div class="right">
-                                    <img v-if="selectedItem[displayKey] == item[displayKey]"
+                                    <img v-if="selectedItem && selectedItem[displayKey] === item[displayKey]"
                                         src="../assets/register/drop-selected.svg" alt="">
                                 </div>
                             </div>
@@ -56,10 +54,15 @@ export default {
         options: {
             type: Array,
             default: () => [],
+            validator: (value) => {
+                return Array.isArray(value) && value.every(item =>
+                    item && typeof item === 'object'
+                )
+            }
         },
         options_null: {
             type: Object,
-            default: () => { },
+            default: () => {},
         },
         placeholder: {
             type: String,
@@ -71,7 +74,7 @@ export default {
         },
         valueKey: {
             type: String,
-            default: "value",
+            default: "value", 
         },
         displayKey: {
             type: String,
@@ -88,9 +91,25 @@ export default {
         value: {
             immediate: true,
             handler(newVal) {
-                this.selectedItem = this.options.find((item) => item[this.valueKey] === newVal);
+                if (this.options && this.options.length && newVal !== undefined && newVal !== null) {
+                    this.selectedItem = this.options.find((item) =>
+                        item && item[this.valueKey] === newVal
+                    ) || null;
+                }
             },
         },
+        options: {
+            immediate: true,
+            handler(newVal) {
+                if (newVal && newVal.length && this.value !== undefined && this.value !== null) {
+                    this.selectedItem = newVal.find((item) =>
+                        item && item[this.valueKey] === this.value
+                    ) || null;
+                } else {
+                    this.selectedItem = null;
+                }
+            }
+        }
     },
     created() {
         // 监听关闭所有下拉框的事件
@@ -105,21 +124,24 @@ export default {
             this.isOpen = false;
         },
         toggleDropdown(e) {
-            if (e) {
-                e.stopPropagation();
+            if(e) e.stopPropagation();
+            if (!this.options || !this.options.length) {
+                console.warn('Dropdown options are empty');
+                return;
             }
             // 先通知所有下拉框关闭
             EventBus.$emit('close-all-dropdowns')
             this.isOpen = !this.isOpen;
         },
         selectItem(item) {
+            if (!item) return;
             this.selectedItem = item;
-            this.$emit("input", item[this.valueKey]); // Use the specified valueKey
+            this.$emit("input", item[this.valueKey]);
             this.$emit("change", item);
             this.isOpen = false;
         },
         isSelected(item) {
-            return this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
+            return item && this.selectedItem && this.selectedItem[this.valueKey] === item[this.valueKey];
         },
         selectNullItem() {
             this.$emit("changeNormal", '');