feat: Table 优化大数据性能 (#11915)

Author: 2betop

examples/components/CRUD/TableAutoFill.jsx

@@ -143,6 +143,7 @@ export default {
       {
         name: 'id',
         label: 'ID',
+        width: 50,
         searchable: {
           type: 'input-text',
           name: 'id',

packages/amis-core/src/store/table.ts

@@ -202,9 +202,7 @@ export const Row = types
     loaded: false, // 懒数据是否加载完了
     loading: false, // 懒数据是否正在加载
     error: '', // 懒数据加载失败的错误信息
-    depth: types.number, // 当前children位于第几层，便于使用getParent获取最顶层TableStore
-    appeared: true,
-    lazyRender: false
+    depth: types.number // 当前children位于第几层，便于使用getParent获取最顶层TableStore
   })
   .views(self => ({
     get parent() {
@@ -486,10 +484,6 @@ export const Row = types
       }
     },
 
-    markAppeared(value: any) {
-      value && (self.appeared = !!value);
-    },
-
     markLoading(value: any) {
       self.loading = !!value;
     },
@@ -592,7 +586,7 @@ export const TableStore = iRendererStore
     exportExcelLoading: false,
     searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
     lazyRenderAfter: 100,
-    tableLayout: 'auto',
+    tableLayoutConfig: 'auto',
     theadHeight: 0,
     persistKey: ''
   })
@@ -849,6 +843,14 @@ export const TableStore = iRendererStore
         return getEnv(self).translate;
       },
 
+      get tableLayout() {
+        if (self.rows.length > self.lazyRenderAfter) {
+          return 'fixed';
+        }
+
+        return self.tableLayoutConfig;
+      },
+
       getSelectionUpperLimit,
 
       get columnsKey() {
@@ -1219,8 +1221,8 @@ export const TableStore = iRendererStore
       typeof config.lazyRenderAfter === 'number' &&
         (self.lazyRenderAfter = config.lazyRenderAfter);
 
-      typeof config.tableLayout === 'string' &&
-        (self.tableLayout = config.tableLayout);
+      typeof config.tableLayoutConfig === 'string' &&
+        (self.tableLayoutConfig = config.tableLayoutConfig);
 
       config.showIndex !== undefined && (self.showIndex = config.showIndex);
       config.persistKey !== undefined && (self.persistKey = config.persistKey);
@@ -1613,21 +1615,6 @@ export const TableStore = iRendererStore
       );
 
       if (!allMatched) {
-        // 前 20 个直接渲染，后面的按需渲染
-        if (
-          self.lazyRenderAfter &&
-          self.falttenedRows.length > self.lazyRenderAfter
-        ) {
-          for (
-            let i = self.lazyRenderAfter, len = self.falttenedRows.length;
-            i < len;
-            i++
-          ) {
-            self.falttenedRows[i].appeared = false;
-            self.falttenedRows[i].lazyRender = true;
-          }
-        }
-
         const expand = self.footable && self.footable.expand;
         if (
           expand === 'first' ||

packages/amis-ui/scss/components/_table.scss

@@ -184,6 +184,45 @@
     min-height: 0.01%;
     overflow-x: auto;
     transform: translateZ(0);
+
+    &.use-virtual-list {
+      > table > .virtual-table-body-placeholder {
+        > tr {
+          padding: 0 !important;
+          margin: 0 !important;
+          border: 0 !important;
+          background: transparent !important;
+        }
+        > tr > td {
+          padding: 0 !important;
+          margin: 0 !important;
+          border: 0 !important;
+          background: transparent !important;
+
+          > div {
+            display: block;
+            height: 0;
+            width: 50px;
+            position: sticky;
+            left: 0;
+            will-change: height;
+            transform: translateZ(0);
+            contain: content;
+          }
+        }
+      }
+
+      > table > .virtual-table-body-placeholder.leading > tr > td > div {
+        height: var(--Table-scroll-offset);
+      }
+
+      > table > .virtual-table-body-placeholder.trailing > tr > td > div {
+        height: calc(
+          var(--Table-scroll-height) - var(--Table-frame-height) -
+            var(--Table-scroll-offset)
+        );
+      }
+    }
   }
 
   &-content-colDragLine {

packages/amis/src/renderers/Table/TableBody.tsx

@@ -9,6 +9,8 @@ import {createObject} from 'amis-core';
 import {LocaleProps} from 'amis-core';
 import {ActionSchema} from '../Action';
 import type {IColumn, IRow, ITableStore, TestIdBuilder} from 'amis-core';
+import flatten from 'lodash/flatten';
+import {VirtualTableBody} from './VirtualTableBody';
 
 export interface TableBodyProps extends LocaleProps {
   store: ITableStore;
@@ -364,6 +366,7 @@ export class TableBody<
       classnames: cx,
       className,
       render,
+      store,
       rows,
       columns,
       rowsProps,
@@ -372,16 +375,17 @@ export class TableBody<
       translate: __
     } = this.props;
 
-    return (
-      <tbody className={className}>
-        {rows.length ? (
-          <>
-            {this.renderSummary('prefix', prefixRow)}
-            {this.renderRows(rows, columns, rowsProps)}
-            {this.renderSummary('affix', affixRow)}
-          </>
-        ) : null}
-      </tbody>
+    const doms: React.ReactNode[] = flatten(
+      []
+        .concat(this.renderSummary('prefix', prefixRow) as any)
+        .concat(this.renderRows(rows, columns, rowsProps) as any)
+        .concat(this.renderSummary('affix', affixRow) as any)
+    ).filter(Boolean);
+
+    return rows.length > store.lazyRenderAfter ? (
+      <VirtualTableBody rows={doms} store={this.props.store} />
+    ) : (
+      <tbody className={className}>{doms}</tbody>
     );
   }
 }

packages/amis/src/renderers/Table/TableRow.tsx

@@ -67,7 +67,6 @@ export class TableRow<
     moved: boolean;
     depth: number;
     expandable: boolean;
-    appeard?: boolean;
     loading?: boolean;
     error?: string;
     checkdisable: boolean;
@@ -205,7 +204,6 @@ export class TableRow<
       moved,
       depth,
       expandable,
-      appeard,
       checkdisable,
       trRef,
       isNested,
@@ -263,28 +261,22 @@ export class TableRow<
                           </th>
                         ) : null}
 
