zuaa
/
vue-vben-admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(table): ensure that the height calculation is normal close #349

This commit is contained in:
Vben 2021-03-10 23:34:43 +08:00
parent 2c6aa8528d
commit 6095cb54af
1 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/components/Table/src/hooks/useTableScroll.ts
View File

@ -23,7 +23,7 @@ export function useTableScroll(
const modalFn = useModalContext(); const modalFn = useModalContext();
// Greater than animation time 280 // Greater than animation time 280
const [debounceRedoHeight] = useDebounce(redoHeight, 200); const [debounceRedoHeight] = useDebounce(redoHeight, 100);
const getCanResize = computed(() => { const getCanResize = computed(() => {
const { canResize, scroll } = unref(propsRef); const { canResize, scroll } = unref(propsRef);
@ -41,11 +41,9 @@ export function useTableScroll(
); );
function redoHeight() { function redoHeight() {
if (unref(getCanResize)) { nextTick(() => {
nextTick(() => { calcTableHeight();
calcTableHeight(); });
});
}
} }
function setHeight(heigh: number) { function setHeight(heigh: number) {
@ -63,15 +61,23 @@ export function useTableScroll(
const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef); const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
const tableData = unref(getDataSourceRef); const tableData = unref(getDataSourceRef);
if (!unref(getCanResize) || tableData.length === 0) return;
await nextTick();
//Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
const table = unref(tableElRef); const table = unref(tableElRef);
if (!table) return; if (!table) return;
const tableEl: Element = table.$el; const tableEl: Element = table.$el;
if (!tableEl) return; if (!tableEl) return;
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
}
bodyEl!.style.height = 'unset';
if (!unref(getCanResize) || tableData.length === 0) return;
await nextTick();
//Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
const headEl = tableEl.querySelector('.ant-table-thead '); const headEl = tableEl.querySelector('.ant-table-thead ');
if (!headEl) return; if (!headEl) return;
@ -124,10 +130,6 @@ export function useTableScroll(
height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
setHeight(height); setHeight(height);
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
}
bodyEl!.style.height = `${height}px`; bodyEl!.style.height = `${height}px`;
} }
useWindowSizeFn(calcTableHeight, 280); useWindowSizeFn(calcTableHeight, 280);