fix(bom): assign unique popper-class by index to fix child select infinite scroll
This commit is contained in:
@ -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);
|
||||
}
|
||||
|
||||
// ============================================================
|
||||
|
||||
Reference in New Issue
Block a user