From fcff2cb1911f1e18017f25b3509d1c67f7e86e81 Mon Sep 17 00:00:00 2001
From: ztw2010 <1148611348@qq.com>
Date: Tue, 9 Mar 2021 22:01:17 +0800
Subject: [PATCH] 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)
---
src/components/Page/src/PageWrapper.vue | 50 +++++---
.../Table/src/hooks/useTableScroll.ts | 113 +++++++++---------
2 files changed, 93 insertions(+), 70 deletions(-)
diff --git a/src/components/Page/src/PageWrapper.vue b/src/components/Page/src/PageWrapper.vue
index c3223a09..e989e9d2 100644
--- a/src/components/Page/src/PageWrapper.vue
+++ b/src/components/Page/src/PageWrapper.vue
@@ -18,7 +18,7 @@
@@ -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;
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
index 1675cf0d..a1912d13 100644
--- a/src/components/Table/src/hooks/useTableScroll.ts
+++ b/src/components/Table/src/hooks/useTableScroll.ts
@@ -62,68 +62,71 @@ export function useTableScroll(
if (!unref(getCanResize)) return;
await nextTick();
- const table = unref(tableElRef);
- if (!table) return;
-
- const tableEl: Element = table.$el;
- if (!tableEl) return;
-
- const headEl = tableEl.querySelector('.ant-table-thead ');
-
- if (!headEl) return;
-
- // 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;
- }
- if (paginationEl) {
- const offsetHeight = paginationEl.offsetHeight;
- paginationHeight += offsetHeight || 0;
- } else {
- // TODO First fix 24
- paginationHeight += 24;
+ //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 headEl = tableEl.querySelector('.ant-table-thead ');
+
+ if (!headEl) return;
+
+ // 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;
+ }
+ 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);
--
GitLab