fix(table): ensure that the table height is correct when the data is empty

Vben
1 parent 1418dc6a
Showing 4 changed files with 98 additions and 94 deletions
CHANGELOG.zh_CN.md
src/components/Page/src/PageWrapper.vue
src/components/Table/src/BasicTable.vue
src/components/Table/src/hooks/useTableScroll.ts
@@ -13,6 +13,7 @@
 - 确保 `table action` 的值被正确更新
 - 修复页面切换的动画无法关闭
 - 修复`PageWrapper`title 不显示
+- 修复表格数据为空时高度计算错误
  
 ## 2.0.3 (2021-03-07)
  
@@ -66,7 +66,7 @@
       const headerRef = ref<ComponentRef>(null);
       const footerRef = ref<ComponentRef>(null);
       const footerHeight = ref(0);
-      const { prefixCls } = useDesign('page-wrapper');
+      const { prefixCls, prefixVar } = useDesign('page-wrapper');
       const { contentHeight, setPageHeight, pageHeight } = usePageContext();
  
       const getClass = computed(() => {
@@ -110,40 +110,39 @@
           }
           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;
-              const footerEl = footer?.$el;
+            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 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);
+            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
+            );
           });
         },
         {
+          flush: 'post',
           immediate: true,
         }
       );
@@ -171,6 +170,7 @@
     .@{prefix-cls}-content {
       margin: 16px 16px 0 16px;
     }
+
     .ant-page-header {
       &:empty {
         padding: 0;
@@ -161,7 +161,8 @@
         getProps,
         tableElRef,
         getColumnsRef,
-        getRowSelectionRef
+        getRowSelectionRef,
+        getDataSourceRef
       );
  
       const { customRow } = useCustomRow(getProps, {
@@ -14,14 +14,15 @@ export function useTableScroll(
   propsRef: ComputedRef<BasicTableProps>,
   tableElRef: Ref<ComponentRef>,
   columnsRef: ComputedRef<BasicColumn[]>,
-  rowSelectionRef: ComputedRef<TableRowSelection<any> | null>
+  rowSelectionRef: ComputedRef<TableRowSelection<any> | null>,
+  getDataSourceRef: ComputedRef<Recordable[]>
 ) {
   const tableHeightRef: Ref<Nullable<number>> = ref(null);
  
   const modalFn = useModalContext();
  
-  // const [debounceCalcTableHeight] = useDebounce(calcTableHeight, 80);
-  const [debounceRedoHeight] = useDebounce(redoHeight, 250);
+  //320  Greater than animation time 280
+  const [debounceRedoHeight] = useDebounce(redoHeight, 300);
  
   const getCanResize = computed(() => {
     const { canResize, scroll } = unref(propsRef);
@@ -34,6 +35,7 @@ export function useTableScroll(
       debounceRedoHeight();
     },
     {
+      flush: 'post',
       immediate: true,
     }
   );
@@ -59,77 +61,77 @@ export function useTableScroll(
  
   async function calcTableHeight() {
     const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
-    if (!unref(getCanResize)) return;
+    const tableData = unref(getDataSourceRef);
+
+    if (!unref(getCanResize) || tableData.length === 0) return;
  
     await nextTick();
     //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;
-        }
-      }
+    const table = unref(tableElRef);
+    if (!table) return;
+
+    const tableEl: Element = table.$el;
+    if (!tableEl) return;
+    const headEl = tableEl.querySelector('.ant-table-thead ');
  
-      let footerHeight = 0;
-      if (!isBoolean(pagination)) {
-        if (!footerEl) {
-          footerEl = tableEl.querySelector('.ant-table-footer') as HTMLElement;
-        } else {
-          const offsetHeight = footerEl.offsetHeight;
-          footerHeight += offsetHeight || 0;
-        }
+    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 headerHeight = 0;
-      if (headEl) {
-        headerHeight = (headEl as HTMLElement).offsetHeight;
+    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 height =
-        bottomIncludeBody -
-        (resizeHeightOffset || 0) -
-        paddingHeight -
-        borderHeight -
-        paginationHeight -
-        footerHeight -
-        headerHeight;
+    let headerHeight = 0;
+    if (headEl) {
+      headerHeight = (headEl as HTMLElement).offsetHeight;
+    }
  
-      height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
-      setHeight(height);
+    let height =
+      bottomIncludeBody -
+      (resizeHeightOffset || 0) -
+      paddingHeight -
+      borderHeight -
+      paginationHeight -
+      footerHeight -
+      headerHeight;
  
-      if (!bodyEl) {
-        bodyEl = tableEl.querySelector('.ant-table-body');
-      }
-      bodyEl!.style.height = `${height}px`;
-    }, 200);
+    height = (height > maxHeight! ? (maxHeight as number) : height) ?? height;
+    setHeight(height);
+
+    if (!bodyEl) {
+      bodyEl = tableEl.querySelector('.ant-table-body');
+    }
+
+    bodyEl!.style.height = `${height}px`;
   }
  
-  useWindowSizeFn(calcTableHeight, 200);
+  useWindowSizeFn(calcTableHeight, 280);
  
   const getScrollX = computed(() => {
     let width = 0;