fix(table): ensure that the height calculation is normal close #349

vbenjs · Mar 10, 2021 · 6095cb5 · 6095cb5
1 parent 2c6aa85
commit 6095cb5
Showing 1 changed file with 16 additions and 14 deletions.
diff --git a/src/components/Table/src/hooks/useTableScroll.ts b/src/components/Table/src/hooks/useTableScroll.ts
@@ -23,7 +23,7 @@ export function useTableScroll(
   const modalFn = useModalContext();
 
   // Greater than animation time 280
-  const [debounceRedoHeight] = useDebounce(redoHeight, 200);
+  const [debounceRedoHeight] = useDebounce(redoHeight, 100);
 
   const getCanResize = computed(() => {
     const { canResize, scroll } = unref(propsRef);
@@ -41,11 +41,9 @@ export function useTableScroll(
   );
 
   function redoHeight() {
-    if (unref(getCanResize)) {
-      nextTick(() => {
-        calcTableHeight();
-      });
-    }
+    nextTick(() => {
+      calcTableHeight();
+    });
   }
 
   function setHeight(heigh: number) {
@@ -63,15 +61,23 @@ export function useTableScroll(
     const { resizeHeightOffset, pagination, maxHeight } = unref(propsRef);
     const tableData = unref(getDataSourceRef);
 
-    if (!unref(getCanResize) || tableData.length === 0) return;
-
-    await nextTick();
-    //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
     const table = unref(tableElRef);
     if (!table) return;
 
     const tableEl: Element = table.$el;
     if (!tableEl) return;
+
+    if (!bodyEl) {
+      bodyEl = tableEl.querySelector('.ant-table-body');
+    }
+
+    bodyEl!.style.height = 'unset';
+
+    if (!unref(getCanResize) || tableData.length === 0) return;
+
+    await nextTick();
+    //Add a delay to get the correct bottomIncludeBody paginationHeight footerHeight headerHeight
+
     const headEl = tableEl.querySelector('.ant-table-thead ');
 
     if (!headEl) return;
@@ -124,10 +130,6 @@ export function useTableScroll(
     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, 280);