github_mirrors/vue-vben-admin
1
0
Fork 0
mirror of https://github.com/vbenjs/vue-vben-admin.git synced 2025-01-24 18:40:22 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

chore: split function for easy maintain, understand and using (#2945)

Browse Source
This commit is contained in:
Cao Duc Anh 2023-08-03 15:28:34 +07:00 committed by GitHub
parent a065de4fbc
commit 0bd98b3c27
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 58 additions and 31 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -53,22 +53,7 @@ export function useTableScroll(
let footerEl: HTMLElement | null;
let bodyEl: HTMLElement | null;
async function calcTableHeight() {
const { resizeHeightOffset, pagination, maxHeight, isCanResizeParent, useSearchForm } =
unref(propsRef);
const tableData = unref(getDataSourceRef);
const table = unref(tableElRef);
if (!table) return;
const tableEl: Element = table.$el;
if (!tableEl) return;
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
if (!bodyEl) return;
}
function handleScrollBar(bodyEl: HTMLElement, tableEl: Element) {
const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
@ -85,20 +70,10 @@ export function useTableScroll(
} else {
!tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
}
}
bodyEl!.style.height = 'unset';
if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
await nextTick();
// Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
const headEl = tableEl.querySelector('.ant-table-thead ');
if (!headEl) return;
// Table height from bottom height-custom offset
let paddingHeight = 32;
function caclPaginationHeight(tableEl: Element): number {
const { pagination } = unref(propsRef);
// Pager height
let paginationHeight = 2;
if (!isBoolean(pagination)) {
@ -113,8 +88,12 @@ export function useTableScroll(
} else {
paginationHeight = -8;
}
return paginationHeight;
}
let footerHeight = 0;
function caclFooterHeight(tableEl: Element): number {
const { pagination } = unref(propsRef);
let footerHeight = 0;
if (!isBoolean(pagination)) {
if (!footerEl) {
footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
@ -123,12 +102,21 @@ export function useTableScroll(
footerHeight += offsetHeight || 0;
}
}
return footerHeight;
}
function calcHeaderHeight(headEl: Element): number {
let headerHeight = 0;
if (headEl) {
headerHeight = (headEl as HTMLElement).offsetHeight;
}
return headerHeight;
}
function calcBottomAndPaddingHeight(tableEl: Element, headEl: Element) {
const { pagination, isCanResizeParent, useSearchForm } = unref(propsRef);
// Table height from bottom height-custom offset
let paddingHeight = 30;
let bottomIncludeBody = 0;
if (unref(wrapRef) && isCanResizeParent) {
const tablePadding = 12;
@ -157,7 +145,46 @@ export function useTableScroll(
// Table height from bottom
bottomIncludeBody = getViewportOffset(headEl).bottomIncludeBody;
}
return {
paddingHeight,
bottomIncludeBody,
};
}
async function calcTableHeight() {
const { resizeHeightOffset, maxHeight } = unref(propsRef);
const tableData = unref(getDataSourceRef);
const table = unref(tableElRef);
if (!table) return;
const tableEl: Element = table.$el;
if (!tableEl) return;
if (!bodyEl) {
bodyEl = tableEl.querySelector('.ant-table-body');
if (!bodyEl) return;
}
handleScrollBar(bodyEl, tableEl);
bodyEl!.style.height = 'unset';
if (!unref(getCanResize) || !unref(tableData) || tableData.length === 0) return;
await nextTick();
// Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
const headEl = tableEl.querySelector('.ant-table-thead ');
if (!headEl) return;
const paginationHeight = caclPaginationHeight(tableEl);
const footerHeight = caclFooterHeight(tableEl);
const headerHeight = calcHeaderHeight(headEl);
const { paddingHeight, bottomIncludeBody } = calcBottomAndPaddingHeight(tableEl, headEl);
let height =
bottomIncludeBody -
(resizeHeightOffset || 0) -
@ -215,4 +242,4 @@ export function useTableScroll(
});
return { getScrollRef, redoHeight };
}
}