fix(table): fix table height calculation problem

Because the table data obtained by the interface may be later than the calctableheight method, the table cannot adapt to the height, and a scroll bar appears on the page (#348)

src/components/Page/src/PageWrapper.vue

@@ -45,6 +45,7 @@
   import { propTypes } from '/@/utils/propTypes';
   import { omit } from 'lodash-es';
   import { PageHeader } from 'ant-design-vue';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
   export default defineComponent({
     name: 'PageWrapper',
     components: { PageFooter, PageHeader },
@@ -105,10 +106,24 @@
       watch(
         () => [contentHeight?.value, getShowFooter.value],
         () => {
+          calcContentHeight();
+        },
+        {
+          flush: 'post',
+          immediate: true,
+        }
+      );
+
+      onMountedOrActivated(() => {
+        nextTick(() => {
+          calcContentHeight();
+        });
+      });
+
+      function calcContentHeight() {
         if (!props.contentFullHeight) {
           return;
         }
-          nextTick(() => {
         //fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
         const footer = unref(footerRef);
         const header = unref(headerRef);
@@ -125,9 +140,15 @@
         }
         // fix:subtract content's marginTop and marginBottom value
         let subtractHeight = 0;
-            const { marginBottom, marginTop } = getComputedStyle(
-              document.querySelectorAll(`.${prefixVar}-page-wrapper-content`)?.[0]
-            );
+        let marginBottom = '0px';
+        let marginTop = '0px';
+        const classElments = document.querySelectorAll(`.${prefixVar}-page-wrapper-content`);
+        if (classElments && classElments.length > 0) {
+          const contentEl = classElments[0];
+          const cssStyle = getComputedStyle(contentEl);
+          marginBottom = cssStyle?.marginBottom;
+          marginTop = cssStyle?.marginTop;
+        }
         if (marginBottom) {
           const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
           subtractHeight += contentMarginBottom;
@@ -136,16 +157,8 @@
           const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
           subtractHeight += contentMarginTop;
         }
-            setPageHeight?.(
-              unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
-            );
-          });
-        },
-        {
-          flush: 'post',
-          immediate: true,
+        setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight);
       }
-      );
 
       return {
         getContentStyle,

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

@@ -9,6 +9,7 @@ import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
 import { useModalContext } from '/@/components/Modal';
 import { useDebounce } from '/@/hooks/core/useDebounce';
 import type { BasicColumn } from '/@/components/Table';
+import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';
 
 export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
@@ -21,8 +22,8 @@ export function useTableScroll(
 
   const modalFn = useModalContext();
 
-  //320  Greater than animation time 280
-  const [debounceRedoHeight] = useDebounce(redoHeight, 300);
+  // Greater than animation time 280
+  const [debounceRedoHeight] = useDebounce(redoHeight, 100);
 
   const getCanResize = computed(() => {
     const { canResize, scroll } = unref(propsRef);
@@ -30,13 +31,12 @@ export function useTableScroll(
   });
 
   watch(
-    () => unref(getCanResize),
+    () => [unref(getCanResize), , unref(getDataSourceRef)?.length],
     () => {
       debounceRedoHeight();
     },
     {
       flush: 'post',
-      immediate: true,
     }
   );
 
@@ -132,6 +132,12 @@ export function useTableScroll(
   }
 
   useWindowSizeFn(calcTableHeight, 280);
+  onMountedOrActivated(() => {
+    calcTableHeight();
+    nextTick(() => {
+      debounceRedoHeight();
+    });
+  });
 
   const getScrollX = computed(() => {
     let width = 0;