-                        {appeard ? (
-                          renderCell(
-                            `${regionPrefix}${itemIndex}/${column.index}`,
-                            column,
-                            item,
-                            {
-                              ...rest,
-                              width: null,
-                              rowIndex: itemIndex,
-                              rowIndexPath: item.path,
-                              colIndex: column.index,
-                              rowPath,
-                              key: column.id,
-                              onAction: this.handleAction,
-                              onQuickChange: this.handleQuickChange,
-                              onChange: this.handleChange
-                            }
-                          )
-                        ) : (
-                          <td key={column.id}>
-                            <div className={cx('Table-emptyBlock')}>&nbsp;</div>
-                          </td>
+                        {renderCell(
+                          `${regionPrefix}${itemIndex}/${column.index}`,
+                          column,
+                          item,
+                          {
+                            ...rest,
+                            width: null,
+                            rowIndex: itemIndex,
+                            rowIndexPath: item.path,
+                            colIndex: column.index,
+                            rowPath,
+                            key: column.id,
+                            onAction: this.handleAction,
+                            onQuickChange: this.handleQuickChange,
+                            onChange: this.handleChange
+                          }
                         )}
                       </tr>
                     ))}
@@ -331,23 +323,17 @@ export class TableRow<
         {...testIdBuilder?.(rowPath)?.getTestId()}
       >
         {columns.map(column =>
-          appeard ? (
-            renderCell(`${itemIndex}/${column.index}`, column, item, {
-              ...rest,
-              rowIndex: itemIndex,
-              colIndex: column.index,
-              rowIndexPath: item.path,
-              rowPath,
-              key: column.id,
-              onAction: this.handleAction,
-              onQuickChange: this.handleQuickChange,
-              onChange: this.handleChange
-            })
-          ) : column.name && item.rowSpans[column.name] === 0 ? null : (
-            <td key={column.id}>
-              <div className={cx('Table-emptyBlock')}>&nbsp;</div>
-            </td>
-          )
+          renderCell(`${itemIndex}/${column.index}`, column, item, {
+            ...rest,
+            rowIndex: itemIndex,
+            colIndex: column.index,
+            rowIndexPath: item.path,
+            rowPath,
+            key: column.id,
+            onAction: this.handleAction,
+            onQuickChange: this.handleQuickChange,
+            onChange: this.handleChange
+          })
         )}
       </tr>
     );
@@ -364,16 +350,9 @@ export default observer((props: TableRowProps) => {
     store.canAccessSuperData ||
     columns.some(item => item.pristine.canAccessSuperData);
 
-  const {ref, inView} = useInView({
-    threshold: 0,
-    onChange: item.markAppeared,
-    skip: !item.lazyRender
-  });
-
   return (
     <TableRow
       {...props}
-      trRef={ref}
       expanded={item.expanded}
       parentExpanded={parent?.expanded}
       id={item.id}
@@ -391,7 +370,6 @@ export default observer((props: TableRowProps) => {
       // data 在 TableRow 里面没有使用，这里写上是为了当列数据变化的时候 TableRow 重新渲染，
       // 不是 item.locals 的原因是 item.locals 会变化多次，比如父级上下文变化也会进来，但是 item.data 只会变化一次。
       data={canAccessSuperData ? item.locals : item.data}
-      appeard={item.lazyRender ? item.appeared || inView : true}
       isNested={store.isNested}
     />
   );

packages/amis/src/renderers/Table/VCell.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import Cell from './Cell';
+import {useInView} from 'react-intersection-observer';
+
+export default function VCell(props: any) {
+  const {ref, inView} = useInView({
+    threshold: 0,
+    triggerOnce: true
+  });
+
+  return inView ? (
+    <Cell {...props} />
+  ) : (
+    <td
+      ref={ref}
+      rowSpan={props.rowSpan > 1 ? props.rowSpan : undefined}
+      style={props.style}
+      className={props.className}
+    >
+      &nbsp;
+    </td>
+  );
+}