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>
</PageHeader>
<div
class="m-4 overflow-hidden"
class="overflow-hidden"
:class="[`${prefixCls}-content`, contentClass]"
:style="getContentStyle"
>
@ -109,21 +109,38 @@
return;
}
nextTick(() => {
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
//fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
setTimeout(() => {
const footer = unref(footerRef);
const header = unref(headerRef);
footerHeight.value = 0;
const footerEl = footer?.$el;
if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}
setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight);
if (footerEl) {
footerHeight.value += footerEl?.offsetHeight ?? 0;
}
let headerHeight = 0;
const headerEl = header?.$el;
if (headerEl) {
headerHeight += headerEl?.offsetHeight ?? 0;
}
//fix:subtract content's marginTop and marginBottom value
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} {
position: relative;
.@{prefix-cls}-content {
margin: 16px 16px 0 16px;
}
.ant-page-header {
&:empty {
padding: 0;

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

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