zhouyanli/wer-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix 修复 全高表格 hook 与页面溢出互相反馈 导致 el-table 滚动条抽搐

Browse Source
This commit is contained in:
疯狂的狮子Li
2026-09-24 18:36:03 +08:00
parent 4cf4c57e6e
commit 045fc00672
1 changed files with 14 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/hooks/table/useFullHeightTable.ts
View File

@@ -18,6 +18,7 @@ interface TableState {
bodyMaxHeight: string;
bodyOverflowY: string;
bodyOverflowX: string;
appliedHeight?: number;
}
const tableStates = new WeakMap<HTMLElement, TableState>();
@@ -70,11 +71,6 @@ const getTableComponent = (table: HTMLElement) => {
return getTableComponentHost(table)?.proxy;
};
const getPageOverflowHeight = () => {
const documentElement = document.documentElement;
return Math.max(0, documentElement.scrollHeight - documentElement.clientHeight);
};
const rememberTableState = (table: HTMLElement) => {
if (tableStates.has(table)) return;
@@ -112,14 +108,22 @@ const resetAllTables = () => {
};
const calculateTableHeight = (table: HTMLElement) => {
const rect = table.getBoundingClientRect();
let layoutTop = 0;
let node: HTMLElement | null = table;
while (node) {
layoutTop += node.offsetTop;
node = node.offsetParent as HTMLElement | null;
}
// Keep the calculation tied to the page layout. Using the current scroll
// position here would make scrolling change the table height again.
const viewportBottom = window.innerHeight;
const followingHeight = getFollowingHeight(table);
const bottomPadding = getBottomPadding(table);
const bottomOffset = window.innerWidth < 768 ? 28 : 32;
const minHeight = window.innerWidth < 768 ? 220 : 260;
return Math.max(minHeight, Math.floor(viewportBottom - rect.top - followingHeight - bottomPadding - bottomOffset));
return Math.max(minHeight, Math.floor(viewportBottom - layoutTop - followingHeight - bottomPadding - bottomOffset));
};
const applyTableHeightValue = (table: HTMLElement, tableHeight: number) => {
@@ -153,14 +157,11 @@ const applyTableHeightValue = (table: HTMLElement, tableHeight: number) => {
const applyTableHeight = (table: HTMLElement) => {
rememberTableState(table);
const minHeight = window.innerWidth < 768 ? 220 : 260;
const tableHeight = calculateTableHeight(table);
const state = tableStates.get(table);
if (state?.appliedHeight === tableHeight) return;
if (state) state.appliedHeight = tableHeight;
applyTableHeightValue(table, tableHeight);
const overflowHeight = getPageOverflowHeight();
if (overflowHeight > 0 && tableHeight > minHeight) {
applyTableHeightValue(table, Math.max(minHeight, tableHeight - overflowHeight - 4));
}
};
const canManageTable = (table: HTMLElement) => {
@@ -195,7 +196,6 @@ export function useFullHeightTable() {
const nextElements = new Set<Element>([
...Array.from(document.querySelectorAll('.app-main, .app-main .p-2, .app-main .table-panel')),
...Array.from(document.querySelectorAll('.app-main .search-panel, .app-main .tree-panel-shell')),
...getManagedTables()
]);
observedElements.forEach(element => {