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

fix(page-wraper): fix PageWrapper the scroll bar on the right side of the content area when the user clicks on the tab page to reload the page (#341)

This commit is contained in:
ztw2010 2021-03-09 22:01:17 +08:00 committed by GitHub
parent e8fe6a929b
commit fcff2cb191
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 88 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/components/Page/src/PageWrapper.vue
View File

@ -18,7 +18,7 @@
</template> </template>
</PageHeader> </PageHeader>
<div <div
class="m-4 overflow-hidden" class="overflow-hidden"
:class="[`${prefixCls}-content`, contentClass]" :class="[`${prefixCls}-content`, contentClass]"
:style="getContentStyle" :style="getContentStyle"
> >
@ -109,21 +109,38 @@
return; return;
} }
nextTick(() => { nextTick(() => {
const footer = unref(footerRef); //fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
const header = unref(headerRef); setTimeout(() => {
footerHeight.value = 0; const footer = unref(footerRef);
const footerEl = footer?.$el; const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
if (footerEl) { if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0; footerHeight.value += footerEl?.offsetHeight ?? 0;
} }
let headerHeight = 0; let headerHeight = 0;
const headerEl = header?.$el; const headerEl = header?.$el;
if (headerEl) { if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0; headerHeight += headerEl?.offsetHeight ?? 0;
} }
//fix:subtract content's marginTop and marginBottom value
setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight); let subtractHeight = 0;
const attributes = getComputedStyle(
document.querySelectorAll('.vben-page-wrapper-content')[0]
);
if (attributes.marginBottom) {
const contentMarginBottom = Number(attributes.marginBottom.replace(/[^\d]/g, ''));
subtractHeight += contentMarginBottom;
}
if (attributes.marginTop) {
const contentMarginTop = Number(attributes.marginTop.replace(/[^\d]/g, ''));
subtractHeight += contentMarginTop;
}
setPageHeight?.(
unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
);
}, 400);
}); });
}, },
{ {
@ -151,6 +168,9 @@
.@{prefix-cls} { .@{prefix-cls} {
position: relative; position: relative;
.@{prefix-cls}-content {
margin: 16px 16px 0 16px;
}
.ant-page-header { .ant-page-header {
&:empty { &:empty {
padding: 0; padding: 0;

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

@ -62,68 +62,71 @@ export function useTableScroll(
if (!unref(getCanResize)) return; if (!unref(getCanResize)) return;
await nextTick(); await nextTick();
const table = unref(tableElRef); //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
if (!table) return; setTimeout(() => {
const table = unref(tableElRef);
if (!table) return;
const tableEl: Element = table.$el; const tableEl: Element = table.$el;
if (!tableEl) return; if (!tableEl) return;
const headEl = tableEl.querySelector('.ant-table-thead '); const headEl = tableEl.querySelector('.ant-table-thead ');
if (!headEl) return; if (!headEl) return;
// Table height from bottom // Table height from bottom
const { bottomIncludeBody } = getViewportOffset(headEl); const { bottomIncludeBody } = getViewportOffset(headEl);
// Table height from bottom height-custom offset // Table height from bottom height-custom offset
const paddingHeight = 32; const paddingHeight = 32;
const borderHeight = 0; const borderHeight = 0;
// Pager height // Pager height
let paginationHeight = 2; let paginationHeight = 2;
if (!isBoolean(pagination)) { if (!isBoolean(pagination)) {
if (!paginationEl) { if (!paginationEl) {
paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement; paginationEl = tableEl.querySelector('.ant-pagination') as HTMLElement;
}
if (paginationEl) {
const offsetHeight = paginationEl.offsetHeight;
paginationHeight += offsetHeight || 0;
} else {
// TODO First fix 24
paginationHeight += 24;
}
} }
if (paginationEl) {
const offsetHeight = paginationEl.offsetHeight; let footerHeight = 0;
paginationHeight += offsetHeight || 0; if (!isBoolean(pagination)) {
} else { if (!footerEl) {
// TODO First fix 24 footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
paginationHeight += 24; } else {
const offsetHeight = footerEl.offsetHeight;
footerHeight += offsetHeight || 0;
}
} }
}
let footerHeight = 0; let headerHeight = 0;
if (!isBoolean(pagination)) { if (headEl) {
if (!footerEl) { headerHeight = (headEl as HTMLElement).offsetHeight;
footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
} else {
const offsetHeight = footerEl.offsetHeight;
footerHeight += offsetHeight || 0;
} }
}
let headerHeight = 0; let height =
if (headEl) { bottomIncludeBody -
headerHeight = (headEl as HTMLElement).offsetHeight; (resizeHeightOffset || 0) -
} paddingHeight -
borderHeight -
paginationHeight -
footerHeight -
headerHeight;
let height = height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
bottomIncludeBody - setHeight(height);
(resizeHeightOffset || 0) -
paddingHeight -
borderHeight -
paginationHeight -
footerHeight -
headerHeight;
height = (height > maxHeight! ? (maxHeight as number) : height) ?? height; if (!bodyEl) {
setHeight(height); bodyEl = tableEl.querySelector('.ant-table-body');
}
if (!bodyEl) { bodyEl!.style.height = `${height}px`;
bodyEl = tableEl.querySelector('.ant-table-body'); }, 200);
}
bodyEl!.style.height = `${height}px`;
} }
useWindowSizeFn(calcTableHeight, 200); useWindowSizeFn(calcTableHeight, 200);