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

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

@@ -18,7 +18,7 @@
       </template>
     </PageHeader>
     <div
-      class="m-4 overflow-hidden"
+      class="overflow-hidden"
       :class="[`${prefixCls}-content`, contentClass]"
       :style="getContentStyle"
     >
@@ -109,6 +109,8 @@
             return;
           }
           nextTick(() => {
+            //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;
@@ -122,8 +124,23 @@
               if (headerEl) {
                 headerHeight += headerEl?.offsetHeight ?? 0;
               }
-
-            setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight);
+              //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;

src/components/Table/src/hooks/useTableScroll.ts

@@ -62,6 +62,8 @@ export function useTableScroll(
     if (!unref(getCanResize)) return;
 
     await nextTick();
+    //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
+    setTimeout(() => {
       const table = unref(tableElRef);
       if (!table) return;
 
@@ -124,6 +126,7 @@ export function useTableScroll(
         bodyEl = tableEl.querySelector('.ant-table-body');
       }
       bodyEl!.style.height = `${height}px`;
+    }, 200);
   }
 
   useWindowSizeFn(calcTableHeight, 200);