diff --git a/inventory-web/src/views/bom/BomManage.vue b/inventory-web/src/views/bom/BomManage.vue index 8447458..5a2506d 100644 --- a/inventory-web/src/views/bom/BomManage.vue +++ b/inventory-web/src/views/bom/BomManage.vue @@ -67,9 +67,8 @@ style="width: 100%" :disabled="isEditMode" class="beautified-select" - :teleported="false" + popper-class="bom-loadmore-popper" @visible-change="(visible: boolean) => handleVisibleChange(visible, 'parent')" - v-loadmore="loadMoreParent" > { - const scrollContainer = el.querySelector(targetSelector) as HTMLElement | null - if (!scrollContainer) return - - const { scrollTop, scrollHeight, clientHeight } = scrollContainer - const distanceToBottom = scrollHeight - scrollTop - clientHeight - - // 距离底部 10px 以内时触发加载更多 - if (distanceToBottom <= 10) { - binding.value(el) - } - } - - // 使用 MutationObserver 监听 DOM 变化(Element Plus 下拉弹窗是动态创建的) - const observer = new MutationObserver(() => { - const dropdown = el.querySelector('.el-select-dropdown:not(.is-hidden)') as HTMLElement | null - if (dropdown) { - const wrap = dropdown.querySelector('.el-select-dropdown__wrap') as HTMLElement | null - if (wrap) { - wrap.removeEventListener('scroll', scrollHandler) - wrap.addEventListener('scroll', scrollHandler) - } - } - }) - - observer.observe(el, { - childList: true, - subtree: true - }) - - // 存储清理函数 - ;(el as any)._loadmoreObserver = observer - }, - unmounted(el: HTMLElement) { - const observer = (el as any)._loadmoreObserver - if (observer) { - observer.disconnect() - } - } -} - // ============================================================ // 类型定义 // ============================================================ @@ -434,6 +382,30 @@ const handleVisibleChange = (visible: boolean, type: 'parent' | 'child', index?: state.hasMore = true fetchMaterialOptions('child', index) } + + // 动态绑定触底滚动事件 + nextTick(() => { + const popperWrap = document.querySelector('.bom-loadmore-popper:not(.is-hidden) .el-select-dropdown__wrap') as HTMLElement; + if (popperWrap) { + // 先解绑可能存在的旧事件,防止重复触发 + if ((popperWrap as any)._scrollHandler) { + popperWrap.removeEventListener('scroll', (popperWrap as any)._scrollHandler); + } + // 定义滚动触发逻辑 + (popperWrap as any)._scrollHandler = function() { + const { scrollTop, scrollHeight, clientHeight } = this; + // 距离底部 10px 触发 + if (scrollHeight - scrollTop - clientHeight <= 10) { + if (type === 'parent') { + loadMoreParent(); + } else if (type === 'child' && index !== undefined) { + loadMoreChild(popperWrap, index); + } + } + }; + popperWrap.addEventListener('scroll', (popperWrap as any)._scrollHandler); + } + }); } // ============================================================