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

CHANGELOG.zh_CN.md

@@ -13,6 +13,7 @@
 - 确保 `table action` 的值被正确更新
 - 修复页面切换的动画无法关闭
 - 修复`PageWrapper`title 不显示
+- 修复表格数据为空时高度计算错误
 
 ## 2.0.3 (2021-03-07)
 

src/components/Page/src/PageWrapper.vue

@@ -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,7 +110,6 @@
           }
           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;
@@ -126,24 +125,24 @@
             }
             // fix:subtract content's marginTop and marginBottom value
             let subtractHeight = 0;
-              const attributes = getComputedStyle(
+            const { marginBottom, marginTop } = getComputedStyle(
-                document.querySelectorAll('.vben-page-wrapper-content')[0]
+              document.querySelectorAll(`.${prefixVar}-page-wrapper-content`)?.[0]
             );
-              if (attributes.marginBottom) {
+            if (marginBottom) {
-                const contentMarginBottom = Number(attributes.marginBottom.replace(/[^\d]/g, ''));
+              const contentMarginBottom = Number(marginBottom.replace(/[^\d]/g, ''));
               subtractHeight += contentMarginBottom;
             }
-              if (attributes.marginTop) {
+            if (marginTop) {
-                const contentMarginTop = Number(attributes.marginTop.replace(/[^\d]/g, ''));
+              const contentMarginTop = Number(marginTop.replace(/[^\d]/g, ''));
               subtractHeight += contentMarginTop;
             }
             setPageHeight?.(
               unref(contentHeight) - unref(footerHeight) - headerHeight - subtractHeight
             );
-            }, 400);
           });
         },
         {
+          flush: 'post',
           immediate: true,
         }
       );
@@ -171,6 +170,7 @@
     .@{prefix-cls}-content {
       margin: 16px 16px 0 16px;
     }
+
     .ant-page-header {
       &:empty {
         padding: 0;

src/components/Table/src/BasicTable.vue

@@ -161,7 +161,8 @@
         getProps,
         tableElRef,
         getColumnsRef,
-        getRowSelectionRef
+        getRowSelectionRef,
+        getDataSourceRef
       );
 
       const { customRow } = useCustomRow(getProps, {

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

@@ -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);
+  //320  Greater than animation time 280
-  const [debounceRedoHeight] = useDebounce(redoHeight, 250);
+  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,17 +61,17 @@ 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;
@@ -125,11 +127,11 @@ export function useTableScroll(
     if (!bodyEl) {
       bodyEl = tableEl.querySelector('.ant-table-body');
     }
+
     bodyEl!.style.height = `${height}px`;
-    }, 200);
   }
 
-  useWindowSizeFn(calcTableHeight, 200);
+  useWindowSizeFn(calcTableHeight, 280);
 
   const getScrollX = computed(() => {
     let width = 0;