@jetlinks-web/components 3.2.1 → 3.2.3

package/lib/VirtualTable/Table.js

@@ -5,15 +5,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _vue = require("vue");
 var _antDesignVue = require("ant-design-vue");
 var _table = require("ant-design-vue/lib/table");
 var _useVirtualScroll = require("./useVirtualScroll");
 var _useTreeData = require("./useTreeData");
-// 展开图标组件
-var ExpandIcon = (0, _vue.defineComponent)({
+// 展开图标组件 - 使用 markRaw 避免响应式包装
+var ExpandIcon = (0, _vue.markRaw)((0, _vue.defineComponent)({
   name: 'VirtualExpandIcon',
   props: {
     expanded: Boolean,
@@ -32,7 +32,6 @@ var ExpandIcon = (0, _vue.defineComponent)({
     };
     return function () {
       if (!props.hasChildren) {
-        // 占位符，保持对齐
         return (0, _vue.createVNode)("span", {
           "class": "".concat(props.prefixCls, "-row-expand-icon ").concat(props.prefixCls, "-row-expand-icon-spaced")
         }, null);
@@ -45,11 +44,57 @@ var ExpandIcon = (0, _vue.defineComponent)({
       }, null);
     };
   }
-});
+}));
+// Proxy 缓存池
+var proxyCache = new WeakMap();
+function getOrCreateProxy(record, node) {
+  var proxy = proxyCache.get(record);
+  if (proxy && proxy.__virtual_tree_node__ === node) {
+    return proxy;
+  }
+  proxy = new Proxy(record, {
+    get: function get(target, prop) {
+      if (prop === '__virtual_tree_node__') {
+        return node;
+      }
+      return Reflect.get(target, prop);
+    },
+    set: function set(target, prop, value) {
+      if (prop !== '__virtual_tree_node__') {
+        return Reflect.set(target, prop, value);
+      }
+      return true;
+    },
+    has: function has(target, prop) {
+      if (prop === '__virtual_tree_node__') {
+        return true;
+      }
+      return Reflect.has(target, prop);
+    },
+    ownKeys: function ownKeys(target) {
+      return [].concat((0, _toConsumableArray2.default)(Reflect.ownKeys(target)), ['__virtual_tree_node__']);
+    },
+    getOwnPropertyDescriptor: function getOwnPropertyDescriptor(target, prop) {
+      if (prop === '__virtual_tree_node__') {
+        return {
+          configurable: true,
+          enumerable: false,
+          value: node
+        };
+      }
+      return Reflect.getOwnPropertyDescriptor(target, prop);
+    }
+  });
+  proxyCache.set(record, proxy);
+  return proxy;
+}
 /**
  * 虚拟滚动 Table 组件
- * 完全兼容 a-table 的所有功能，同时支持大数据虚拟滚动
- * 支持树形数据的虚拟滚动
+ * 性能优化：
+ * 1. 数据切片使用 computed 缓存，避免重复切片
+ * 2. 使用 shallowRef 减少响应式开销
+ * 3. 使用 passive 滚动事件监听
+ * 4. rowKey 确保组件正确复用
  */
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'JVirtualTable',
@@ -67,9 +112,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       slots = _ref.slots,
       expose = _ref.expose,
       emit = _ref.emit;
-    // Table ref
     var tableRef = (0, _vue.ref)();
-    var scrollContainerRef = (0, _vue.ref)();
+    var scrollContainerRef = (0, _vue.shallowRef)();
     // 解析虚拟滚动配置
     var virtualConfig = (0, _vue.computed)(function () {
       if (!props.virtual) return null;
@@ -86,21 +130,18 @@ var _default = exports.default = (0, _vue.defineComponent)({
         threshold: props.virtual.threshold || 100
       };
     });
-    // 获取容器高度
+    // 容器高度
     var containerHeight = (0, _vue.computed)(function () {
       var _props$scroll;
       if (!((_props$scroll = props.scroll) !== null && _props$scroll !== void 0 && _props$scroll.y)) return 0;
       var y = props.scroll.y;
       if (typeof y === 'number') return y;
-      // 解析 '500px' 这样的字符串
       var num = parseInt(String(y), 10);
       return isNaN(num) ? 0 : num;
     });
-    // 获取子节点字段名
     var childrenColumnName = (0, _vue.computed)(function () {
       return props.childrenColumnName || 'children';
     });
-    // 获取 rowKey
     var rowKeyProp = (0, _vue.computed)(function () {
       return props.rowKey || 'key';
     });
@@ -112,7 +153,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         return children && Array.isArray(children) && children.length > 0;
       });
     });
