From 5c06fbf79cdb1ad8e048e53c0e1522cab8bb2d08 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 | 46 +++++++++++++++++++++++++++++----------
 1 file changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/components/CustomDropdown.vue b/src/components/CustomDropdown.vue
index 29879fc..b176bf5 100644
--- a/src/components/CustomDropdown.vue
+++ b/src/components/CustomDropdown.vue
@@ -3,7 +3,7 @@
         <!-- 触发按钮 -->
         <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="">
         </div>
@@ -12,16 +12,16 @@
         <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">
+                        <slot name="item" :item="item">
+                            <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>
@@ -53,6 +53,11 @@ export default {
         options: {
             type: Array,
             default: () => [],
+            validator: (value) => {
+                return Array.isArray(value) && value.every(item => 
+                    item && typeof item === 'object'
+                )
+            }
         },
         options_null: {
             type: Object,
@@ -85,28 +90,47 @@ 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;
+                }
+            }
+        }
     },
     methods: {
         closeDropdown() {
             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;
             }
             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", '');