From cc9e78f8f344160f3ab9c239b011c95e6b137633 Mon Sep 17 00:00:00 2001
From: Uyarn <uyarnchen@gmail.com>
Date: Fri, 16 Aug 2024 13:17:17 +0800
Subject: [PATCH] fix(Dropdown): fix dropdown item calcuation height

---
 src/dropdown/dropdown-menu.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/dropdown/dropdown-menu.tsx b/src/dropdown/dropdown-menu.tsx
index dda9ca30a7..5ae0375dc5 100644
--- a/src/dropdown/dropdown-menu.tsx
+++ b/src/dropdown/dropdown-menu.tsx
@@ -17,6 +17,7 @@ export default defineComponent({
     const dropdownClass = usePrefixClass('dropdown');
     const dropdownMenuClass = usePrefixClass('dropdown__menu');
     const scrollTopMap = reactive({});
+    const itemHeight = ref(null);
     const menuRef = ref<HTMLElement>();
     const isOverMaxHeight = ref(false);
     const { ChevronRightIcon } = useGlobalIcon({
@@ -39,6 +40,7 @@ export default defineComponent({
         const menuHeight = parseInt(window?.getComputedStyle(menuRef.value).height, 10);
         if (menuHeight >= props.maxHeight) isOverMaxHeight.value = true;
       }
+      itemHeight.value = document.querySelector(`.${dropdownClass.value}__item`).scrollHeight + 2;
     });
 
     const getContent = (content: string | TNode) => {
@@ -54,7 +56,7 @@ export default defineComponent({
       let renderContent;
       data.forEach?.((menu, idx) => {
         const optionItem = { ...(menu as DropdownOption) };
-        const onViewIdx = idx - Math.ceil(scrollTopMap[deep] / 30);
+        const onViewIdx = idx - Math.ceil(scrollTopMap[deep] / itemHeight.value);
         const renderIdx = onViewIdx >= 0 ? onViewIdx : idx;
 
         if (optionItem.children) {
@@ -86,7 +88,7 @@ export default defineComponent({
                   ]}
                   style={{
                     position: 'absolute',
-                    top: `${renderIdx * 30}px`,
+                    top: `${renderIdx * itemHeight.value}px`,
                   }}
                 >
                   <div