-    // 使用树形数据 hook
+    // 树形数据处理
     var treeDataResult = (0, _useTreeData.useTreeData)({
       data: (0, _vue.toRef)(props, 'dataSource'),
       childrenColumnName: childrenColumnName.value,
@@ -121,32 +162,29 @@ var _default = exports.default = (0, _vue.defineComponent)({
       expandedRowKeys: props.expandedRowKeys ? (0, _vue.toRef)(props, 'expandedRowKeys') : undefined,
       defaultExpandAllRows: props.defaultExpandAllRows,
       onExpandedRowsChange: function onExpandedRowsChange(keys) {
-        emit('expandedRowsChange', keys);
+        return emit('expandedRowsChange', keys);
       }
     });
-    // 处理展开/折叠
     var handleExpand = function handleExpand(node) {
       treeDataResult.toggle(node.key);
       emit('expand', !node.expanded, node.record);
     };
-    // 判断是否启用虚拟滚动
-    var shouldEnableVirtual = (0, _vue.computed)(function () {
-      var _props$scroll2, _props$dataSource;
-      if (!virtualConfig.value) return false;
-      if (!((_props$scroll2 = props.scroll) !== null && _props$scroll2 !== void 0 && _props$scroll2.y)) return false;
-      // 对于树形数据，使用扁平化后的数据长度
-      var dataLength = isTreeData.value ? treeDataResult.flattenedData.value.length : ((_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.length) || 0;
-      return dataLength >= virtualConfig.value.threshold;
-    });
-    // 虚拟滚动的数据数量（树形数据使用扁平化后的长度）
+    // 数据数量
     var itemCount = (0, _vue.computed)(function () {
-      var _props$dataSource2;
+      var _props$dataSource;
       if (isTreeData.value) {
         return treeDataResult.flattenedData.value.length;
       }
-      return ((_props$dataSource2 = props.dataSource) === null || _props$dataSource2 === void 0 ? void 0 : _props$dataSource2.length) || 0;
+      return ((_props$dataSource = props.dataSource) === null || _props$dataSource === void 0 ? void 0 : _props$dataSource.length) || 0;
     });
-    // 初始化虚拟滚动
+    // 判断是否启用虚拟滚动
+    var shouldEnableVirtual = (0, _vue.computed)(function () {
+      var _props$scroll2;
+      if (!virtualConfig.value) return false;
+      if (!((_props$scroll2 = props.scroll) !== null && _props$scroll2 !== void 0 && _props$scroll2.y)) return false;
+      return itemCount.value >= virtualConfig.value.threshold;
+    });
+    // 虚拟滚动 hook
     var virtualScroll = (0, _useVirtualScroll.useVirtualScroll)({
       itemCount: itemCount,
       containerHeight: containerHeight,
@@ -154,178 +192,86 @@ var _default = exports.default = (0, _vue.defineComponent)({
       overscan: ((_virtualConfig$value2 = virtualConfig.value) === null || _virtualConfig$value2 === void 0 ? void 0 : _virtualConfig$value2.overscan) || 5,
       threshold: ((_virtualConfig$value3 = virtualConfig.value) === null || _virtualConfig$value3 === void 0 ? void 0 : _virtualConfig$value3.threshold) || 100
     });
-    // 查找并监听滚动容器
-    var findScrollContainer = function findScrollContainer() {
-      if (!tableRef.value) return null;
-      // 查找 .ant-table-body 元素（这是实际的滚动容器）
-      var tableElement = tableRef.value.$el || tableRef.value;
-      var scrollBody = tableElement.querySelector('.ant-table-body');
-      return scrollBody;
-    };
-    // 设置滚动监听
-    var setupScrollListener = function setupScrollListener() {
-      (0, _vue.nextTick)(function () {
-        var container = findScrollContainer();
-        if (container) {
-          scrollContainerRef.value = container;
-          container.addEventListener('scroll', virtualScroll.handleScroll);
-        }
-      });
-    };
-    // 移除滚动监听
-    var removeScrollListener = function removeScrollListener() {
-      if (scrollContainerRef.value) {
-        scrollContainerRef.value.removeEventListener('scroll', virtualScroll.handleScroll);
-        scrollContainerRef.value = undefined;
-      }
-    };
-    // 监听虚拟滚动启用状态变化
-    (0, _vue.watch)(shouldEnableVirtual, function (enabled) {
-      if (enabled) {
-        setupScrollListener();
-      } else {
-        removeScrollListener();
+    // ⭐ 关键优化：使用 computed 缓存切片数据，避免每次渲染都创建新数组
+    var virtualDataSource = (0, _vue.computed)(function () {
+      if (!shouldEnableVirtual.value) {
+        return props.dataSource || [];
       }
-    });
-    // 生命周期
-    (0, _vue.onMounted)(function () {
-      if (shouldEnableVirtual.value) {
-        setupScrollListener();
+      var start = virtualScroll.startIndex.value;
+      var end = virtualScroll.endIndex.value;
+      if (isTreeData.value) {
+        var flatData = treeDataResult.flattenedData.value;
+        var visibleNodes = flatData.slice(start, end);
+        return visibleNodes.map(function (node) {
+          return getOrCreateProxy(node.record, node);
+        });
       }
+      return (props.dataSource || []).slice(start, end);
     });
-    (0, _vue.onBeforeUnmount)(function () {
-      removeScrollListener();
-    });
-    // 暴露方法
-    (0, _vue.defineExpose)({
-      scrollTo: virtualScroll.scrollTo,
-      scrollToIndex: virtualScroll.scrollToIndex,
-      // 树形数据相关方法
-      expand: treeDataResult.expand,
-      collapse: treeDataResult.collapse,
-      toggle: treeDataResult.toggle,
-      expandAll: treeDataResult.expandAll,
-      collapseAll: treeDataResult.collapseAll,
-      expandTo: treeDataResult.expandTo,
-      isExpanded: treeDataResult.isExpanded
-    });
-    // 渲染函数
-    return function () {
+    // 缓存 columns 处理
+    var processedColumns = (0, _vue.computed)(function () {
       var _props$indentSize;
-      // 不使用虚拟滚动的情况
-      if (!shouldEnableVirtual.value) {
-        return (0, _vue.createVNode)(_antDesignVue.Table, (0, _objectSpread2.default)((0, _objectSpread2.default)({
-          "ref": tableRef
-        }, attrs), props), slots);
+      if (!isTreeData.value || !shouldEnableVirtual.value) {
+        return props.columns;
       }
-      // 使用虚拟滚动
-      var startIndex = virtualScroll.startIndex,
-        endIndex = virtualScroll.endIndex,
-        offsetY = virtualScroll.offsetY,
-        totalHeight = virtualScroll.totalHeight;
-      // 准备虚拟滚动数据
-      var virtualDataSource;
-      var needsCustomIndent = false;
+      var columns = props.columns;
+      if (!columns || columns.length === 0) return columns;
       var indentSize = (_props$indentSize = props.indentSize) !== null && _props$indentSize !== void 0 ? _props$indentSize : 15;
-      if (isTreeData.value) {
-        // 树形数据：使用扁平化后的数据
-        var flatData = treeDataResult.flattenedData.value;
-        var visibleNodes = flatData.slice(startIndex.value, endIndex.value);
-        // 使用 Proxy 代理原始 record，确保修改能同步到原始数据
-        virtualDataSource = visibleNodes.map(function (node) {
-          return new Proxy(node.record, {
-            get: function get(target, prop) {
-              if (prop === '__virtual_tree_node__') {
-                return node;
+      return columns.map(function (col, colIndex) {
+        if (colIndex === 0) {
+          var originalRender = col.customRender;
+          return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
+            customRender: function customRender(renderProps) {
+              var record = renderProps.record,
+                text = renderProps.text;
+              var treeNode = record.__virtual_tree_node__;
+              if (!treeNode) {
+                if (originalRender) return originalRender(renderProps);
+                return text;
               }
-              return Reflect.get(target, prop);
-            },
-            set: function set(target, prop, value) {
-              if (prop !== '__virtual_tree_node__') {
-                return Reflect.set(target, prop, value);
-              }
-              return true;
-            },
-            has: function has(target, prop) {
-              if (prop === '__virtual_tree_node__') {
-                return true;
-              }
-              return Reflect.has(target, prop);
-            },
-            ownKeys: function ownKeys(target) {
-              return [].concat((0, _toConsumableArray2.default)(Reflect.ownKeys(target)), ['__virtual_tree_node__']);
-            },
-            getOwnPropertyDescriptor: function getOwnPropertyDescriptor(target, prop) {
-              if (prop === '__virtual_tree_node__') {
-                return {
-                  configurable: true,
-                  enumerable: false,
-                  value: node
-                };
-              }
-              return Reflect.getOwnPropertyDescriptor(target, prop);
+              var level = treeNode.level,
+                hasChildren = treeNode.hasChildren,
+                expanded = treeNode.expanded;
+              var indentStyle = {
+                paddingLeft: "".concat(level * indentSize, "px"),
+                display: 'inline-flex',
+                alignItems: 'center'
+              };
+              var content = originalRender ? originalRender(renderProps) : text;
+              return (0, _vue.createVNode)("span", {
+                "style": indentStyle
+              }, [(0, _vue.createVNode)(ExpandIcon, {
+                "expanded": expanded,
+                "hasChildren": hasChildren,
+                "onExpand": function onExpand() {
+                  return handleExpand(treeNode);
+                }
+              }, null), (0, _vue.createVNode)("span", null, [content])]);
             }
           });
-        });
-        needsCustomIndent = true;
-      } else {
-        // 普通数据：直接切片
-        virtualDataSource = (props.dataSource || []).slice(startIndex.value, endIndex.value);
-      }
-      // 处理列，添加树形展开功能
-      var processedColumns = props.columns;
-      if (needsCustomIndent && processedColumns && processedColumns.length > 0) {
-        // 克隆 columns，修改第一列以添加展开按钮和缩进
-        processedColumns = processedColumns.map(function (col, colIndex) {
-          if (colIndex === 0) {
-            var originalRender = col.customRender;
-            return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, col), {}, {
-              customRender: function customRender(renderProps) {
-                var record = renderProps.record,
-                  text = renderProps.text,
-                  index = renderProps.index;
-                var treeNode = record.__virtual_tree_node__;
-                if (!treeNode) {
-                  // 非树形数据行，使用原始渲染
-                  if (originalRender) {
-                    return originalRender(renderProps);
-                  }
-                  return text;
-                }
-                var level = treeNode.level,
-                  hasChildren = treeNode.hasChildren,
-                  expanded = treeNode.expanded;
-                var indentStyle = {
-                  paddingLeft: "".concat(level * indentSize, "px"),
-                  display: 'inline-flex',
-                  alignItems: 'center'
-                };
-                var content = originalRender ? originalRender(renderProps) : text;
-                return (0, _vue.createVNode)("span", {
-                  "style": indentStyle
-                }, [(0, _vue.createVNode)(ExpandIcon, {
-                  "expanded": expanded,
-                  "hasChildren": hasChildren,
-                  "onExpand": function onExpand() {
-                    return handleExpand(treeNode);
-                  }
-                }, null), (0, _vue.createVNode)("span", null, [content])]);
-              }
-            });
-          }
-          return col;
-        });
+        }
+        return col;
+      });
+    });
+    // 缓存 components
+    var virtualComponents = (0, _vue.computed)(function () {
+      if (!shouldEnableVirtual.value) {
+        return props.components;
       }
-      // 自定义 body 组件
-      var customComponents = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.components || {}), {}, {
+      var startIndex = virtualScroll.startIndex,
+        endIndex = virtualScroll.endIndex,
+        offsetY = virtualScroll.offsetY,
+        totalHeight = virtualScroll.totalHeight,
+        getItemHeight = virtualScroll.getItemHeight;
+      var columns = processedColumns.value;
+      return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props.components || {}), {}, {
         body: {
           wrapper: function wrapper(bodyProps, _ref2) {
-            var _processedColumns, _bodySlots$default, _processedColumns2;
+            var _bodySlots$default;
             var bodySlots = _ref2.slots;
-            // 计算底部占位高度
             var accumulatedHeight = offsetY.value;
             for (var i = startIndex.value; i < endIndex.value; i++) {
-              accumulatedHeight += virtualScroll.getItemHeight(i);
+              accumulatedHeight += getItemHeight(i);
             }
             var bottomHeight = totalHeight.value - accumulatedHeight;
             return (0, _vue.createVNode)("tbody", (0, _objectSpread2.default)((0, _objectSpread2.default)({}, bodyProps), {}, {
@@ -341,7 +287,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 border: 0,
                 height: "".concat(offsetY.value, "px")
               },
-              "colSpan": ((_processedColumns = processedColumns) === null || _processedColumns === void 0 ? void 0 : _processedColumns.length) || 1
+              "colSpan": (columns === null || columns === void 0 ? void 0 : columns.length) || 1
             }, null)]), (_bodySlots$default = bodySlots.default) === null || _bodySlots$default === void 0 ? void 0 : _bodySlots$default.call(bodySlots), bottomHeight > 0 && (0, _vue.createVNode)("tr", {
               "aria-hidden": "true",
               "style": {
@@ -353,22 +299,85 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 border: 0,
                 height: "".concat(bottomHeight, "px")
               },
-              "colSpan": ((_processedColumns2 = processedColumns) === null || _processedColumns2 === void 0 ? void 0 : _processedColumns2.length) || 1
+              "colSpan": (columns === null || columns === void 0 ? void 0 : columns.length) || 1
             }, null)])]);
           }
         }
       });
-      // 移除树形数据的 children 配置，因为我们自己处理
-      var tableProps = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
-        dataSource: virtualDataSource,
-        columns: processedColumns,
-        components: customComponents
-      }, isTreeData.value ? {
+    });
+    // 滚动监听
+    var findScrollContainer = function findScrollContainer() {
+      if (!tableRef.value) return null;
+      var tableElement = tableRef.value.$el || tableRef.value;
+      return tableElement.querySelector('.ant-table-body');
+    };
+    var setupScrollListener = function setupScrollListener() {
+      (0, _vue.nextTick)(function () {
+        var container = findScrollContainer();
+        if (container) {
+          scrollContainerRef.value = container;
+          container.addEventListener('scroll', virtualScroll.handleScroll, {
+            passive: true
+          });
+        }
+      });
+    };
+    var removeScrollListener = function removeScrollListener() {
+      if (scrollContainerRef.value) {
+        scrollContainerRef.value.removeEventListener('scroll', virtualScroll.handleScroll);
+        scrollContainerRef.value = undefined;
+      }
+    };
+    (0, _vue.watch)(shouldEnableVirtual, function (enabled) {
+      if (enabled) setupScrollListener();else removeScrollListener();
+    });
+    (0, _vue.onMounted)(function () {
+      if (shouldEnableVirtual.value) setupScrollListener();
+    });
+    (0, _vue.onBeforeUnmount)(function () {
+      removeScrollListener();
+    });
+    // 滚动到指定索引（同时更新虚拟状态和真实 DOM）
+    var scrollToIndex = function scrollToIndex(index) {
+      virtualScroll.scrollToIndex(index);
+      // 同步滚动真实 DOM
+      (0, _vue.nextTick)(function () {
+        if (scrollContainerRef.value) {
+          scrollContainerRef.value.scrollTop = virtualScroll.scrollTop.value;
+        }
+      });
+    };
+    // 滚动到指定位置
+    var scrollTo = function scrollTo(offset) {
+      virtualScroll.scrollTo(offset);
+      (0, _vue.nextTick)(function () {
+        if (scrollContainerRef.value) {
+          scrollContainerRef.value.scrollTop = virtualScroll.scrollTop.value;
+        }
+      });
+    };
+    expose({
+      scrollTo: scrollTo,
+      scrollToIndex: scrollToIndex,
+      expand: treeDataResult.expand,
+      collapse: treeDataResult.collapse,
+      toggle: treeDataResult.toggle,
+      expandAll: treeDataResult.expandAll,
+      collapseAll: treeDataResult.collapseAll,
+      expandTo: treeDataResult.expandTo,
+      isExpanded: treeDataResult.isExpanded
+    });
+    return function () {
+      var tablePropsObj = (0, _objectSpread2.default)((0, _objectSpread2.default)({}, props), {}, {
+        dataSource: virtualDataSource.value,
+        columns: processedColumns.value,
+        components: virtualComponents.value
+      }, isTreeData.value && shouldEnableVirtual.value ? {
         childrenColumnName: '__disabled__'
       } : {});
       return (0, _vue.createVNode)(_antDesignVue.Table, (0, _objectSpread2.default)((0, _objectSpread2.default)({
         "ref": tableRef
-      }, attrs), tableProps), slots);
+      }, attrs), tablePropsObj), slots);
     };
   }
 });