fix(bom): assign unique popper-class by index to fix child select infinite scroll

This commit is contained in:
DXC
2026-03-24 16:09:00 +08:00
parent 9d79a3cebb
commit 6f977a74c7

View File

@ -67,7 +67,7 @@
style="width: 100%"
:disabled="isEditMode"
class="beautified-select"
popper-class="bom-loadmore-popper"
popper-class="bom-loadmore-popper parent-popper"
@visible-change="(visible: boolean) => handleVisibleChange(visible, 'parent')"
>
<el-option
@ -147,7 +147,7 @@
:loading="selectLoading"
style="width: 100%"
:loading-text="`正在加载第 ${childQueryParams.page} 页...`"
popper-class="bom-loadmore-popper"
:popper-class="`bom-loadmore-popper child-popper-${$index}`"
@visible-change="(visible: boolean) => handleVisibleChange(visible, 'child', $index)"
>
<el-option
@ -383,14 +383,21 @@ const handleVisibleChange = (visible: boolean, type: 'parent' | 'child', index?:
fetchMaterialOptions('child', index)
}
// 动态绑定触底滚动事件
nextTick(() => {
const popperWrap = document.querySelector('.bom-loadmore-popper:not(.is-hidden) .el-select-dropdown__wrap') as HTMLElement;
// 延迟 50ms 等待弹窗 DOM 完全渲染
setTimeout(() => {
// 动态拼接精确的选择器
const exactSelector = type === 'parent'
? '.parent-popper .el-select-dropdown__wrap'
: `.child-popper-${index} .el-select-dropdown__wrap`;
const popperWrap = document.querySelector(exactSelector) 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;
@ -399,13 +406,14 @@ const handleVisibleChange = (visible: boolean, type: 'parent' | 'child', index?:
if (type === 'parent') {
loadMoreParent();
} else if (type === 'child' && index !== undefined) {
// 触发子件加载
loadMoreChild(popperWrap, index);
}
}
};
popperWrap.addEventListener('scroll', (popperWrap as any)._scrollHandler);
}
});
}, 50);
}
// ============================================================