fix(page-wraper): fix PageWrapper the scroll bar on the right side of the conten…

…t area when the user clicks on the tab page to reload the page (#341)

fix(page-wraper): fix PageWrapper the scroll bar on the right side of the conten…
…t area when the user clicks on the tab page to reload the page (#341)
ztw2010 · GitHub
1 parent e8fe6a92
Showing 2 changed files with 93 additions and 70 deletions
src/components/Page/src/PageWrapper.vue
src/components/Table/src/hooks/useTableScroll.ts
@@ -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;
@@ -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);