bkui-vue 2.0.1-beta.40 → 2.0.1-beta.41

package/lib/table/index.js

@@ -17661,6 +17661,9 @@ var IColSortBehavior;
    */
   IColSortBehavior["interdependent"] = "interdependent";
 })(IColSortBehavior || (IColSortBehavior = {}));
+// export enum BkScrollBehavior {
+//   AUTO = 'auto',
+// };
 var tableProps = {
   /**
    * 渲染列表
@@ -17876,6 +17879,10 @@ var tableProps = {
    * 是否监表格尺寸变化而响应式重新计算渲染
    */
   observerResize: shared_namespaceObject.PropTypes.bool.def(true),
+  /**
+   * 是否使用IntersectionObserver监听表格Cell进如有可视区域再渲染
+   */
+  intersectionObserver: shared_namespaceObject.PropTypes.bool.def(false),
   // 对齐方式
   align: TableAlign,
   headerAlign: TableAlign,
@@ -17910,6 +17917,7 @@ var tableProps = {
    * 启用Scrollbar
    */
   scrollbar: shared_namespaceObject.PropTypes.bool.def(true),
+  // scrollbehavior: toType<`${ScrollBehavior}`>('ScrollBehavior', {
   /**
    * 固定在底部的配置项
    */
@@ -18126,13 +18134,13 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
 
 
 
-
 /* harmony default export */ const use_column_resize = (function (columns, _ref) {
   var afterResize = _ref.afterResize;
   var getColumnAttribute = columns.getColumnAttribute,
     getColumnOrderWidth = columns.getColumnOrderWidth,
     setColumnAttribute = columns.setColumnAttribute,
-    setNextColumnWidth = columns.setNextColumnWidth;
+    setNextColumnWidth = columns.setNextColumnWidth,
+    getPreColumn = columns.getPreColumn;
   var getColListener = function getColListener(col) {
     return getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
   };
@@ -18148,7 +18156,11 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
   var isDraging = false;
   var startX = 0;
   var dragColumn = null;
-  var dragStartOffsetX = 0;
+  var poinerPlacement = 'right';
+  var headTable = null;
+  var mouseMoveColumn = null;
+  var dragWidth = 0;
+  var cellCursorStore = new WeakMap();
   var dragOffsetX = (0,external_vue_namespaceObject.ref)(-1000);
   var ORDER_LIST = [COLUMN_ATTRIBUTE.WIDTH];
   var stopDefaultEvent = function stopDefaultEvent(e) {
@@ -18160,90 +18172,119 @@ var CELL_EVENT_TYPES = defineProperty_defineProperty(defineProperty_defineProper
     stopDefaultEvent(e);
     isMouseDown = false;
     isDraging = false;
-    var diff = e.clientX - startX;
-    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + dragWidth;
     var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
     var calcWidth = resolveWidth > minWidth ? resolveWidth : minWidth;
     setNextColumnWidth(dragColumn, calcWidth);
     setColumnAttribute(dragColumn, COLUMN_ATTRIBUTE.WIDTH, calcWidth);
     document.removeEventListener('mouseup', handleMouseUp);
-    document.removeEventListener('mousemove', handleMouseMove);
-    startX = 0;
     dragOffsetX.value = -1000;
-    dragColumn = null;
-    var target = e.target.closest('th');
-    removeCursor(target);
+    dragWidth = 0;
+    removeCursor(headTable);
     afterResize === null || afterResize === void 0 || afterResize();
+    headTable = null;
+    var target = e.target;
+    handleMouseoutDragSection(target);
+    dragColumn = null;
   };
-  var updateOffsetX = function updateOffsetX(e) {
-    return (0,shared_namespaceObject.throttle)(function () {
-      var diff = e.clientX - startX;
-      var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
-      var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
-      if (minWidth < resolveWidth) {
-        dragOffsetX.value = e.clientX - startX + dragStartOffsetX;
-      }
-    });
-  };
-  var handleMouseMove = function handleMouseMove(e) {
+  var handleMouseDragMove = function handleMouseDragMove(e) {
     stopDefaultEvent(e);
-    updateOffsetX(e)();
+    document.body.style.setProperty('user-select', 'none');
+    var diff = e.clientX - startX;
+    dragWidth = dragWidth + diff;
+    startX = e.clientX;
+    var resolveWidth = getColumnOrderWidth(dragColumn, ORDER_LIST) + diff;
+    var minWidth = getColumnOrderWidth(dragColumn, [COLUMN_ATTRIBUTE.COL_MIN_WIDTH]);
+    if (minWidth < resolveWidth) {
+      dragOffsetX.value = dragOffsetX.value + diff;
+    }
   };
   var setNodeCursor = function () {
     return (0,lodash.debounce)(function (target) {
-      var _target$style;
-      target === null || target === void 0 || (_target$style = target.style) === null || _target$style === void 0 || _target$style.setProperty('cursor', 'col-resize');
+      document.body.style.setProperty('user-select', 'none');
       target === null || target === void 0 || target.classList.add('col-resize-hover');
     });
   }();
   var removeCursor = function removeCursor(target) {
-    var _target$style2;
     setNodeCursor.cancel();
-    target === null || target === void 0 || (_target$style2 = target.style) === null || _target$style2 === void 0 || _target$style2.removeProperty('cursor');
+    document.body.style.removeProperty('user-select');
     target === null || target === void 0 || target.classList.remove('col-resize-hover');
   };
-  var handler = defineProperty_defineProperty(defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_DOWN, function (e, column) {
+  var handlemouseDownEvent = function handlemouseDownEvent(e) {
     if (!isInDragSection) {
       return;
     }
-    isMouseDown = true;
-    var target = e.target.closest('th');
+    removePointerClass(e.target);
+    startX = e.clientX;
+    var column = poinerPlacement === 'left' ? getPreColumn(mouseMoveColumn) : mouseMoveColumn;
     setColumnAttribute(column, COLUMN_ATTRIBUTE.COL_IS_DRAG, true);
-    setNodeCursor(target);
     dragColumn = column;
-    startX = e.clientX;
-    var targetTable = e.target.closest('table');
-    dragStartOffsetX = startX - targetTable.getBoundingClientRect().left;
-    updateOffsetX(e)();
+    headTable = e.target.closest('table');
+    var rect = headTable.getBoundingClientRect();
+    dragOffsetX.value = e.clientX - rect.left;
+    setNodeCursor(headTable);
+    isMouseDown = true;
     document.addEventListener('mouseup', handleMouseUp);
-    document.addEventListener('mousemove', handleMouseMove);
-    target === null || target === void 0 || target.classList.remove('col-resize-hover');
-  }), EVENTS.MOUSE_MOVE, function (e, _column) {
-    if (isMouseDown && !isDraging) {
-      isDraging = true;
+  };
+  var removePointerClass = function removePointerClass(target) {
+    var _target$parentElement;
+    var targetElements = target === null || target === void 0 || (_target$parentElement = target.parentElement) === null || _target$parentElement === void 0 || (_target$parentElement = _target$parentElement.parentElement) === null || _target$parentElement === void 0 ? void 0 : _target$parentElement.querySelectorAll('.col-pointer-hover');
+    targetElements.forEach(function (element) {
+      element === null || element === void 0 || element.classList.remove('col-pointer-hover');
+      element === null || element === void 0 || element.classList.remove('poiner-left');
+      element === null || element === void 0 || element.classList.remove('poiner-right');
+    });
+  };
+  var addPointerClass = function addPointerClass(target, poinerPlacement) {
+    var targetTh = target.parentElement;
+    targetTh === null || targetTh === void 0 || targetTh.classList.add('col-pointer-hover');
+    targetTh === null || targetTh === void 0 || targetTh.classList.add("poiner-".concat(poinerPlacement));
+    var nextTarget = poinerPlacement === 'right' ? targetTh.nextElementSibling : targetTh.previousElementSibling;
+    var nextPlacement = poinerPlacement === 'right' ? 'left' : 'right';
+    nextTarget === null || nextTarget === void 0 || nextTarget.classList.add('col-pointer-hover');
+    nextTarget === null || nextTarget === void 0 || nextTarget.classList.add("poiner-".concat(nextPlacement));
+  };
+  var handleMouseoutDragSection = function handleMouseoutDragSection(target) {
+    if (!isDraging) {
+      dragOffsetX.value = -1000;
+      target.classList.remove('cell-resize');
+      removePointerClass(target);
+      cellCursorStore.set(target, false);
+      document.removeEventListener('mousedown', handlemouseDownEvent);
     }
-    var target = e.target.closest('th');
-    if (isDraging) {
-      target.style.setProperty('user-select', 'none');
+  };
+  var handler = defineProperty_defineProperty(defineProperty_defineProperty({}, EVENTS.MOUSE_MOVE, function (e, column, index) {
+    stopDefaultEvent(e);
+    if (isMouseDown) {
+      isDraging = true;
+      handleMouseDragMove(e);
+      return;
     }
+    var target = e.target;
     if (!isDraging) {
       if (!target) {
         return;
       }
-      var rect = target.getBoundingClientRect();
-      if (rect.width > 12 && rect.right - e.pageX < 12) {
+      var offsetWidth = target.offsetWidth;
+      var mouseOffsetX = e.offsetX;
+      if (offsetWidth > 12 && (offsetWidth - mouseOffsetX < 8 || mouseOffsetX < 8 && index > 0)) {
         isInDragSection = true;
-        setNodeCursor(target);
+        poinerPlacement = mouseOffsetX < 8 ? 'left' : 'right';
+        if (!cellCursorStore.get(target)) {
+          cellCursorStore.set(target, true);
+          target.classList.add('cell-resize');
+          addPointerClass(target, poinerPlacement);
+          mouseMoveColumn = column;
+          document.addEventListener('mousedown', handlemouseDownEvent);
+        }
       } else {
-        removeCursor(target);
         isInDragSection = false;
+        handleMouseoutDragSection(target);
       }
     }
-  }), EVENTS.MOUSE_OUT, function (e, _column) {
-    var target = e.target.closest('th');
-    if (!isDraging) {
-      removeCursor(target);
-    }
+  }), EVENTS.MOUSE_OUT, function (e, _column, _index) {
+    var target = e.target;
+    handleMouseoutDragSection(target);
   });
   var getEventName = function getEventName(event) {
     return "".concat(pluginName, "_").concat(event);
@@ -19832,6 +19873,7 @@ var getElementTextWidth = function getElementTextWidth(element, text) {
    */
   function getTextWidth(text, font) {
     // re-use canvas object for better performance
+    // @ts-ignore
     var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement('canvas'));
     var context = canvas.getContext('2d');
     context.font = font;
@@ -19915,8 +19957,8 @@ var getSortFn = function getSortFn(column, sortType) {
   var sortFn = typeof ((_column$sort = column.sort) === null || _column$sort === void 0 ? void 0 : _column$sort.sortFn) === 'function' ? (_column$sort2 = column.sort) === null || _column$sort2 === void 0 ? void 0 : _column$sort2.sortFn : sortFn0;
   return sortType === SORT_OPTION.NULL ? function (_a, _b) {
     return true;
-  } : function (_a, _b, index0, index1) {
-    return sortFn(_a, _b, index0, index1) * (sortType === SORT_OPTION.DESC ? -1 : 1);
+  } : function (a, b, index0, index1) {
+    return sortFn(a, b, index0, index1) * (sortType === SORT_OPTION.DESC ? -1 : 1);
   };
 };
 var getNextSortType = function getNextSortType(sortType) {
@@ -20238,7 +20280,7 @@ var useColumns = function useColumns(props) {
     }
     return minWidth;
   };
-  var resolveEventListener = function resolveEventListener(col) {
+  var resolveEventListener = function resolveEventListener(col, index) {
     var listeners = getColumnAttribute(col, COLUMN_ATTRIBUTE.LISTENERS);
     if (!listeners) {
       return {};
@@ -20247,7 +20289,7 @@ var useColumns = function useColumns(props) {
       var eventName = key.split('_').slice(-1)[0];
       return Object.assign(handle, defineProperty_defineProperty({}, eventName, function (e) {
         listeners.get(key).forEach(function (fn) {
-          return Reflect.apply(fn, use_columns_this, [e, col]);
+          return Reflect.apply(fn, use_columns_this, [e, col, index]);
         });
       }));
     }, {});
@@ -20621,6 +20663,36 @@ var useColumns = function useColumns(props) {
       setColumnAttribute(col, COLUMN_ATTRIBUTE.SELECTION_INDETERMINATE, false);
     }
   };
+  var getPreColumn = function getPreColumn(col) {
+    var index = visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+    var preIndex = index - 1;
+    return visibleColumns[preIndex];
+  };
+  var getColumnIndex = function getColumnIndex(col) {
+    return visibleColumns.findIndex(function (item) {
+      return item === col;
+    });
+  };
+  var getLeftColumnsWidth = function getLeftColumnsWidth(col) {
+    var includingSelf = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+    var isContinue = true;
+    var width = 0;
+    var index = 0;
+    while (isContinue && index < visibleColumns.length) {
+      if (col === visibleColumns[index]) {
+        if (includingSelf) {
+          width = width + getColumnWidth(visibleColumns[index]);
+        }
+        isContinue = false;
+        break;
+      }
+      width = width + getColumnWidth(visibleColumns[index]);
+      index = index + 1;
+    }
+    return width;
+  };
   return {
     needColSpan: needColSpan,
     needRowSpan: needRowSpan,
@@ -20648,7 +20720,10 @@ var useColumns = function useColumns(props) {
     getColumnRefAttribute: getColumnRefAttribute,
     getColumnCalcWidth: getColumnCalcWidth,
     getColumnWidth: getColumnWidth,
+    getLeftColumnsWidth: getLeftColumnsWidth,
     getGroupAttribute: getGroupAttribute,
+    getPreColumn: getPreColumn,
+    getColumnIndex: getColumnIndex,
     resolveEventListener: resolveEventListener,
     setColumnIsHidden: setColumnIsHidden,
     setColumnResizeWidth: setColumnResizeWidth,
@@ -21016,8 +21091,9 @@ const loading_less_namespaceObject = loading_less_x({  });
   var refScrollLoading = (0,external_vue_namespaceObject.toRef)(props, 'scrollLoading');
   var getLoadingOption = function getLoadingOption() {
     if (typeof refScrollLoading.value === 'boolean') {
+      var _props$fixedBottom$lo, _props$fixedBottom;
       return {
-        loading: !!refScrollLoading.value,
+        loading: !!refScrollLoading.value || ((_props$fixedBottom$lo = (_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.loading) !== null && _props$fixedBottom$lo !== void 0 ? _props$fixedBottom$lo : false),
         inline: true,
         title: '',
         size: loading_namespaceObject.BkLoadingSize.Normal,
@@ -21028,7 +21104,8 @@ const loading_less_namespaceObject = loading_less_x({  });
     return refScrollLoading.value;
   };
   var isRender = (0,external_vue_namespaceObject.computed)(function () {
-    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object');
+    var _props$fixedBottom$lo2, _props$fixedBottom2;
+    return refScrollLoading.value !== null && (typeof refScrollLoading.value === 'boolean' && refScrollLoading.value || typeof_typeof(refScrollLoading.value) === 'object') || ((_props$fixedBottom$lo2 = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.loading) !== null && _props$fixedBottom$lo2 !== void 0 ? _props$fixedBottom$lo2 : false);
   });
   var renderScrollLoading = function renderScrollLoading() {
     var _ctx$slots$fixedBotto3, _ctx$slots$fixedBotto4, _ctx$slots2;
@@ -21114,8 +21191,12 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var lineHeight = (0,external_vue_namespaceObject.ref)((_props$rowHeight = props.rowHeight) !== null && _props$rowHeight !== void 0 ? _props$rowHeight : LINE_HEIGHT);
   var headerRowCount = (0,external_vue_namespaceObject.ref)(1);
   var fixedBottomHeight = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2, _props$fixedBottom$he2, _props$fixedBottom3;
-    return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : (_props$fixedBottom$he2 = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : 0;
+    var _ctx$slots;
+    if ((_ctx$slots = ctx.slots) !== null && _ctx$slots !== void 0 && _ctx$slots.fixedBottom) {
+      var _props$fixedBottom, _props$fixedBottom$he, _props$fixedBottom2;
+      return ((_props$fixedBottom = props.fixedBottom) === null || _props$fixedBottom === void 0 ? void 0 : _props$fixedBottom.position) === 'relative' ? (_props$fixedBottom$he = (_props$fixedBottom2 = props.fixedBottom) === null || _props$fixedBottom2 === void 0 ? void 0 : _props$fixedBottom2.height) !== null && _props$fixedBottom$he !== void 0 ? _props$fixedBottom$he : LINE_HEIGHT : 0;
+    }
+    return 0;
   });
   var _usePrefix = (0,config_provider_namespaceObject.usePrefix)(),
     resolveClassName = _usePrefix.resolveClassName;
@@ -21190,14 +21271,14 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     return (0,shared_namespaceObject.classes)(defineProperty_defineProperty(defineProperty_defineProperty({}, resolveClassName('table-footer'), true), 'is-hidden', footHeight.value === 0));
   });
   var renderContainer = function renderContainer(childrend) {
-    var _ctx$slots$default, _ctx$slots;
+    var _ctx$slots$default, _ctx$slots2;
     return (0,external_vue_namespaceObject.createVNode)("div", {
       "ref": refRoot,
       "style": tableStyle.value,
       "class": tableClass.value
     }, [childrend, (0,external_vue_namespaceObject.createVNode)(ghost_body, null, {
       "default": function _default() {
-        return [(_ctx$slots$default = (_ctx$slots = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots)];
+        return [(_ctx$slots$default = (_ctx$slots2 = ctx.slots)["default"]) === null || _ctx$slots$default === void 0 ? void 0 : _ctx$slots$default.call(_ctx$slots2)];
       }
     })]);
   };
@@ -21240,6 +21321,9 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var setBodyHeight = function setBodyHeight(height) {
     bodyHeight.value = height - headHeight.value - fixedBottomHeight.value - footHeight.value;
   };
+  var setVirtualBodyHeight = function setVirtualBodyHeight(height) {
+    bodyHeight.value = height;
+  };
   var footHeight = (0,external_vue_namespaceObject.ref)(0);
   var footerStyle = (0,external_vue_namespaceObject.computed)(function () {
     return {
@@ -21299,11 +21383,11 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
   var fixedWrapperClass = resolveClassName('table-fixed');
   var fixedBottomRow = resolveClassName('table-fixed-bottom');
   var fixedBottomLoadingStyle = (0,external_vue_namespaceObject.computed)(function () {
-    var _props$fixedBottom$po, _props$fixedBottom4, _props$fixedBottom$he3, _props$fixedBottom5;
+    var _props$fixedBottom$po, _props$fixedBottom3, _props$fixedBottom$he2, _props$fixedBottom4;
     return {
       minHeight: "".concat(lineHeight.value, "px"),
-      position: (_props$fixedBottom$po = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
-      height: (_props$fixedBottom$he3 = (_props$fixedBottom5 = props.fixedBottom) === null || _props$fixedBottom5 === void 0 ? void 0 : _props$fixedBottom5.height) !== null && _props$fixedBottom$he3 !== void 0 ? _props$fixedBottom$he3 : null
+      position: (_props$fixedBottom$po = (_props$fixedBottom3 = props.fixedBottom) === null || _props$fixedBottom3 === void 0 ? void 0 : _props$fixedBottom3.position) !== null && _props$fixedBottom$po !== void 0 ? _props$fixedBottom$po : 'absolute',
+      height: (_props$fixedBottom$he2 = (_props$fixedBottom4 = props.fixedBottom) === null || _props$fixedBottom4 === void 0 ? void 0 : _props$fixedBottom4.height) !== null && _props$fixedBottom$he2 !== void 0 ? _props$fixedBottom$he2 : null
     };
   });
   (0,external_vue_namespaceObject.onMounted)(function () {
@@ -21375,6 +21459,7 @@ function use_layout_objectSpread(e) { for (var r = 1; r < arguments.length; r++)
     renderFooter: renderFooter,
     renderFixedBottom: renderFixedBottom,
     setBodyHeight: setBodyHeight,
+    setVirtualBodyHeight: setVirtualBodyHeight,
     setFootHeight: setFootHeight,
     setTranslateX: setTranslateX,
     setDragOffsetX: setDragOffsetX,
@@ -21672,6 +21757,7 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
     parentSetting: IOverflowTooltipPropType,
     title: shared_namespaceObject.PropTypes.string.def(undefined),
     observerResize: shared_namespaceObject.PropTypes.bool.def(true),
+    intersectionObserver: shared_namespaceObject.PropTypes.bool.def(false),
     isHead: shared_namespaceObject.PropTypes.bool.def(false),
     isExpandChild: shared_namespaceObject.PropTypes.bool.def(false),
     headExplain: shared_namespaceObject.PropTypes.string,
@@ -21684,6 +21770,7 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
     var slots = _ref.slots;
     var refRoot = (0,external_vue_namespaceObject.ref)();
     var isTipsEnabled = (0,external_vue_namespaceObject.ref)(false);
+    var renderSlots = (0,external_vue_namespaceObject.ref)(!props.intersectionObserver);
     var cellStyle = (0,external_vue_namespaceObject.computed)(function () {
       return {
         textAlign: props.column.textAlign,
@@ -21846,7 +21933,8 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         bkEllipsisIns = null;
       }
     };
-    (0,external_vue_namespaceObject.onMounted)(function () {
+    var resizeObserverIns = null;
+    var onComponentRender = function onComponentRender() {
       var _resolveTooltipOption2 = resolveTooltipOption(),
         disabled = _resolveTooltipOption2.disabled,
         resizerWay = _resolveTooltipOption2.resizerWay,
@@ -21854,20 +21942,47 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
       if (!disabled) {
         resolveOverflowTooltip();
         if (watchCellResize !== false && props.observerResize) {
-          var observerIns = observerResize(refRoot.value, function () {
+          resizeObserverIns = observerResize(refRoot.value, function () {
             resolveOverflowTooltip();
           }, 60, true, resizerWay);
-          observerIns.start();
-          (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
-            observerIns.disconnect();
-            observerIns = null;
-          });
+          resizeObserverIns.start();
+        }
+      }
+    };
+    var intersectionObserver = null;
+    var initObserver = function initObserver() {
+      var _intersectionObserver;
+      if (!props.intersectionObserver) {
+        return;
+      }
+      intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].intersectionRatio <= 0) {
+          var _bkEllipsisIns2;
+          renderSlots.value = false;
+          (_bkEllipsisIns2 = bkEllipsisIns) === null || _bkEllipsisIns2 === void 0 || _bkEllipsisIns2.destroyInstance(refRoot.value);
+          return;
         }
+        renderSlots.value = true;
+        onComponentRender();
+      }, {
+        threshold: 0.5
+      });
+      (_intersectionObserver = intersectionObserver) === null || _intersectionObserver === void 0 || _intersectionObserver.observe(refRoot.value);
+    };
+    (0,external_vue_namespaceObject.onMounted)(function () {
+      initObserver();
+      if (!renderSlots.value) {
+        return;
       }
+      onComponentRender();
     });
     (0,external_vue_namespaceObject.onBeforeUnmount)(function () {
-      var _bkEllipsisIns2;
-      (_bkEllipsisIns2 = bkEllipsisIns) === null || _bkEllipsisIns2 === void 0 || _bkEllipsisIns2.destroyInstance(refRoot.value);
+      var _resizeObserverIns, _bkEllipsisIns3, _intersectionObserver2;
+      (_resizeObserverIns = resizeObserverIns) === null || _resizeObserverIns === void 0 || _resizeObserverIns.disconnect();
+      resizeObserverIns = null;
+      (_bkEllipsisIns3 = bkEllipsisIns) === null || _bkEllipsisIns3 === void 0 || _bkEllipsisIns3.destroyInstance(refRoot.value);
+      (_intersectionObserver2 = intersectionObserver) === null || _intersectionObserver2 === void 0 || _intersectionObserver2.disconnect();
+      intersectionObserver = null;
     });
     var hasExplain = props.headExplain || props.column.explain;
     return function () {
@@ -21876,7 +21991,7 @@ const directives_namespaceObject = directives_x({ ["bkEllipsisInstance"]: () =>
         "ref": refRoot,
         "style": cellStyle.value,
         "class": ['cell', props.column.type, hasExplain ? 'explain' : '']
-      }, [(_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots)]);
+      }, [renderSlots.value ? (_slots$default = slots["default"]) === null || _slots$default === void 0 ? void 0 : _slots$default.call(slots) : '--']);
     };
   }
 }));
@@ -22913,7 +23028,7 @@ function use_head_isSlot(s) {
       "onClick": function onClick() {
         return handleColumnHeadClick();
       }
-    }, columns.resolveEventListener(column)), [renderHeadCell()]);
+    }, columns.resolveEventListener(column, index)), [renderHeadCell()]);
   };
   return {
     getTH: getTH
@@ -23129,6 +23244,22 @@ function use_render_isSlot(s) {
     }, [renderColgroup(), renderHeader()]);
   };
   /** **************************************** Rows Render ******************************* **/
+  var renderAppendLastRow = function renderAppendLastRow() {
+    if (ctx.slots.appendLastRow) {
+      var rowId = 'append-last-row';
+      return (0,external_vue_namespaceObject.createVNode)(table_row, {
+        "key": rowId
+      }, {
+        "default": function _default() {
+          return [(0,external_vue_namespaceObject.createVNode)("tr", {
+            "key": rowId
+          }, [(0,external_vue_namespaceObject.createVNode)("td", {
+            "colspan": columns.visibleColumns.length
+          }, [ctx.slots.appendLastRow()])])];
+        }
+      });
+    }
+  };
   /**
    * 渲染Table Body
    * @returns
@@ -23141,7 +23272,7 @@ function use_render_isSlot(s) {
       var result = getRowRender(row, rowIndex, preRow, dataList, rowSpanMap, needRowSpan);
       preRow = row;
       return result;
-    })]);
+    }), renderAppendLastRow()]);
   };
   var getRowHeight = function getRowHeight(row, rowIndex) {
     if (typeof props.rowHeight === 'function' || /^\d+/.test("".concat(props.rowHeight))) {
@@ -23343,6 +23474,7 @@ function use_render_isSlot(s) {
               "class": tdCtxClass,
               "column": column,
               "data-id": cellKey,
+              "intersectionObserver": props.intersectionObserver,
               "isExpandChild": isChild,
               "observerResize": props.observerResize,
               "parentSetting": props.showOverflowTooltip,
@@ -23666,9 +23798,33 @@ var useRows = function useRows(props) {
   var setRowExpand = function setRowExpand(row, isExpand) {
     setRowAttribute(row, TABLE_ROW_ATTRIBUTE.ROW_EXPAND, isExpand);
   };
+  /**
+   * 分批渲染数据
+   * @param rowList
+   * @returns
+   */
+  var batchPushRowList = function batchPushRowList(rowList) {
+    var startIndex = 0;
+    var size = 50;
+    var batchPushItem = function batchPushItem() {
+      var endIndex = startIndex + size;
+      pageRowList.push.apply(pageRowList, _toConsumableArray(rowList.slice(startIndex, endIndex)));
+      if (endIndex < rowList.length) {
+        startIndex = endIndex;
+        setTimeout(function () {
+          batchPushItem();
+        });
+      }
+    };
+    if (rowList.length > size) {
+      batchPushItem();
+      return;
+    }
+    pageRowList.push.apply(pageRowList, _toConsumableArray(rowList));
+  };
   var setPageRowList = function setPageRowList(rowList) {
     pageRowList.length = 0;
-    pageRowList.push.apply(pageRowList, _toConsumableArray(rowList));
+    batchPushRowList(rowList);
   };
   var clearSelection = function clearSelection() {
     tableRowList.value.forEach(function (row) {

package/lib/table/props.d.ts

@@ -61,7 +61,7 @@ export type ISortOption = {
 };
 export declare const ISortType: import("vue-types").VueTypeDef<ISortPropShape>;
 export type ISortShape = {
-    sortFn?: (...args: any[]) => boolean;
+    sortFn?: (...args: any[]) => number;
     sortScope?: SortScope;
     value?: SORT_OPTION;
 };
@@ -558,6 +558,14 @@ export declare const tableProps: {
     } & {
         default: boolean;
     };
+    /**
+     * 是否使用IntersectionObserver监听表格Cell进如有可视区域再渲染
+     */
+    intersectionObserver: import("vue-types").VueTypeValidableDef<boolean> & {
+        default: boolean;
+    } & {
+        default: boolean;
+    };
     align: import("vue-types").VueTypeDef<"" | "left" | "right" | "center">;
     headerAlign: import("vue-types").VueTypeDef<"" | "left" | "right" | "center">;
     /**