fix(table): width of table empty node can not keep with table width

Tencent · Sep 2, 2022 · 5d65042 · 5d65042
1 parent 74be5ad
commit 5d65042
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 9 deletions.
diff --git a/src/table/BaseTable.tsx b/src/table/BaseTable.tsx
@@ -64,6 +64,7 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     getThWidthList,
     updateThWidthList,
     setRecalculateColWidthFuncRef,
+    addTableResizeObserver,
   } = useFixed(props, finalColumns);
 
   // 1. 表头吸顶；2. 表尾吸底；3. 底部滚动条吸底；4. 分页器吸底
@@ -181,6 +182,11 @@ const BaseTable = forwardRef((props: TBaseTableProps, ref) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [tableContentRef]);
 
+  useEffect(() => {
+    addTableResizeObserver(tableRef.current);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [tableRef]);
+
   useEffect(getTFootHeight, [tableElmRef]);
 
   const newData = isPaginateData ? dataSource : data;

diff --git a/src/table/hooks/useFixed.ts b/src/table/hooks/useFixed.ts
@@ -1,6 +1,7 @@
 import { useEffect, useState, useMemo, useRef, WheelEvent } from 'react';
 import get from 'lodash/get';
 import debounce from 'lodash/debounce';
+import { getIEVersion } from 'tdesign-react/_common/js/utils/helper';
 import log from '../../_common/js/log';
 import { ClassName, Styles } from '../../common';
 import { BaseTableCol, TableRowData, TdBaseTableProps } from '../type';
@@ -13,7 +14,6 @@ import {
   TableColFixedClasses,
   RecalculateColumnWidthFunc,
 } from '../interface';
-// import { TDisplayNoneElementRefresh } from '../../hooks/useDestroyOnClose';
 
 // 固定列相关类名处理
 export function getColumnFixedStyles(
@@ -478,28 +478,36 @@ export default function useFixed(props: TdBaseTableProps, finalColumns: BaseTabl
 
   const onResize = refreshTable;
 
-  // 父元素 display: none 的变化，子元素无法监听到，通过 provide/inject 方式处理组件更新
-  // watch([displayNoneElementRefresh], () => {
-  //   if (!displayNoneElementRefresh) return;
-  //   requestAnimationFrame ? requestAnimationFrame(refreshTable) : refreshTable();
-  // });
+  function addTableResizeObserver(tableElement: HTMLDivElement) {
+    // IE 11 以下使用 window resize；IE 11 以上使用 ResizeObserver
+    if (getIEVersion() < 11) return;
+    const ro = new ResizeObserver(() => {
+      refreshTable();
+    });
+    // 观察一个或多个元素
+    ro.observe(tableElement);
+  }
 
   useEffect(() => {
     const scrollWidth = getScrollbarWidth();
     setScrollbarWidth(scrollWidth);
+    const isWatchResize = isFixedColumn || isFixedHeader || !notNeedThWidthList || !data.length;
     const timer = setTimeout(() => {
       updateTableWidth();
       if (columnResizable && recalculateColWidth.current) {
         recalculateColWidth.current(finalColumns, thWidthList, tableLayout, tableElmWidth);
       }
-      const isWatchResize = isFixedColumn || isFixedHeader || !notNeedThWidthList || !data.length;
-      if (isWatchResize) {
+      // IE 11 以下使用 window resize；IE 11 以上使用 ResizeObserver
+      if (isWatchResize && getIEVersion() < 11) {
         on(window, 'resize', onResize);
       }
       clearTimeout(timer);
     });
     return () => {
-      off(window, 'resize', onResize);
+      if (isWatchResize && getIEVersion() < 11) {
+        off(window, 'resize', onResize);
+      }
+      clearTimeout(timer);
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [isFixedColumn]);
@@ -525,5 +533,6 @@ export default function useFixed(props: TdBaseTableProps, finalColumns: BaseTabl
     getThWidthList,
     updateThWidthList,
     setRecalculateColWidthFuncRef,
+    addTableResizeObserver,
   };
 }