Skip to content

fix(Table): fix last scroll position when page change #3805

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
uyarn merged 1 commit into from
Jan 21, 2026
Merged

fix(Table): fix last scroll position when page change #3805

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions src/table/base-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export default defineComponent({
onHorizontalScroll,
updateAffixHeaderOrFooter,
setTableContentRef,
updateHorizontalScroll,
} = useAffix(props);

const { showElement } = useElementLazyRender(tableRef, lazyLoad);
Expand All @@ -134,6 +135,12 @@ export default defineComponent({
tableContentRef,
);

watch(innerPagination, () => {
if (showAffixHeader || showAffixFooter || showAffixPagination) {
updateHorizontalScroll();
}
});

const onInnerResizeChange: BaseTableProps['onColumnResizeChange'] = (p) => {
props.onColumnResizeChange?.(p);
context.emit('column-resize-change', p);
Expand Down
8 changes: 8 additions & 0 deletions src/table/hooks/useAffix.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export default function useAffix(props: TdBaseTableProps) {
const showAffixFooter = ref(true);
// 当表格完全滚动消失在视野时，需要隐藏吸底分页器
const showAffixPagination = ref(true);

const scrollLeftValue = ref(0);
// 当鼠标按下拖动内容来滚动时，需要更新表头位置（Windows 按下鼠标横向滚动，滚动结束后，再松开鼠标）
let isMousedown = false;
let isMouseInScrollableArea = false;
Expand All @@ -53,6 +55,7 @@ export default function useAffix(props: TdBaseTableProps) {
// 如果 lastScrollLeft 等于 left，说明不是横向滚动，不需要更新横向滚动距离
if (lastScrollLeft === left) return;
lastScrollLeft = left;
scrollLeftValue.value = left;
// 表格内容、吸顶表头、吸底表尾、吸底横向滚动更新
const toUpdateScrollElement = [
tableContentRef.value,
Expand All @@ -67,6 +70,10 @@ export default function useAffix(props: TdBaseTableProps) {
}
};

const updateHorizontalScroll = () => {
tableContentRef.value.scrollLeft = lastScrollLeft;
};

// 吸底的元素（footer、分页器）是否显示
const isAffixedBottomElementShow = (elementRect: DOMRect, tableRect: DOMRect, headerHeight: number) => tableRect.top + headerHeight < elementRect.top && elementRect.top > elementRect.height;

Expand Down Expand Up @@ -349,5 +356,6 @@ export default function useAffix(props: TdBaseTableProps) {
onHorizontalScroll,
setTableContentRef,
updateAffixHeaderOrFooter,
updateHorizontalScroll,
};
}
Loading