[Table]合并单元格支持动态数据

src/table/TBody.tsx

@@ -5,10 +5,10 @@ import pick from 'lodash/pick';
 import classNames from 'classnames';
 import TR, { ROW_LISTENERS, TABLE_PROPS } from './TR';
 import { useLocaleReceiver } from '../locale/LocalReceiver';
-import { RowspanColspan, TableRowData, BaseTableCellParams } from './type';
 import { BaseTableProps } from './interface';
 import { RowAndColFixedPosition } from './hooks/useFixed';
 import useClassName from './hooks/useClassName';
+import useRowspanAndColspan from './hooks/useRowspanAndColspan';
 
 export const ROW_AND_TD_LISTENERS = ROW_LISTENERS.concat('cell-click');
 export interface TableBodyProps extends BaseTableProps {
@@ -61,6 +61,7 @@ export default function TBody(props: TableBodyProps) {
   const { data, columns } = props;
   const [global, t] = useLocaleReceiver('table');
   const { tableFullRowClasses, tableBaseClass } = useClassName();
+  const { skipSpansMap } = useRowspanAndColspan(data, columns, props.rowspanAndColspan);
 
   const tbodyClasses = useMemo(() => [tableBaseClass.body], [tableBaseClass.body]);
 
@@ -101,28 +102,9 @@ export default function TBody(props: TableBodyProps) {
     );
   };
 
-  // 受合并单元格影响，部分单元格不显示
-  let skipSpansMap = new Map<any, boolean>();
-
-  const onTrRowspanOrColspan = (params: BaseTableCellParams<TableRowData>, cellSpans: RowspanColspan) => {
-    const { rowIndex, colIndex } = params;
-    if (!cellSpans.rowspan && !cellSpans.colspan) return;
-    const maxRowIndex = rowIndex + (cellSpans.rowspan || 1);
-    const maxColIndex = colIndex + (cellSpans.colspan || 1);
-    for (let i = rowIndex; i < maxRowIndex; i++) {
-      for (let j = colIndex; j < maxColIndex; j++) {
-        if (i !== rowIndex || j !== colIndex) {
-          skipSpansMap.set([i, j].join(), true);
-        }
-      }
-    }
-  };
-
   const columnLength = columns.length;
   const dataLength = data.length;
   const trNodeList = [];
-  // 每次渲染清空合并单元格信息
-  skipSpansMap = new Map<any, boolean>();
 
   const properties = [
     'rowAndColFixedPosition',
@@ -145,8 +127,6 @@ export default function TBody(props: TableBodyProps) {
       dataLength,
       skipSpansMap,
       ...pick(props, properties),
-      // 遍历的同时，计算后面的节点，是否会因为合并单元格跳过渲染
-      onTrRowspanOrColspan,
     };
     if (props.onCellClick) {
       trProps.onCellClick = props.onCellClick;

src/table/TR.tsx

@@ -8,6 +8,7 @@ import useClassName from './hooks/useClassName';
 import TEllipsis from './Ellipsis';
 import { BaseTableCellParams, TableRowData, RowspanColspan, TdBaseTableProps, TableScroll } from './type';
 import useLazyLoad from './hooks/useLazyLoad';
+import { SkipSpansValue } from './hooks/useRowspanAndColspan';
 
 export interface RenderTdExtra {
   rowAndColFixedPosition: RowAndColFixedPosition;
@@ -49,8 +50,7 @@ export interface TrProps extends TrCommonProps {
   rowIndex?: number;
   dataLength?: number;
   rowAndColFixedPosition?: RowAndColFixedPosition;
-  // 属性透传，引用传值，可内部改变
-  skipSpansMap?: Map<any, boolean>;
+  skipSpansMap?: Map<string, SkipSpansValue>;
   scrollType?: string;
   isVirtual?: boolean;
   rowHeight?: number;
@@ -60,7 +60,6 @@ export interface TrProps extends TrCommonProps {
   tableElm?: HTMLDivElement;
   tableContentElm?: HTMLDivElement;
   onRowMounted?: () => void;
-  onTrRowspanOrColspan?: (params: BaseTableCellParams<TableRowData>, cellSpans: RowspanColspan) => void;
 }
 
 export const ROW_LISTENERS = ['click', 'dblclick', 'mouseover', 'mousedown', 'mouseenter', 'mouseleave', 'mouseup'];
@@ -185,14 +184,10 @@ export default function TR(props: TrProps) {
       rowIndex,
       colIndex,
     };
-    if (isFunction(props.rowspanAndColspan)) {
-      const o = props.rowspanAndColspan(params);
-      o?.rowspan > 1 && (cellSpans.rowspan = o.rowspan);
-      o?.colspan > 1 && (cellSpans.colspan = o.colspan);
-      props.onTrRowspanOrColspan?.(params, cellSpans);
-    }
-    const skipped = props.skipSpansMap?.get([rowIndex, colIndex].join());
-    if (skipped) return null;
+    const spanState = props.skipSpansMap.get([rowIndex, colIndex].join()) || {};
+    spanState?.rowspan > 1 && (cellSpans.rowspan = spanState.rowspan);
+    spanState?.colspan > 1 && (cellSpans.colspan = spanState.colspan);
+    if (spanState.skipped) return null;
     return renderTd(params, {
       dataLength,
       rowAndColFixedPosition,

src/table/hooks/useRowspanAndColspan.ts

@@ -0,0 +1,71 @@
+import { useEffect, useState } from 'react';
+import { BaseTableCellParams, BaseTableCol, TableRowData, TableRowspanAndColspanFunc } from '../type';
+
+export interface SkipSpansValue {
+  colspan?: number;
+  rowspan?: number;
+  skipped?: boolean;
+}
+
+export default function useRowspanAndColspan(
+  data: TableRowData[],
+  columns: BaseTableCol<TableRowData>[],
+  rowspanAndColspan: TableRowspanAndColspanFunc<TableRowData>,
+) {
+  const [skipSpansMap] = useState(new Map<string, SkipSpansValue>());
+
+  // 计算单元格是否跳过渲染
+  const onTrRowspanOrColspan = (params: BaseTableCellParams<TableRowData>, skipSpansValue: SkipSpansValue) => {
+    const { rowIndex, colIndex } = params;
+    if (!skipSpansValue.rowspan && !skipSpansValue.colspan) return;
+    const maxRowIndex = rowIndex + (skipSpansValue.rowspan || 1);
+    const maxColIndex = colIndex + (skipSpansValue.colspan || 1);
+    for (let i = rowIndex; i < maxRowIndex; i++) {
+      for (let j = colIndex; j < maxColIndex; j++) {
+        if (i !== rowIndex || j !== colIndex) {
+          const cellKey = [i, j].join();
+          const state = skipSpansMap.get(cellKey) || {};
+          state.skipped = true;
+          skipSpansMap.set(cellKey, state);
+        }
+      }
+    }
+  };
+
+  // 计算单元格是否需要设置 rowspan 和 colspan
+  const updateSkipSpansMap = (
+    data: TableRowData[],
+    columns: BaseTableCol<TableRowData>[],
+    rowspanAndColspan: TableRowspanAndColspanFunc<TableRowData>,
+  ) => {
+    if (!data || !rowspanAndColspan) return;
+    for (let i = 0, len = data.length; i < len; i++) {
+      const row = data[i];
+      for (let j = 0, colLen = columns.length; j < colLen; j++) {
+        const params = {
+          row,
+          col: columns[j],
+          rowIndex: i,
+          colIndex: j,
+        };
+        const cellKey = [i, j].join();
+        const state = skipSpansMap.get(cellKey) || {};
+        const o = rowspanAndColspan(params) || {};
+        if (o.rowspan > 1 || o.colspan > 1 || state.rowspan || state.colspan) {
+          o.rowspan > 1 && (state.rowspan = o.rowspan);
+          o.colspan > 1 && (state.colspan = o.colspan);
+          skipSpansMap.set(cellKey, state);
+        }
+        onTrRowspanOrColspan?.(params, state);
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (!data || !rowspanAndColspan) return;
+    updateSkipSpansMap(data, columns, rowspanAndColspan);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [data, columns]);
+
+  return { skipSpansMap, updateSkipSpansMap };
+}