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)

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)
ztw2010 · GitHub
1 parent 9aa1be82
Showing 2 changed files with 58 additions and 39 deletions
src/components/Page/src/PageWrapper.vue
src/components/Table/src/hooks/useTableScroll.ts
@@ -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,41 +106,7 @@
       watch(
         () => [contentHeight?.value, getShowFooter.value],
         () => {
-          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);
-            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;
-            }
-            // fix:subtract content's marginTop and marginBottom value
-            let subtractHeight = 0;
-            const { marginBottom, marginTop } = getComputedStyle(
-              document.querySelectorAll(`.${prefixVar}-page-wrapper-content`)?.[0]
-            );
-            if (marginBottom) {
-              const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
-              subtractHeight += contentMarginBottom;
-            }
-            if (marginTop) {
-              const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
-              subtractHeight += contentMarginTop;
-            }
-            setPageHeight?.(
-              unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
-            );
-          });
+          calcContentHeight();
         },
         {
           flush: 'post',
@@ -147,6 +114,52 @@
         }
       );
+      onMountedOrActivated(() => {
+        nextTick(() => {
+          calcContentHeight();
+        });
+      });
+
+      function calcContentHeight() {
+        if (!props.contentFullHeight) {
+          return;
+        }
+        //fix:in contentHeight mode: delay getting footer and header dom element to get the correct height
+        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;
+        }
+        // fix:subtract content's marginTop and marginBottom value
+        let subtractHeight = 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;
+        }
+        if (marginTop) {
+          const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
+          subtractHeight += contentMarginTop;
+        }
+        setPageHeight?.(unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight);
+      }
+
       return {
         getContentStyle,
         footerRef,
@@ -9,6 +9,7 @@ import { useWindowSizeFn } from &#39;/@/hooks/event/useWindowSizeFn&#39;;
 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;