Merge pull request #2561 from XiaoMi/hotfix/table(virtual-max-height)

fix(table): virtual maxHeight error
XiaoMi · Aug 1, 2023 · 309f627 · 309f627
2 parents 9a5d40c + 74dcee6
commit 309f627
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 20 deletions.
diff --git a/packages/ui/table/src/TableBody.tsx b/packages/ui/table/src/TableBody.tsx
@@ -70,7 +70,14 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
     )
     if (showVirtual) {
       // TODO： avg和summay row的逻辑
-      const vMaxHeight = maxHeight || 300
+
+      const realHeight = scrollBodyElementRef.current?.getBoundingClientRect().height
+      const vMaxHeight = maxHeight
+        ? !isNaN(Number(String(maxHeight).replace(/px/, '')))
+          ? Number(maxHeight)
+          : realHeight
+        : 300
+
       return (
         <div
           ref={scrollBodyElementRef}
@@ -79,13 +86,6 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
           onWheel={onTableBodyScrollMock}
           style={{
             maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-            // maxHeight 小于 table 实际高度才出现纵向滚动条
-            overflowY:
-              maxHeight !== undefined &&
-              bodyTableRef.current &&
-              bodyTableRef.current.clientHeight > maxHeight
-                ? 'scroll'
-                : undefined,
             // 表格宽度大于div宽度才出现横向滚动条
             overflowX: canScroll ? 'scroll' : undefined,
           }}
@@ -135,13 +135,6 @@ export const TableBody = forwardRef<HTMLDivElement | null, TableBodyProps>(
         onScroll={onTableBodyScroll}
         style={{
           maxHeight: maxHeight !== undefined ? maxHeight : undefined,
-          // maxHeight 小于 table 实际高度才出现纵向滚动条
-          overflowY:
-            maxHeight !== undefined &&
-            bodyTableRef.current &&
-            bodyTableRef.current.clientHeight > maxHeight
-              ? 'scroll'
-              : undefined,
           // 表格宽度大于div宽度才出现横向滚动条
           overflowX: canScroll ? 'scroll' : undefined,
         }}

diff --git a/packages/ui/table/src/types.ts b/packages/ui/table/src/types.ts
@@ -242,13 +242,17 @@ export interface FlattedTableRowData extends TableRowData {
   /**
    * 该节点的父节点
    */
-  parent?: FlattedTableRowData
+  parent?: FlattedTableRowDataWithChildren
   /**
    * 节点所在列表数据中的下标
    */
   pos?: number
 }
 
+export interface FlattedTableRowDataWithChildren extends FlattedTableRowData {
+  children: FlattedTableRowData[]
+}
+
 export interface FlattedTableColumnItemData extends TableColumnItem {
   /**
    * 树节点唯一 id

diff --git a/packages/ui/table/src/use-table.ts b/packages/ui/table/src/use-table.ts
@@ -528,7 +528,7 @@ export const useTable = ({
   //* *************** 根据排序列处理数据 ************** *//
 
   const showData = useMemo(() => {
-    let _data: FlattedTableRowData[] = cloneTree(transitionData)
+    let _data = cloneTree(transitionData)
 
     if (activeSorterColumn) {
       const sorter = columns.filter((d) => d.dataKey === activeSorterColumn)[0]?.sorter
@@ -538,7 +538,7 @@ export const useTable = ({
 
         // 平铺的树形结构排序
         if (_data.some((d) => d.depth !== 0)) {
-          _data = flattedTreeSort(_data)
+          _data = flattedTreeSort<FlattedTableRowData>(_data)
         }
       }
     }

diff --git a/packages/ui/table/stories/virtual.stories.tsx b/packages/ui/table/stories/virtual.stories.tsx
@@ -48,8 +48,8 @@ export const Virtual = () => {
 
   return (
     <>
-      <h1>Width for Table</h1>
-      <div className="table-width__wrap" style={{ minWidth: 660, background: '#fff' }}>
+      <h1>Virtual for Table</h1>
+      <div className="table-virtual__wrap" style={{ minWidth: 660, background: '#fff' }}>
         <Table
           fieldKey="name"
           columns={column}