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