mirror of
https://github.com/vbenjs/vue-vben-admin.git
synced 2025-01-25 02:58:43 +08:00
chore: split function for easy maintain, understand and using (#2945)
This commit is contained in:
parent
a065de4fbc
commit
0bd98b3c27
@ -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,7 +88,11 @@ export function useTableScroll(
|
||||
} else {
|
||||
paginationHeight = -8;
|
||||
}
|
||||
return paginationHeight;
|
||||
}
|
||||
|
||||
function caclFooterHeight(tableEl: Element): number {
|
||||
const { pagination } = unref(propsRef);
|
||||
let footerHeight = 0;
|
||||
if (!isBoolean(pagination)) {
|
||||
if (!footerEl) {
|
||||
@ -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;
|
||||
@ -158,6 +146,45 @@ export function useTableScroll(
|
||||
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) -
|
||||
|
Loading…
Reference in New Issue
Block a user