pro-design-vue 1.4.0 → 1.4.1

package/dist/index.full.js

@@ -1,4 +1,4 @@
-/*! Pro Design Vue v1.4.0 */
+/*! Pro Design Vue v1.4.1 */
 
 (function (global, factory) {
   typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('ant-design-vue'), require('vue'), require('ant-design-vue/es/locale/zh_CN.js')) :
@@ -32,7 +32,7 @@
   const DEFAULT_NAMESPACE = "pro";
   const DEFAULT_LOCALE = "zh-CN";
 
-  const version$1 = "1.4.0";
+  const version$1 = "1.4.1";
 
   const makeInstaller = (components = []) => {
     const install = (app) => {
@@ -3551,7 +3551,7 @@
     };
   }
 
-  function NOOP() {
+  function NOOP$1() {
   }
 
   const withInstall = (main, extra) => {
@@ -3568,7 +3568,7 @@
     return main;
   };
   const withNoopInstall = (component) => {
-    component.install = NOOP;
+    component.install = NOOP$1;
     return component;
   };
 
@@ -24182,6 +24182,7 @@
     showHeaderScrollbar: Boolean,
     deepWatchDataSource: Boolean,
     deepWatchColumns: Boolean,
+    perf: Boolean,
     prefixCls: String,
     columnDrag: {
       type: Boolean,
@@ -25690,6 +25691,121 @@
     frame && cancelRequestAnimationFrame(frame.id);
   };
 
+  const PERF_KEY = Symbol("TablePerf");
+  const MAX_ENTRIES = 200;
+  const NOOP = () => {
+  };
+  const NOOP_CTX = {
+    enabled: vue.shallowRef(false),
+    metrics: vue.shallowRef({ entries: [], memory: null, scrollEventsPerSec: 0, fps: 0 }),
+    markStart: NOOP,
+    markEnd: NOOP,
+    captureMemory: NOOP,
+    recordScrollEvent: NOOP
+  };
+  let _activeCtx = NOOP_CTX;
+  function createPerfContext(enabled) {
+    const metrics = vue.shallowRef({
+      entries: [],
+      memory: null,
+      scrollEventsPerSec: 0,
+      fps: 0
+    });
+    let scrollCount = 0;
+    let frameCount = 0;
+    let lastFpsTime = 0;
+    const pendingMarks = /* @__PURE__ */ new Map();
+    const fpsLoop = (now) => {
+      frameCount++;
+      if (now - lastFpsTime >= 1e3) {
+        const current = metrics.value;
+        metrics.value = {
+          ...current,
+          fps: frameCount,
+          scrollEventsPerSec: scrollCount
+        };
+        frameCount = 0;
+        scrollCount = 0;
+        lastFpsTime = now;
+      }
+      if (enabled.value) {
+        requestAnimationFrame(fpsLoop);
+      }
+    };
+    const start = () => {
+      lastFpsTime = performance.now();
+      frameCount = 0;
+      scrollCount = 0;
+      requestAnimationFrame(fpsLoop);
+    };
+    const markStart = (label) => {
+      if (!enabled.value) return;
+      pendingMarks.set(label, performance.now());
+    };
+    const markEnd = (label) => {
+      if (!enabled.value) return;
+      const startTime = pendingMarks.get(label);
+      if (startTime === void 0) return;
+      pendingMarks.delete(label);
+      const duration = performance.now() - startTime;
+      const current = metrics.value;
+      const entries = current.entries.length >= MAX_ENTRIES ? current.entries.slice(-MAX_ENTRIES + 1) : [...current.entries];
+      entries.push({ label, duration, timestamp: Date.now() });
+      metrics.value = { ...current, entries };
+    };
+    const captureMemory = (rows, cells) => {
+      var _a, _b, _c;
+      if (!enabled.value) return;
+      const mem = performance.memory;
+      const current = metrics.value;
+      metrics.value = {
+        ...current,
+        memory: {
+          usedJSHeapSize: (_a = mem == null ? void 0 : mem.usedJSHeapSize) != null ? _a : 0,
+          totalJSHeapSize: (_b = mem == null ? void 0 : mem.totalJSHeapSize) != null ? _b : 0,
+          jsHeapSizeLimit: (_c = mem == null ? void 0 : mem.jsHeapSizeLimit) != null ? _c : 0,
+          renderedRows: rows,
+          renderedCells: cells,
+          timestamp: Date.now()
+        }
+      };
+    };
+    const recordScrollEvent = () => {
+      if (!enabled.value) return;
+      scrollCount++;
+    };
+    if (enabled.value) start();
+    const ctx = {
+      enabled,
+      metrics,
+      markStart,
+      markEnd,
+      captureMemory,
+      recordScrollEvent
+    };
+    _activeCtx = ctx;
+    return ctx;
+  }
+  function providePerfContext(ctx) {
+    vue.provide(PERF_KEY, ctx);
+  }
+  function usePerf() {
+    const injected = vue.inject(PERF_KEY, null);
+    if (injected) return injected;
+    return {
+      get enabled() {
+        return _activeCtx.enabled;
+      },
+      get metrics() {
+        return _activeCtx.metrics;
+      },
+      markStart: (l) => _activeCtx.markStart(l),
+      markEnd: (l) => _activeCtx.markEnd(l),
+      captureMemory: (r, c) => _activeCtx.captureMemory(r, c),
+      recordScrollEvent: () => _activeCtx.recordScrollEvent()
+    };
+  }
+
   const HScrollSymbolKey = Symbol("HScrollSymbolKey");
   const useHScrollSyncProvide = ({
     scrollLeft,
@@ -25697,6 +25813,7 @@
     onScroll,
     bodyWidth
   }) => {
+    const perf = usePerf();
     const domsSet = /* @__PURE__ */ new Set();
     const setAllDoms = (scrollLeft2) => {
       const left = Math.max(0, Math.min(scrollLeft2, maxScrollLeft.value));
@@ -25709,6 +25826,7 @@
       var _a;
       const left = (_a = e.target) == null ? void 0 : _a.scrollLeft;
       if (left !== scrollLeft.value) {
+        perf.recordScrollEvent();
         setAllDoms(left);
         scrollLeft.value = left;
         onScroll(e);
@@ -25719,6 +25837,7 @@
       const left = (_a = e.target) == null ? void 0 : _a.scrollLeft;
       if (left !== scrollLeft.value) {
         raf.cancel(rafFrame);
+        perf.recordScrollEvent();
         rafFrame = raf(() => {
           scrollLeft.value = left;
           onScroll(e);
@@ -25774,6 +25893,7 @@
     updateAnimate,
     bodyWidth
   }) => {
+    const perf = usePerf();
     const domsSet = /* @__PURE__ */ new Set();
     const setAllDoms = (scrollTop2) => {
       const top = Math.max(0, Math.min(scrollTop2, maxScrollTop.value));
@@ -25786,6 +25906,7 @@
       var _a;
       const top = (_a = e.target) == null ? void 0 : _a.scrollTop;
       if (top !== scrollTop.value) {
+        perf.recordScrollEvent();
         updateAnimate();
         setAllDoms(top);
         scrollTop.value = top;
@@ -25809,6 +25930,7 @@
       const top = (_a = e.target) == null ? void 0 : _a.scrollTop;
       if (top !== scrollTop.value) {
         raf.cancel(rafFrame);
+        perf.recordScrollEvent();
         updateAnimate();
         rafFrame = raf(() => {
           scrollTop.value = top;
@@ -27064,201 +27186,189 @@
       }
       mergeColumns.value = newColumns;
     });
-    let columnsRafFrame;
-    let isFirstRun = true;
-    const recalcColumns = () => {
-      var _a, _b, _c, _d;
-      const originMergeColumns = mergeColumns.value;
-      let newMaxRowSpan = 1;
-      const newLeftColumns = [];
-      const newRightColumns = [];
-      const newCenterColumns = [];
-      const newAutoHeightColumns = [];
-      const newLeftHeaderColumns = [];
-      const newRightHeaderColumns = [];
-      const newCenterHeaderColumns = [];
-      keyColumnMap.value = /* @__PURE__ */ new Map();
-      if (!measureWidthRef.value) {
-        return;
-      }
-      const autoWidthColumns = [];
-      let finallyWidthTotal = 0;
-      const genColumns = (allCols, leftHeaderCols, centerHeaderCols, rightHeaderCols, rowSpan, pos, fix) => {
-        for (let i = 0, len = allCols.length; i < len; i++) {
-          const originColumn = allCols[i];
-          if (!originColumn) {
-            continue;
-          }
-          const {
-            width,
-            fixed = fix,
-            children,
-            ellipsis = false,
-            tooltip,
-            minWidth,
-            maxWidth
-          } = originColumn;
-          const columnWidth = columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, width);
-          const columnMinWidth = columnWidthByString(
-            measureWidthRef.value,
-            bodyScrollWidth.value,
-            minWidth
-          );
-          const columnMaxWidth = maxWidth ? columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, maxWidth) : 1 / 0;
-          const finallyWidth = Math.min(Math.max(columnWidth, columnMinWidth), columnMaxWidth);
-          const columnPos = getColumnPos(i, pos);
-          const columnKey = originColumn.columnKey || originColumn.key || columnPos;
-          const parseFiexed = fixed === true ? "left" : fixed;
-          const finallyColumn = Object.assign({}, originColumn, {
-            finallyWidth,
-            columnKey,
-            originColumn,
-            showTitle: !tooltip && (ellipsis === true || typeof ellipsis === "object" && (ellipsis == null ? void 0 : ellipsis.showTitle) !== false),
-            fixed: parseFiexed,
-            hidden: true === originColumn.hidden
-          });
-          keyColumnMap.value.set(columnKey, finallyColumn);
-          if (finallyColumn.hidden) {
-            break;
-          }
-          if (children && children.length) {
-            finallyColumn.children = [];
-            if (parseFiexed === "left") {
-              leftHeaderCols.push(finallyColumn);
-            } else if (parseFiexed === "right") {
-              rightHeaderCols.push(finallyColumn);
-            } else {
-              centerHeaderCols.push(finallyColumn);
+    vue.watch(
+      [mergeColumns, baseHeight, bodyScrollWidth, measureWidthRef],
+      () => {
+        var _a, _b, _c, _d;
+        const originMergeColumns = mergeColumns.value;
+        let newMaxRowSpan = 1;
+        const newLeftColumns = [];
+        const newRightColumns = [];
+        const newCenterColumns = [];
+        const newAutoHeightColumns = [];
+        const newLeftHeaderColumns = [];
+        const newRightHeaderColumns = [];
+        const newCenterHeaderColumns = [];
+        keyColumnMap.value = /* @__PURE__ */ new Map();
+        if (!measureWidthRef.value) {
+          return;
+        }
+        const autoWidthColumns = [];
+        let finallyWidthTotal = 0;
+        const genColumns = (allCols, leftHeaderCols, centerHeaderCols, rightHeaderCols, rowSpan, pos, fix) => {
+          for (let i = 0, len = allCols.length; i < len; i++) {
+            const originColumn = allCols[i];
+            if (!originColumn) {
+              continue;
             }
-            newMaxRowSpan = Math.max(newMaxRowSpan, rowSpan + 1);
-            genColumns(
+            const {
+              width,
+              fixed = fix,
               children,
-              finallyColumn.children,
-              finallyColumn.children,
-              finallyColumn.children,
-              rowSpan + 1,
-              columnPos,
-              parseFiexed
+              ellipsis = false,
+              tooltip,
+              minWidth,
+              maxWidth
+            } = originColumn;
+            const columnWidth = columnWidthByString(
+              measureWidthRef.value,
+              bodyScrollWidth.value,
+              width
             );
-          } else {
-            if (finallyColumn.width === void 0) {
-              autoWidthColumns.push(finallyColumn);
+            const columnMinWidth = columnWidthByString(
+              measureWidthRef.value,
+              bodyScrollWidth.value,
+              minWidth
+            );
+            const columnMaxWidth = maxWidth ? columnWidthByString(measureWidthRef.value, bodyScrollWidth.value, maxWidth) : 1 / 0;
+            const finallyWidth = Math.min(Math.max(columnWidth, columnMinWidth), columnMaxWidth);
+            const columnPos = getColumnPos(i, pos);
+            const columnKey = originColumn.columnKey || originColumn.key || columnPos;
+            const parseFiexed = fixed === true ? "left" : fixed;
+            const finallyColumn = Object.assign({}, originColumn, {
+              finallyWidth,
+              columnKey,
+              originColumn,
+              showTitle: !tooltip && (ellipsis === true || typeof ellipsis === "object" && (ellipsis == null ? void 0 : ellipsis.showTitle) !== false),
+              fixed: parseFiexed,
+              hidden: true === originColumn.hidden
+            });
+            keyColumnMap.value.set(columnKey, finallyColumn);
+            if (finallyColumn.hidden) {
+              break;
             }
-            finallyWidthTotal += finallyColumn.finallyWidth;
-            if (parseFiexed === "left") {
-              newLeftColumns.push(finallyColumn);
-              leftHeaderCols.push(finallyColumn);
-            } else if (parseFiexed === "right") {
-              newRightColumns.push(finallyColumn);
-              rightHeaderCols.push(finallyColumn);
+            if (children && children.length) {
+              finallyColumn.children = [];
+              if (parseFiexed === "left") {
+                leftHeaderCols.push(finallyColumn);
+              } else if (parseFiexed === "right") {
+                rightHeaderCols.push(finallyColumn);
+              } else {
+                centerHeaderCols.push(finallyColumn);
+              }
+              newMaxRowSpan = Math.max(newMaxRowSpan, rowSpan + 1);
+              genColumns(
+                children,
+                finallyColumn.children,
+                finallyColumn.children,
+                finallyColumn.children,
+                rowSpan + 1,
+                columnPos,
+                parseFiexed
+              );
             } else {
-              newCenterColumns.push(finallyColumn);
-              if (finallyColumn.autoHeight) {
-                newAutoHeightColumns.push(finallyColumn);
+              if (finallyColumn.width === void 0) {
+                autoWidthColumns.push(finallyColumn);
+              }
+              finallyWidthTotal += finallyColumn.finallyWidth;
+              if (parseFiexed === "left") {
+                newLeftColumns.push(finallyColumn);
+                leftHeaderCols.push(finallyColumn);
+              } else if (parseFiexed === "right") {
+                newRightColumns.push(finallyColumn);
+                rightHeaderCols.push(finallyColumn);
+              } else {
+                newCenterColumns.push(finallyColumn);
+                if (finallyColumn.autoHeight) {
+                  newAutoHeightColumns.push(finallyColumn);
+                }
+                centerHeaderCols.push(finallyColumn);
               }
-              centerHeaderCols.push(finallyColumn);
             }
           }
-        }
-      };
-      genColumns(
-        originMergeColumns,
-        newLeftHeaderColumns,
-        newCenterHeaderColumns,
-        newRightHeaderColumns,
-        1,
-        "__S_TABLE_COLUMN_Key__"
-      );
-      let differenceWidth = bodyScrollWidth.value - finallyWidthTotal;
-      const nonResizableColumns = autoWidthColumns.length ? autoWidthColumns : newLeftColumns.concat(newCenterColumns, newRightColumns).filter((column) => !column.resizable || !column.__Internal__Column__);
-      const widthDiffAverage = Math.floor(differenceWidth / nonResizableColumns.length);
-      if (differenceWidth > 0) {
-        for (let i = 0, len = nonResizableColumns.length; i < len; i++) {
-          const column = nonResizableColumns[i];
-          let finallyWidth = 0;
-          if (i == len - 1 && differenceWidth > widthDiffAverage) {
-            finallyWidth = column.finallyWidth + differenceWidth;
-          } else {
-            finallyWidth = Math.max(
-              Math.min(column.finallyWidth + widthDiffAverage, (_a = column.maxWidth) != null ? _a : 1 / 0),
-              (_b = column.minWidth) != null ? _b : 50
-            );
+        };
+        genColumns(
+          originMergeColumns,
+          newLeftHeaderColumns,
+          newCenterHeaderColumns,
+          newRightHeaderColumns,
+          1,
+          "__S_TABLE_COLUMN_Key__"
+        );
+        let differenceWidth = bodyScrollWidth.value - finallyWidthTotal;
+        const nonResizableColumns = autoWidthColumns.length ? autoWidthColumns : newLeftColumns.concat(newCenterColumns, newRightColumns).filter((column) => !column.resizable || !column.__Internal__Column__);
+        const widthDiffAverage = Math.floor(differenceWidth / nonResizableColumns.length);
+        if (differenceWidth > 0) {
+          for (let i = 0, len = nonResizableColumns.length; i < len; i++) {
+            const column = nonResizableColumns[i];
+            let finallyWidth = 0;
+            if (i == len - 1 && differenceWidth > widthDiffAverage) {
+              finallyWidth = column.finallyWidth + differenceWidth;
+            } else {
+              finallyWidth = Math.max(
+                Math.min(column.finallyWidth + widthDiffAverage, (_a = column.maxWidth) != null ? _a : 1 / 0),
+                (_b = column.minWidth) != null ? _b : 50
+              );
+            }
+            differenceWidth -= finallyWidth - column.finallyWidth;
+            column.finallyWidth = finallyWidth;
           }
-          differenceWidth -= finallyWidth - column.finallyWidth;
-          column.finallyWidth = finallyWidth;
-        }
-      } else {
-        for (let i = 0, len = autoWidthColumns.length; i < len; i++) {
-          const column = autoWidthColumns[i];
-          column.finallyWidth = Math.min((_c = column.minWidth) != null ? _c : 50, (_d = column.maxWidth) != null ? _d : 1 / 0);
-        }
-      }
-      if (props.headerHeight !== void 0) {
-        if (Array.isArray(props.headerHeight)) {
-          headerHeight.value = props.headerHeight.concat(new Array(newMaxRowSpan).fill(baseHeight.value)).slice(0, newMaxRowSpan);
         } else {
-          headerHeight.value = new Array(newMaxRowSpan).fill(props.headerHeight);
+          for (let i = 0, len = autoWidthColumns.length; i < len; i++) {
+            const column = autoWidthColumns[i];
+            column.finallyWidth = Math.min((_c = column.minWidth) != null ? _c : 50, (_d = column.maxWidth) != null ? _d : 1 / 0);
+          }
         }
-      } else {
-        headerHeight.value = new Array(newMaxRowSpan).fill(baseHeight.value);
-      }
-      const genHeaderColumns = (headerColumns, left, top, rowSpan) => {
-        let totalFinallyWidth = 0;
-        let totalLeft = left;
-        headerColumns.forEach((column) => {
-          column.left = totalLeft;
-          column.top = top;
-          if (column.children) {
-            column.rowSpan = 1;
-            column.height = headerHeight.value[newMaxRowSpan - rowSpan];
-            column.finallyWidth = genHeaderColumns(
-              column.children,
-              totalLeft,
-              column.height,
-              rowSpan - 1
-            );
+        if (props.headerHeight !== void 0) {
+          if (Array.isArray(props.headerHeight)) {
+            headerHeight.value = props.headerHeight.concat(new Array(newMaxRowSpan).fill(baseHeight.value)).slice(0, newMaxRowSpan);
           } else {
-            column.rowSpan = rowSpan;
-            column.height = headerHeight.value.slice(newMaxRowSpan - rowSpan).reduce((pre, cur) => pre + cur, 0);
+            headerHeight.value = new Array(newMaxRowSpan).fill(props.headerHeight);
           }
-          totalLeft += column.finallyWidth;
-          totalFinallyWidth += column.finallyWidth;
-        });
-        return totalFinallyWidth;
-      };
-      genHeaderColumns(
-        newLeftHeaderColumns.concat(newCenterHeaderColumns, newRightHeaderColumns),
-        0,
-        0,
-        newMaxRowSpan
-      );
-      leftColumns.value = newLeftColumns;
-      rightColumns.value = newRightColumns;
-      centerColumns.value = newCenterColumns;
-      autoHeightColumns.value = newAutoHeightColumns;
-      leftHeaderColumns.value = newLeftHeaderColumns;
-      rightHeaderColumns.value = newRightHeaderColumns;
-      centerHeaderColumns.value = newCenterHeaderColumns;
-      maxRowSpan.value = newMaxRowSpan;
-    };
-    vue.watch(
-      [mergeColumns, baseHeight, bodyScrollWidth, measureWidthRef],
-      () => {
-        if (isFirstRun) {
-          isFirstRun = false;
-          recalcColumns();
-          return;
-        }
-        raf.cancel(columnsRafFrame);
-        columnsRafFrame = raf(() => {
-          recalcColumns();
-        });
+        } else {
+          headerHeight.value = new Array(newMaxRowSpan).fill(baseHeight.value);
+        }
+        const genHeaderColumns = (headerColumns, left, top, rowSpan) => {
+          let totalFinallyWidth = 0;
+          let totalLeft = left;
+          headerColumns.forEach((column) => {
+            column.left = totalLeft;
+            column.top = top;
+            if (column.children) {
+              column.rowSpan = 1;
+              column.height = headerHeight.value[newMaxRowSpan - rowSpan];
+              column.finallyWidth = genHeaderColumns(
+                column.children,
+                totalLeft,
+                column.height,
+                rowSpan - 1
+              );
+            } else {
+              column.rowSpan = rowSpan;
+              column.height = headerHeight.value.slice(newMaxRowSpan - rowSpan).reduce((pre, cur) => pre + cur, 0);
+            }
+            totalLeft += column.finallyWidth;
+            totalFinallyWidth += column.finallyWidth;
+          });
+          return totalFinallyWidth;
+        };
+        genHeaderColumns(
+          newLeftHeaderColumns.concat(newCenterHeaderColumns, newRightHeaderColumns),
+          0,
+          0,
+          newMaxRowSpan
+        );
+        leftColumns.value = newLeftColumns;
+        rightColumns.value = newRightColumns;
+        centerColumns.value = newCenterColumns;
+        autoHeightColumns.value = newAutoHeightColumns;
+        leftHeaderColumns.value = newLeftHeaderColumns;
+        rightHeaderColumns.value = newRightHeaderColumns;
+        centerHeaderColumns.value = newCenterHeaderColumns;
+        maxRowSpan.value = newMaxRowSpan;
       },
       { immediate: true }
     );
-    vue.onBeforeUnmount(() => {
-      raf.cancel(columnsRafFrame);
-    });
     const allColumns = vue.shallowRef([]);
     let cacheColumnKeyPositonMap = {};
     const columnKeyIndexMap = vue.shallowRef({});
@@ -27773,6 +27883,7 @@
   }
 
   function useCal(props, flattenData, scrollHeight, scrollTop, virtual, keyEntities) {
+    const perf = usePerf();
     const rowPosition = vue.shallowRef([]);
     const rowHeights = vue.shallowRef({});
     const mergedRowHeights = vue.shallowRef({});
@@ -27877,6 +27988,7 @@
       raf.cancel(refreshRaf);
       refreshRaf = raf(
         () => {
+          perf.markStart("rowPositionRecalc");
           const defaultHeight = currentSizeHeight.value;
           const crhs = currentRowHeights.value;
           const rhs = rowHeights.value;
@@ -27896,6 +28008,7 @@
           mergedRowHeights.value = newMergedRowHeights;
           viewportHeight.value = newViewportHeight;
           rowPosition.value = newRowPosition;
+          perf.markEnd("rowPositionRecalc");
         },
         isRaf.value ? 0 : 1
       );
@@ -27906,6 +28019,7 @@
     });
     const calculationRowHeights = (data) => {
       var _a, _b;
+      perf.markStart("calculationRowHeights");
       const newRowHeights = {};
       const defaultHeight = currentSizeHeight.value;
       const newCurrentRowHeights = {};
@@ -27938,6 +28052,7 @@
       }
       rowHeights.value = newRowHeights;
       currentRowHeights.value = newCurrentRowHeights;
+      perf.markEnd("calculationRowHeights");
     };
     vue.watch(
       [flattenData, mergeRowHeight],
@@ -28264,6 +28379,7 @@
   function useData(_props, rowPosition, flattenData, startIndex, endIndex, draggingRowKey, useAnimate, getRowFlattenIndexByKey, latestRangeStartCell) {
     const data = vue.shallowRef([]);
     const pos = vue.shallowRef([]);
+    const perf = usePerf();
     let rowKeyIndexMap = {};
     let exchange = true;
     vue.watch(
@@ -28273,6 +28389,7 @@
         if (flattenData.value.length !== rowPosition.value.length) {
           return;
         }
+        perf.markStart("useData-slice");
         const newData = [];
         const newPos = [];
         const recordPositionArr = [];
@@ -28327,6 +28444,7 @@
         rowKeyIndexMap = newRowKeyIndexMap;
         data.value = newData;
         pos.value = newPos;
+        perf.markEnd("useData-slice");
       },
       { immediate: true }
     );
@@ -28379,16 +28497,37 @@
     const allCellProps = vue.shallowRef({});
     const hasMultiRowSpanInfo = vue.shallowRef({});
     const centerRowColumnsMap = vue.shallowRef(/* @__PURE__ */ new Map());
+    const perf = usePerf();
+    const EMPTY_OBJ = Object.freeze({});
+    const cellPropsCache = /* @__PURE__ */ new Map();
+    let prevLeftCols = [];
+    let prevRightCols = [];
+    let prevCenterCols = [];
+    let prevAllCols = [];
+    let prevBodyWidth = 0;
+    let prevLeftWidth = 0;
+    let prevCenterWidth = 0;
+    let prevCustomCell = void 0;
+    let prevMergedRowHeights = {};
     const computedCellProps = (offsetLeft, column, rowIndex, record, overflow) => {
-      var _a, _b, _c, _d;
+      var _a, _b, _c;
       const { customRender, originColumn, dataIndex, columnIndex, left, customCell } = column;
       const cellProps = {};
-      const customCellProps = (_b = (_a = customCell || contextCustomCell.value) == null ? void 0 : _a({ record, rowIndex, column })) != null ? _b : {};
-      const mergeCellStyles = Object.assign(
-        { overflow },
-        parseStyleText(customCellProps.style || {})
-      );
-      const copyCustomCellProps = Object.assign({}, customCellProps);
+      const hasCustomCell = !!(customCell || contextCustomCell.value);
+      const customCellProps = hasCustomCell ? (_a = (customCell || contextCustomCell.value)({ record, rowIndex, column })) != null ? _a : EMPTY_OBJ : EMPTY_OBJ;
+      if (customCellProps === EMPTY_OBJ && !customRender) {
+        const { width: width2 } = getColumnPosition(columnIndex, 1);
+        const style = {
+          overflow,
+          width: `${width2}px`,
+          left: `${left - offsetLeft}px`
+        };
+        if (width2 === 0) style.display = "none";
+        cellProps.props = { colSpan: 1, rowSpan: 1, style };
+        return cellProps;
+      }
+      const mergeCellStyles = customCellProps !== EMPTY_OBJ ? Object.assign({ overflow }, parseStyleText(customCellProps.style || {})) : { overflow };
+      const copyCustomCellProps = customCellProps !== EMPTY_OBJ ? Object.assign({}, customCellProps) : {};
       if (customRender) {
         const value = getPathValue(record, dataIndex);
         const customCellRender = customRender({
@@ -28409,8 +28548,8 @@
           cellProps.children = customCellRender;
         }
       }
-      copyCustomCellProps.colSpan = (_c = copyCustomCellProps.colSpan) != null ? _c : 1;
-      copyCustomCellProps.rowSpan = (_d = copyCustomCellProps.rowSpan) != null ? _d : 1;
+      copyCustomCellProps.colSpan = (_b = copyCustomCellProps.colSpan) != null ? _b : 1;
+      copyCustomCellProps.rowSpan = (_c = copyCustomCellProps.rowSpan) != null ? _c : 1;
       const { width } = getColumnPosition(columnIndex, copyCustomCellProps.colSpan);
       Object.assign(mergeCellStyles, { width: `${width}px`, left: left - offsetLeft + "px" });
       if (width === 0) {
@@ -28428,6 +28567,29 @@
       return cellProps;
     };
     vue.watchEffect(() => {
+      perf.markStart("useCellProps");
+      const curLeft = leftColumns.value;
+      const curRight = rightColumns.value;
+      const curCenter = visibleCenterColumns.value;
+      const curAll = allColumns.value;
+      const curBodyW = bodyWidth.value;
+      const curLeftW = leftWidth.value;
+      const curCenterW = centerWidth.value;
+      const curCustomCell = contextCustomCell.value;
+      const curMergedH = mergedRowHeights.value;
+      const columnsChanged = curLeft !== prevLeftCols || curRight !== prevRightCols || curCenter !== prevCenterCols || curAll !== prevAllCols || curBodyW !== prevBodyWidth || curLeftW !== prevLeftWidth || curCenterW !== prevCenterWidth || curCustomCell !== prevCustomCell || curMergedH !== prevMergedRowHeights;
+      if (columnsChanged) {
+        cellPropsCache.clear();
+        prevLeftCols = curLeft;
+        prevRightCols = curRight;
+        prevCenterCols = curCenter;
+        prevAllCols = curAll;
+        prevBodyWidth = curBodyW;
+        prevLeftWidth = curLeftW;
+        prevCenterWidth = curCenterW;
+        prevCustomCell = curCustomCell;
+        prevMergedRowHeights = curMergedH;
+      }
       const rawAllCellProps = {};
       const rawRowSpanInfo = {};
       const genAllCellProps = (index, offsetLeft, finallyColumns, rowKey, rowIndex, record, overflow, rowColumnsMap2) => {
@@ -28480,8 +28642,15 @@
       for (let i = 0; i < len; i++) {
         if (!data.value[i]) continue;
         const { record, isExpandRow, rowKey, rowIndex } = data.value[i];
-        rawAllCellProps[rowKey] = {};
         const overflow = mergedRowHeights.value[rowKey] ? "hidden" : "initial";
+        const cached = cellPropsCache.get(rowKey);
+        if (cached && cached.overflow === overflow) {
+          rawAllCellProps[rowKey] = cached.cellProps;
+          if (cached.hasRowSpan) rawRowSpanInfo[rowKey] = true;
+          if (cached.centerColumns) rowColumnsMap.set(rowKey, cached.centerColumns);
+          continue;
+        }
+        rawAllCellProps[rowKey] = {};
         if (isExpandRow) {
           rawAllCellProps[rowKey][ExpandColumnKey] = {
             props: {
@@ -28510,10 +28679,24 @@
             overflow
           );
         }
+        cellPropsCache.set(rowKey, {
+          cellProps: rawAllCellProps[rowKey],
+          hasRowSpan: !!rawRowSpanInfo[rowKey],
+          centerColumns: rowColumnsMap.get(rowKey),
+          overflow
+        });
       }
       allCellProps.value = rawAllCellProps;
       hasMultiRowSpanInfo.value = rawRowSpanInfo;
       centerRowColumnsMap.value = rowColumnsMap;
+      if (perf.enabled.value) {
+        const totalCells = Object.values(rawAllCellProps).reduce(
+          (sum, row) => sum + Object.keys(row).length,
+          0
+        );
+        perf.captureMemory(len, totalCells);
+      }
+      perf.markEnd("useCellProps");
     });
     return { allCellProps, hasMultiRowSpanInfo, centerRowColumnsMap };
   };
@@ -32491,8 +32674,8 @@
     rowIndex: { type: Number, required: true },
     flattenRowIndex: { type: Number, required: true },
     rowKey: { type: [Number, String] },
-    column: { type: Object },
-    item: { type: Object },
+    column: { type: Object, default: () => ({}) },
+    item: { type: Object, default: () => ({}) },
     wrapText: { type: Boolean, default: false },
     type: { type: String },
     height: Number,
@@ -32518,39 +32701,6 @@
     error: "#e8353e",
     warning: "#eb8903"
   };
-  let cachedPrefixCls = "";
-  let cls = {
-    cellInner: "",
-    cellContent: "",
-    cellWrapText: "",
-    cellTextEllipsis: "",
-    cell: "",
-    firstCell: "",
-    bodyCell: "",
-    cellMulti: "",
-    cellHidden: "",
-    columnSort: "",
-    withAppend: ""
-  };
-  function getCls(prefixCls) {
-    if (prefixCls !== cachedPrefixCls) {
-      cachedPrefixCls = prefixCls;
-      cls = {
-        cellInner: `${prefixCls}-cell-inner`,
-        cellContent: `${prefixCls}-cell-content`,
-        cellWrapText: `${prefixCls}-cell-wrap-text`,
-        cellTextEllipsis: `${prefixCls}-cell-text-ellipsis`,
-        cell: `${prefixCls}-cell`,
-        firstCell: `${prefixCls}-first-cell`,
-        bodyCell: `${prefixCls}-body-cell`,
-        cellMulti: `${prefixCls}-cell-multi`,
-        cellHidden: `${prefixCls}-cell-hidden`,
-        columnSort: `${prefixCls}-column-sort`,
-        withAppend: `${prefixCls}-with-append`
-      };
-    }
-    return cls;
-  }
   const BodyCell$1 = (props, { slots, emit }) => {
     var _a, _b, _c, _d, _e, _f, _g, _h;
     const { table } = useProConfigInject();
@@ -32571,13 +32721,11 @@
     let tooltipTitle = value;
     const valueStatus = runFunction(column == null ? void 0 : column.valueStatus, value, props.item, valueEnum == null ? void 0 : valueEnum[value]);
     const recordIndexs = tableContext.getIndexsByKey(rowKey);
-    const c = getCls(prefixCls);
-    const cellInnerClass = c.cellInner;
-    const isWrapText = column.wrapText === void 0 ? wrapText : column.wrapText;
+    const cellInnerClass = { [`${prefixCls}-cell-inner`]: true };
     const cellContentClass = {
-      [c.cellContent]: true,
-      [c.cellWrapText]: isWrapText,
-      [c.cellTextEllipsis]: !!column.ellipsis
+      [`${prefixCls}-cell-content`]: true,
+      [`${prefixCls}-cell-wrap-text`]: column.wrapText === void 0 ? wrapText : column.wrapText,
+      [`${prefixCls}-cell-text-ellipsis`]: !!column.ellipsis
     };
     const cellContentStyle = {
       textAlign: `${column.align}`,
@@ -32594,13 +32742,13 @@
     const cellProps2 = cellRender.props || {};
     const cellRowSpan = cellProps2.rowSpan;
     const cellClass = {
-      [c.cell]: true,
-      [c.firstCell]: column.columnIndex === 0,
-      [c.bodyCell]: true,
-      [c.cellMulti]: cellRowSpan > 1,
-      [c.cellHidden]: cellRowSpan === 0,
-      [c.columnSort]: sorterInfo.sorterOrder,
-      [c.withAppend]: hasAppendNode
+      [`${prefixCls}-cell`]: true,
+      [`${prefixCls}-first-cell`]: column.columnIndex === 0,
+      [`${prefixCls}-body-cell`]: true,
+      [`${prefixCls}-cell-multi`]: cellRowSpan > 1,
+      [`${prefixCls}-cell-hidden`]: cellRowSpan === 0,
+      [`${prefixCls}-column-sort`]: sorterInfo.sorterOrder,
+      [`${prefixCls}-with-append`]: hasAppendNode
     };
     const cellRenderArgs = {
       record: item,
@@ -32608,7 +32756,7 @@
       text: value,
       value,
       index: rowIndex,
-      recordIndexs,
+      recordIndexs: tableContext.getIndexsByKey(rowKey),
       key,
       valueStatus,
       cancelEditable: tableContext.cancelEditable,
@@ -32672,12 +32820,14 @@
       [
         vue.createVNode(
           "div",
-          {
-            class: cellContentClass,
-            style: cellContentStyle,
-            title: altTitle,
-            ...cellKeyProps
-          },
+          vue.mergeProps(
+            {
+              class: cellContentClass,
+              style: cellContentStyle,
+              title: altTitle
+            },
+            cellKeyProps
+          ),
           [hasAppendNode ? (_h = slots.appendNode) == null ? void 0 : _h.call(slots) : null, bodyCell]
         )
       ]
@@ -33224,8 +33374,8 @@
       rowIndex: { type: Number, required: true },
       flattenRowIndex: { type: Number, required: true },
       rowKey: { type: [Number, String] },
-      column: { type: Object, required: true },
-      item: { type: Object, required: true },
+      column: { type: Object, default: () => ({}) },
+      item: { type: Object, default: () => ({}) },
       wrapText: { type: Boolean, default: false },
       type: { type: String },
       height: Number,
@@ -33351,33 +33501,18 @@
       "edit-row": _ctx.editRow,
       "editable-keys": _ctx.editableKeys,
       "is-row-edit": _ctx.isRowEdit
-    }, null, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "edit-row", "editable-keys", "is-row-edit"])) : (vue.openBlock(), vue.createBlock(_component_BodyTextCell, {
-      key: 1,
-      prefixCls: _ctx.prefixCls,
-      rowIndex: _ctx.rowIndex,
-      flattenRowIndex: _ctx.flattenRowIndex,
-      rowKey: _ctx.rowKey,
-      column: _ctx.column,
-      item: _ctx.item,
-      wrapText: _ctx.wrapText,
-      type: _ctx.type,
-      height: _ctx.height,
-      hasAppendNode: _ctx.hasAppendNode,
-      resizeObserver: _ctx.resizeObserver,
-      calMaxHeight: _ctx.calMaxHeight,
-      tooltipOpen: _ctx.tooltipOpen,
-      getPopupContainer: _ctx.getPopupContainer,
-      style: vue.normalizeStyle({ cursor: _ctx.editable ? "poiner" : "" }),
+    }, null, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "edit-row", "editable-keys", "is-row-edit"])) : (vue.openBlock(), vue.createBlock(_component_BodyTextCell, vue.mergeProps({ key: 1 }, _ctx.props, {
+      style: { cursor: _ctx.editable ? "poiner" : "" },
       onClick: _cache[0] || (_cache[0] = ($event) => _ctx.onCellEvent($event, "click")),
       onDblClick: _cache[1] || (_cache[1] = ($event) => _ctx.onCellEvent($event, "dblClick")),
       onContextmenu: _cache[2] || (_cache[2] = ($event) => _ctx.onCellEvent($event, "contextmenu"))
-    }, {
+    }), {
       appendNode: vue.withCtx(() => [
         vue.renderSlot(_ctx.$slots, "appendNode")
       ]),
       _: 3
       /* FORWARDED */
-    }, 8, ["prefixCls", "rowIndex", "flattenRowIndex", "rowKey", "column", "item", "wrapText", "type", "height", "hasAppendNode", "resizeObserver", "calMaxHeight", "tooltipOpen", "getPopupContainer", "style"]));
+    }, 16, ["style"]));
   }
   var BodyCell = /* @__PURE__ */ _export_sfc(_sfc_main$n, [["render", _sfc_render$j]]);
 
@@ -34846,25 +34981,11 @@
         return summaryStyle.value;
       });
       const emptyStyle = vue.computed(() => ({ width: `${props.bodyWidth}px` }));
-      let resizeRafFrame;
-      let pendingWidth = 0;
-      let pendingHeight = 0;
       useResizeObserver(measureDomRef, (entries) => {
         var _a;
         const contentRect = (_a = entries[0]) == null ? void 0 : _a.contentRect;
-        const w = Math.floor((contentRect == null ? void 0 : contentRect.width) || 0);
-        const h = Math.floor((contentRect == null ? void 0 : contentRect.height) || 0);
-        if (w === pendingWidth && h === pendingHeight) return;
-        pendingWidth = w;
-        pendingHeight = h;
-        raf.cancel(resizeRafFrame);
-        resizeRafFrame = raf(() => {
-          emit("update:bodyWidth", pendingWidth);
-          emit("update:bodyHeight", pendingHeight);
-        });
-      });
-      vue.onBeforeUnmount(() => {
-        raf.cancel(resizeRafFrame);
+        emit("update:bodyWidth", (contentRect == null ? void 0 : contentRect.width) || 0);
+        emit("update:bodyHeight", (contentRect == null ? void 0 : contentRect.height) || 0);
       });
       return {
         bodyContainerStyle,
@@ -35561,6 +35682,9 @@
     slots: {},
     setup(props, { expose, emit, slots }) {
       const { table } = useProConfigInject();
+      const perfEnabled = vue.shallowRef(!!props.perf);
+      const perfContext = createPerfContext(perfEnabled);
+      providePerfContext(perfContext);
       const counter = useInjectContainer();
       const rowKey = vue.computed(() => {
         var _a, _b, _c;
@@ -37877,7 +38001,7 @@
         [`${props.prefixCls}-card-bordered`]: isCard.value && isBordered("search", props.cardBordered)
       }));
       return () => {
-        var _a, _b;
+        var _a;
         return vue.createVNode("div", {
           "class": className.value,
           "style": {
@@ -37889,27 +38013,27 @@
           "items": props.items,
           "loading": props.loading,
           "style": {
-            marginBlockEnd: ((_a = props.search) == null ? void 0 : _a.cardProps) !== false && props.tableShowCard ? 0 : "16px",
-            ...(_b = props.search) == null ? void 0 : _b.style
+            marginBlockEnd: isCard.value ? 0 : "16px",
+            ...(_a = props.search) == null ? void 0 : _a.style
           },
           "onReset": props.onReset,
           "onFinish": (values) => {
-            var _a2, _b2;
+            var _a2, _b;
             submit(values, false);
-            (_b2 = (_a2 = props.search) == null ? void 0 : _a2.onFinish) == null ? void 0 : _b2.call(_a2, values);
+            (_b = (_a2 = props.search) == null ? void 0 : _a2.onFinish) == null ? void 0 : _b.call(_a2, values);
           },
           "onValuesChange": (values) => {
-            var _a2, _b2, _c;
+            var _a2, _b, _c;
             if (((_a2 = props.search) == null ? void 0 : _a2.submitter) === false) {
               submit(values, true);
             }
-            (_c = (_b2 = props.search) == null ? void 0 : _b2.onValuesChange) == null ? void 0 : _c.call(_b2, values);
+            (_c = (_b = props.search) == null ? void 0 : _b.onValuesChange) == null ? void 0 : _c.call(_b, values);
           },
           "onInit": (values, action) => {
-            var _a2, _b2, _c;
+            var _a2, _b, _c;
             submit(values, true);
             (_a2 = props.setFormAction) == null ? void 0 : _a2.call(props, action);
-            (_c = (_b2 = props.search) == null ? void 0 : _b2.onInit) == null ? void 0 : _c.call(_b2, values, action);
+            (_c = (_b = props.search) == null ? void 0 : _b.onInit) == null ? void 0 : _c.call(_b, values, action);
           },
           "onCollapse": props.onCollapse
         }), slots)]);
@@ -38198,11 +38322,11 @@
         return false;
       });
       const showTableCard = vue.computed(() => {
-        var _a2, _b2;
+        var _a2, _b2, _c;
         if (counter.hasFullScreen.value) {
           return false;
         }
-        return !!((_b2 = props.cardProps) != null ? _b2 : (_a2 = table == null ? void 0 : table.value) == null ? void 0 : _a2.cardProps) && !notNeedCardDom.value;
+        return !!((_c = (_b2 = props.cardProps) != null ? _b2 : (_a2 = table == null ? void 0 : table.value) == null ? void 0 : _a2.cardProps) != null ? _c : true) && !notNeedCardDom.value;
       });
       const cardBodyStyle = vue.computed(() => {
         if (!showTableCard.value) return {};