vxe-table 4.11.15 → 4.12.0-beta.0

package/lib/table/src/table.js

@@ -40,6 +40,8 @@ const {
   renderEmptyElement
 } = _ui.VxeUI;
 const customStorageKey = 'VXE_CUSTOM_STORE';
+const maxYHeight = 5e6;
+const maxXWidth = 5e6;
 var _default = exports.default = (0, _vue.defineComponent)({
   name: 'VxeTable',
   props: _props.default,
@@ -931,33 +933,48 @@ var _default = exports.default = (0, _vue.defineComponent)({
       return reserveList;
     };
     const handleVirtualXVisible = () => {
+      const {
+        isScrollXBig,
+        scrollXWidth
+      } = reactData;
       const {
         elemStore,
-        visibleColumn
+        visibleColumn,
+        fullColumnIdData
       } = internalData;
       const leftFixedWidth = computeLeftFixedWidth.value;
       const rightFixedWidth = computeRightFixedWidth.value;
       const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
-        const {
-          scrollLeft,
-          clientWidth
-        } = bodyScrollElem;
-        const startWidth = scrollLeft + leftFixedWidth;
-        const endWidth = scrollLeft + clientWidth - rightFixedWidth;
-        let toVisibleIndex = -1;
-        let cWidth = 0;
-        let visibleSize = 0;
-        for (let colIndex = 0, colLen = visibleColumn.length; colIndex < colLen; colIndex++) {
-          cWidth += visibleColumn[colIndex].renderWidth;
-          if (toVisibleIndex === -1 && startWidth < cWidth) {
-            toVisibleIndex = colIndex;
+        const clientWidth = bodyScrollElem.clientWidth;
+        let scrollLeft = bodyScrollElem.scrollLeft;
+        if (isScrollXBig) {
+          scrollLeft = Math.ceil((scrollXWidth - clientWidth) * Math.min(1, scrollLeft / (maxXWidth - clientWidth)));
+        }
+        const startLeft = scrollLeft + leftFixedWidth;
+        const endLeft = scrollLeft + clientWidth - rightFixedWidth;
+        let leftIndex = 0;
+        let rightIndex = visibleColumn.length;
+        while (leftIndex < rightIndex) {
+          const cIndex = Math.floor((leftIndex + rightIndex) / 2);
+          const column = visibleColumn[cIndex];
+          const colid = column.id;
+          const colRest = fullColumnIdData[colid] || {};
+          if (colRest.oLeft <= startLeft) {
+            leftIndex = cIndex + 1;
+          } else {
+            rightIndex = cIndex;
           }
-          if (toVisibleIndex >= 0) {
-            visibleSize++;
-            if (cWidth > endWidth) {
-              break;
-            }
+        }
+        let visibleSize = 0;
+        const toVisibleIndex = Math.max(0, leftIndex < visibleColumn.length ? leftIndex - 2 : 0);
+        for (let cIndex = toVisibleIndex, cLen = visibleColumn.length; cIndex < cLen; cIndex++) {
+          const column = visibleColumn[cIndex];
+          const colid = column.id;
+          const colRest = fullColumnIdData[colid] || {};
+          visibleSize++;
+          if (colRest.oLeft > endLeft || visibleSize >= 60) {
+            break;
           }
         }
         return {
@@ -1008,11 +1025,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
       // 最低支持 18px 行高
       return Math.max(18, rowHeight);
     };
-    const handleVirtualYVisible = currScrollTop => {
+    const handleVirtualYVisible = () => {
       const {
         isAllOverflow,
         expandColumn,
-        rowExpandedMaps
+        isScrollYBig,
+        scrollYHeight
       } = reactData;
       const {
         elemStore,
@@ -1020,40 +1038,46 @@ var _default = exports.default = (0, _vue.defineComponent)({
         afterFullData,
         fullAllDataRowIdData
       } = internalData;
-      const expandOpts = computeExpandOpts.value;
       const rowOpts = computeRowOpts.value;
       const cellOpts = computeCellOpts.value;
       const defaultRowHeight = computeDefaultRowHeight.value;
       const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
         const clientHeight = bodyScrollElem.clientHeight;
-        const scrollTop = _xeUtils.default.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
-        const endHeight = scrollTop + clientHeight;
+        let scrollTop = bodyScrollElem.scrollTop;
+        if (isScrollYBig) {
+          scrollTop = Math.ceil((scrollYHeight - clientHeight) * Math.min(1, scrollTop / (maxYHeight - clientHeight)));
+        }
+        const startTop = scrollTop;
+        const endTop = scrollTop + clientHeight;
         let toVisibleIndex = -1;
-        let offsetTop = 0;
         let visibleSize = 0;
         const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
         if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-          toVisibleIndex = Math.floor(scrollTop / defaultRowHeight);
+          toVisibleIndex = Math.floor(startTop / defaultRowHeight) - 1;
           visibleSize = Math.ceil(clientHeight / defaultRowHeight) + 1;
         } else {
-          for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+          let leftIndex = 0;
+          let rightIndex = afterFullData.length;
+          while (leftIndex < rightIndex) {
+            const rIndex = Math.floor((leftIndex + rightIndex) / 2);
             const row = afterFullData[rIndex];
             const rowid = (0, _util.getRowid)($xeTable, row);
             const rowRest = fullAllDataRowIdData[rowid] || {};
-            offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
-            if (toVisibleIndex === -1 && scrollTop < offsetTop) {
-              toVisibleIndex = rIndex;
-            }
-            if (toVisibleIndex >= 0) {
-              visibleSize++;
-              if (offsetTop > endHeight) {
-                break;
-              }
+            if (rowRest.oTop <= startTop) {
+              leftIndex = rIndex + 1;
+            } else {
+              rightIndex = rIndex;
             }
-            // 是否展开行
-            if (expandColumn && rowExpandedMaps[rowid]) {
-              offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+          }
+          toVisibleIndex = Math.max(0, leftIndex < afterFullData.length ? leftIndex - 2 : 0);
+          for (let rIndex = toVisibleIndex, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+            const row = afterFullData[rIndex];
+            const rowid = (0, _util.getRowid)($xeTable, row);
+            const rowRest = fullAllDataRowIdData[rowid] || {};
+            visibleSize++;
+            if (rowRest.oTop > endTop || visibleSize >= 100) {
+              break;
             }
           }
         }
@@ -1496,7 +1520,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (!xHandleEl) {
         return;
       }
-      let tableWidth = 0;
+      let tWidth = 0;
       const minCellWidth = 40; // 列宽最少限制 40px
       const bodyWidth = bodyElem.clientWidth;
       let remainWidth = bodyWidth;
@@ -1520,51 +1544,51 @@ var _default = exports.default = (0, _vue.defineComponent)({
       // 最小宽
       pxMinList.forEach(column => {
         const minWidth = _xeUtils.default.toInteger(column.minWidth);
-        tableWidth += minWidth;
+        tWidth += minWidth;
         column.renderWidth = minWidth;
       });
       // 最小自适应
       autoMinList.forEach(column => {
         const caWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-        tableWidth += caWidth;
+        tWidth += caWidth;
         column.renderWidth = caWidth;
       });
       // 最小百分比
       scaleMinList.forEach(column => {
         const smWidth = Math.floor(_xeUtils.default.toInteger(column.minWidth) * meanWidth);
-        tableWidth += smWidth;
+        tWidth += smWidth;
         column.renderWidth = smWidth;
       });
       // 固定百分比
       scaleList.forEach(column => {
         const sfWidth = Math.floor(_xeUtils.default.toInteger(column.width) * meanWidth);
-        tableWidth += sfWidth;
+        tWidth += sfWidth;
         column.renderWidth = sfWidth;
       });
       // 固定宽
       pxList.forEach(column => {
         const pWidth = _xeUtils.default.toInteger(column.width);
-        tableWidth += pWidth;
+        tWidth += pWidth;
         column.renderWidth = pWidth;
       });
       // 自适应宽
       autoList.forEach(column => {
         const aWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-        tableWidth += aWidth;
+        tWidth += aWidth;
         column.renderWidth = aWidth;
       });
       // 调整了列宽
       resizeList.forEach(column => {
         const reWidth = _xeUtils.default.toInteger(column.resizeWidth);
-        tableWidth += reWidth;
+        tWidth += reWidth;
         column.renderWidth = reWidth;
       });
-      remainWidth -= tableWidth;
+      remainWidth -= tWidth;
       meanWidth = remainWidth > 0 ? Math.floor(remainWidth / (scaleMinList.length + pxMinList.length + autoMinList.length + remainList.length)) : 0;
       if (fit) {
         if (remainWidth > 0) {
           scaleMinList.concat(pxMinList).concat(autoMinList).forEach(column => {
-            tableWidth += meanWidth;
+            tWidth += meanWidth;
             column.renderWidth += meanWidth;
           });
         }
@@ -1575,7 +1599,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       remainList.forEach(column => {
         const width = Math.max(meanWidth, minCellWidth);
         column.renderWidth = width;
-        tableWidth += width;
+        tWidth += width;
       });
       if (fit) {
         /**
@@ -1585,13 +1609,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const dynamicList = scaleList.concat(scaleMinList).concat(pxMinList).concat(autoMinList).concat(remainList);
         let dynamicSize = dynamicList.length - 1;
         if (dynamicSize > 0) {
-          let i = bodyWidth - tableWidth;
+          let i = bodyWidth - tWidth;
           if (i > 0) {
             while (i > 0 && dynamicSize >= 0) {
               i--;
               dynamicList[dynamicSize--].renderWidth++;
             }
-            tableWidth = bodyWidth;
+            tWidth = bodyWidth;
           }
         }
       }
@@ -1599,17 +1623,18 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const overflowY = yHandleEl.scrollHeight > yHandleEl.clientHeight;
       reactData.scrollbarWidth = Math.max(scrollbarOpts.width || 0, yHandleEl.offsetWidth - yHandleEl.clientWidth);
       reactData.overflowY = overflowY;
-      internalData.tableWidth = tableWidth;
+      reactData.scrollXWidth = tWidth;
       internalData.tableHeight = tableHeight;
       const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
       const footerTableElem = (0, _util.getRefElem)(elemStore['main-footer-table']);
       const headerHeight = headerTableElem ? headerTableElem.clientHeight : 0;
-      const overflowX = tableWidth > bodyWidth;
+      const overflowX = tWidth > bodyWidth;
       const footerHeight = footerTableElem ? footerTableElem.clientHeight : 0;
       reactData.scrollbarHeight = Math.max(scrollbarOpts.height || 0, xHandleEl.offsetHeight - xHandleEl.clientHeight);
       internalData.headerHeight = headerHeight;
       internalData.footerHeight = footerHeight;
       reactData.overflowX = overflowX;
+      updateColumnOffsetLeft();
       updateHeight();
       reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
       if (overflowX) {
@@ -2060,6 +2085,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         scrollbarWidth,
         overflowY,
         scrollbarHeight,
+        scrollXWidth,
         columnStore,
         editStore,
         isAllOverflow,
@@ -2069,7 +2095,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         visibleColumn,
         fullColumnIdData,
         tableHeight,
-        tableWidth,
         headerHeight,
         footerHeight,
         elemStore,
@@ -2114,9 +2139,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
         bodyHeight = Math.max(bodyMinHeight, bodyHeight);
       }
+      const scrollbarXToTop = computeScrollbarXToTop.value;
       const xLeftCornerEl = refScrollXLeftCornerElem.value;
       const xRightCornerEl = refScrollXRightCornerElem.value;
-      const scrollbarXToTop = computeScrollbarXToTop.value;
       const scrollXVirtualEl = refScrollXVirtualElem.value;
       if (scrollXVirtualEl) {
         scrollXVirtualEl.style.height = `${osbHeight}px`;
@@ -2204,7 +2229,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (fixedType) {
               if (isGroup) {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                 }
               } else {
                 if (isOptimizeMode) {
@@ -2213,7 +2238,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                   }
                 } else {
                   if (wrapperElem) {
-                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                    wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                   }
                 }
               }
@@ -2292,7 +2317,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 }
               } else {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                 }
               }
             }
@@ -2330,7 +2355,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
                 }
               } else {
                 if (wrapperElem) {
-                  wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                  wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                 }
               }
             }
@@ -3054,6 +3079,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
       calcCellWidth();
       autoCellWidth();
       updateStyle();
+      if (reFull) {
+        updateRowOffsetTop();
+      }
       updateRowExpandStyle();
       return computeScrollLoad().then(() => {
         if (reFull === true) {
@@ -3061,6 +3089,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           calcCellWidth();
           autoCellWidth();
           updateStyle();
+          if (reFull) {
+            updateRowOffsetTop();
+          }
           updateRowExpandStyle();
           return computeScrollLoad();
         }
@@ -3209,6 +3240,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             }
             reactData.isRowLoading = false;
             calcCellHeight();
+            updateRowOffsetTop();
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               (0, _util.restoreScrollLocation)($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -3274,7 +3306,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const loadScrollXData = () => {
       const {
         mergeList,
-        mergeFooterList
+        mergeFooterList,
+        isScrollXBig
       } = reactData;
       const {
         scrollXStore
@@ -3290,11 +3323,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
         visibleSize
       } = handleVirtualXVisible();
       const offsetItem = {
-        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
-        endIndex: toVisibleIndex + visibleSize + offsetSize + preloadSize
+        startIndex: Math.max(0, isScrollXBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+        endIndex: isScrollXBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + offsetSize + preloadSize
       };
-      scrollXStore.visibleStartIndex = toVisibleIndex;
-      scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize;
+      scrollXStore.visibleStartIndex = toVisibleIndex - 1;
+      scrollXStore.visibleEndIndex = toVisibleIndex + visibleSize + 1;
       calculateMergerOffsetIndex(mergeList.concat(mergeFooterList), offsetItem, 'col');
       const {
         startIndex: offsetStartIndex,
@@ -3448,6 +3481,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       internalData.visibleColumn = visibleColumn;
       handleTableColumn();
       if (isReset) {
+        updateColumnOffsetLeft();
         return $xeTable.updateFooter().then(() => {
           return $xeTable.recalculate();
         }).then(() => {
@@ -3643,10 +3677,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = scrollTop => {
+    const loadScrollYData = () => {
       const {
         mergeList,
-        isAllOverflow
+        isAllOverflow,
+        isScrollYBig
       } = reactData;
       const {
         scrollYStore
@@ -3661,13 +3696,13 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const {
         toVisibleIndex,
         visibleSize
-      } = handleVirtualYVisible(scrollTop);
+      } = handleVirtualYVisible();
       const offsetItem = {
-        startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
-        endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
+        startIndex: Math.max(0, isScrollYBig ? toVisibleIndex - 1 : toVisibleIndex - 1 - offsetSize - preloadSize),
+        endIndex: isScrollYBig ? toVisibleIndex + visibleSize : toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
       };
-      scrollYStore.visibleStartIndex = toVisibleIndex;
-      scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize;
+      scrollYStore.visibleStartIndex = toVisibleIndex - 1;
+      scrollYStore.visibleEndIndex = toVisibleIndex + visibleSize + 1;
       calculateMergerOffsetIndex(mergeList, offsetItem, 'row');
       const {
         startIndex: offsetStartIndex,
@@ -3787,6 +3822,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             $xeTable.updateScrollYSpace();
           });
         }
+        updateRowExpandStyle();
         $xeTable.updateCellAreas();
       }, 200);
     };
@@ -3873,11 +3909,52 @@ var _default = exports.default = (0, _vue.defineComponent)({
         setTimeout(() => $xeTable.recalculate(true), 300);
       });
     };
+    const updateColumnOffsetLeft = () => {
+      const {
+        visibleColumn,
+        fullColumnIdData
+      } = internalData;
+      let offsetLeft = 0;
+      for (let cIndex = 0, rLen = visibleColumn.length; cIndex < rLen; cIndex++) {
+        const column = visibleColumn[cIndex];
+        const colid = column.id;
+        const colRest = fullColumnIdData[colid];
+        colRest.oLeft = offsetLeft;
+        offsetLeft += column.renderWidth;
+      }
+    };
+    const updateRowOffsetTop = () => {
+      const {
+        expandColumn,
+        rowExpandedMaps
+      } = reactData;
+      const {
+        afterFullData,
+        fullAllDataRowIdData
+      } = internalData;
+      const expandOpts = computeExpandOpts.value;
+      const rowOpts = computeRowOpts.value;
+      const cellOpts = computeCellOpts.value;
+      const defaultRowHeight = computeDefaultRowHeight.value;
+      let offsetTop = 0;
+      for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
+        const row = afterFullData[rIndex];
+        const rowid = (0, _util.getRowid)($xeTable, row);
+        const rowRest = fullAllDataRowIdData[rowid] || {};
+        rowRest.oTop = offsetTop;
+        offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
+        // 是否展开行
+        if (expandColumn && rowExpandedMaps[rowid]) {
+          offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+        }
+      }
+    };
     const updateRowExpandStyle = () => {
       const {
         expandColumn,
         scrollYLoad,
-        rowExpandedMaps
+        scrollYTop,
+        isScrollYBig
       } = reactData;
       const expandOpts = computeExpandOpts.value;
       const rowOpts = computeRowOpts.value;
@@ -3889,41 +3966,35 @@ var _default = exports.default = (0, _vue.defineComponent)({
       if (expandColumn && mode === 'fixed') {
         const {
           elemStore,
-          afterFullData,
           fullAllDataRowIdData
         } = internalData;
         const rowExpandEl = refRowExpandElem.value;
         const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         if (rowExpandEl && bodyScrollElem) {
           let isUpdateHeight = false;
-          if (scrollYLoad) {
-            let offsetTop = 0;
-            for (let rIndex = 0, rLen = afterFullData.length; rIndex < rLen; rIndex++) {
-              const row = afterFullData[rIndex];
-              const rowid = (0, _util.getRowid)($xeTable, row);
-              const rowRest = fullAllDataRowIdData[rowid] || {};
-              rowRest.oTop = offsetTop;
-              offsetTop += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
-              // 是否展开行
-              if (expandColumn && rowExpandedMaps[rowid]) {
-                offsetTop += rowRest.expandHeight || expandOpts.height || 0;
-              }
-            }
-          }
           _xeUtils.default.arrayEach(rowExpandEl.children, reEl => {
             const expandEl = reEl;
             const rowid = expandEl.getAttribute('rowid') || '';
             const rowRest = fullAllDataRowIdData[rowid];
             if (rowRest) {
               const expandHeight = expandEl.offsetHeight + 1;
+              const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`);
+              let offsetTop = 0;
               if (scrollYLoad) {
-                expandEl.style.top = (0, _dom.toCssUnit)(rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight));
+                if (isScrollYBig && trEl) {
+                  offsetTop = trEl.offsetTop + trEl.offsetHeight;
+                } else {
+                  offsetTop = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
+                }
               } else {
-                const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`);
                 if (trEl) {
-                  expandEl.style.top = (0, _dom.toCssUnit)(trEl.offsetTop + trEl.offsetHeight);
+                  offsetTop = trEl.offsetTop + trEl.offsetHeight;
                 }
               }
+              if (isScrollYBig) {
+                offsetTop += scrollYTop;
+              }
+              expandEl.style.top = (0, _dom.toCssUnit)(offsetTop);
               if (!isUpdateHeight) {
                 if (rowRest.expandHeight !== expandHeight) {
                   isUpdateHeight = true;
@@ -3934,6 +4005,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
           });
           if (isUpdateHeight) {
             reactData.rowExpandHeightFlag++;
+            (0, _vue.nextTick)(() => {
+              updateRowOffsetTop();
+            });
           }
         }
       }
@@ -4971,6 +5045,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
         return (0, _vue.nextTick)().then(() => {
+          updateRowOffsetTop();
           return {
             status
           };
@@ -5994,11 +6069,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
         reactData.rowExpandedMaps = rExpandedMaps;
-        return Promise.all(lazyRests).then(() => $xeTable.recalculate()).then(() => {
-          if (expandColumn) {
-            updateRowExpandStyle();
-            handleRowExpandScroll();
-          }
+        return Promise.all(lazyRests).then(() => (0, _vue.nextTick)()).then(() => $xeTable.recalculate(true)).then(() => {
+          updateRowOffsetTop();
+          updateRowExpandStyle();
+          handleRowExpandScroll();
           return $xeTable.updateCellAreas();
         });
       },
@@ -6031,16 +6105,21 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const {
           reserve
         } = expandOpts;
-        const expList = tableMethods.getRowExpandRecords();
+        const expList = $xeTable.getRowExpandRecords();
         reactData.rowExpandedMaps = {};
         if (reserve) {
           tableFullData.forEach(row => handleRowExpandReserve(row, false));
         }
         return (0, _vue.nextTick)().then(() => {
           if (expList.length) {
-            tableMethods.recalculate();
+            return $xeTable.recalculate(true);
           }
-        }).then(() => $xeTable.updateCellAreas());
+        }).then(() => {
+          updateRowOffsetTop();
+          updateRowExpandStyle();
+          handleRowExpandScroll();
+          return $xeTable.updateCellAreas();
+        });
       },
       clearRowExpandReserve() {
         internalData.rowExpandedReserveRowMap = {};
@@ -7384,8 +7463,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const wrapperRect = el.getBoundingClientRect();
       const osbWidth = overflowY ? scrollbarWidth : 0;
       const osbHeight = overflowX ? scrollbarHeight : 0;
-      const tableWidth = el.clientWidth;
-      const tableHeight = el.clientHeight;
+      const tableWrapperWidth = el.clientWidth;
+      const tableWrapperHeight = el.clientHeight;
       if (trEl) {
         const rdLineEl = refDragRowLineElem.value;
         if (rdLineEl) {
@@ -7394,14 +7473,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
             const trRect = trEl.getBoundingClientRect();
             let trHeight = trEl.clientHeight;
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
-            if (offsetTop + trHeight > tableHeight - osbHeight) {
-              trHeight = tableHeight - offsetTop - osbHeight;
+            if (offsetTop + trHeight > tableWrapperHeight - osbHeight) {
+              trHeight = tableWrapperHeight - offsetTop - osbHeight;
             }
             rdLineEl.style.display = 'block';
             rdLineEl.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
             rdLineEl.style.top = `${offsetTop}px`;
             rdLineEl.style.height = `${trHeight}px`;
-            rdLineEl.style.width = `${tableWidth - osbWidth}px`;
+            rdLineEl.style.width = `${tableWrapperWidth - osbWidth}px`;
             rdLineEl.setAttribute('drag-pos', dragPos);
             rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
           } else {
@@ -7426,7 +7505,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               thWidth -= startX - offsetLeft;
               offsetLeft = startX;
             }
-            const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth);
+            const endX = tableWrapperWidth - rightContainerWidth - (rightContainerWidth ? 0 : osbWidth);
             if (offsetLeft + thWidth > endX) {
               thWidth = endX - offsetLeft;
             }
@@ -7437,7 +7516,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`;
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
+              cdLineEl.style.height = `${tableWrapperHeight - offsetTop - (scrollbarXToTop ? 0 : osbHeight)}px`;
             }
             cdLineEl.setAttribute('drag-pos', dragPos);
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -7898,7 +7977,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - osbHeight : tableHeight}px`;
           if (resizableOpts.showDragTip && resizeTipElem) {
             resizeTipElem.textContent = getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
-            const tableWidth = tableEl.clientWidth;
+            const tableWrapperWidth = tableEl.clientWidth;
             const wrapperRect = wrapperElem.getBoundingClientRect();
             const resizeBarWidth = resizeBarElem.clientWidth;
             const resizeTipWidth = resizeTipElem.clientWidth;
@@ -7906,8 +7985,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
             let resizeTipLeft = -resizeTipWidth;
             if (resizeBarLeft < resizeTipWidth + resizeBarWidth) {
               resizeTipLeft = 0;
-            } else if (resizeBarLeft > tableWidth) {
-              resizeTipLeft += tableWidth - resizeBarLeft;
+            } else if (resizeBarLeft > tableWrapperWidth) {
+              resizeTipLeft += tableWrapperWidth - resizeBarLeft;
             }
             resizeTipElem.style.left = `${resizeTipLeft}px`;
             resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
@@ -8063,7 +8142,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const updateEvent = evnt => {
           evnt.stopPropagation();
           evnt.preventDefault();
-          const tableWidth = tableEl.clientWidth - osbWidth;
+          const rtWidth = tableEl.clientWidth - osbWidth;
           const tableHeight = tableEl.clientHeight - osbHeight;
           let dragTop = evnt.clientY - tableRect.y - targetOffsetY;
           if (dragTop < minTop) {
@@ -8073,15 +8152,15 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
           resizeBarElem.style.left = `${scrollbarYToLeft ? osbWidth : 0}px`;
           resizeBarElem.style.top = `${dragTop}px`;
-          resizeBarElem.style.width = `${tableWidth}px`;
+          resizeBarElem.style.width = `${rtWidth}px`;
           if (resizableOpts.showDragTip && resizeTipElem) {
             resizeTipElem.textContent = getI18n('vxe.table.resizeRowTip', [resizeHeight]);
             const resizeTipWidth = resizeTipElem.clientWidth;
             const resizeTipHeight = resizeTipElem.clientHeight;
             let resizeBarLeft = Math.max(2, evnt.clientX - tableRect.x);
             let resizeBarTop = 0;
-            if (resizeBarLeft + resizeTipWidth >= tableWidth - 2) {
-              resizeBarLeft = tableWidth - resizeTipWidth - 2;
+            if (resizeBarLeft + resizeTipWidth >= rtWidth - 2) {
+              resizeBarLeft = rtWidth - resizeTipWidth - 2;
             }
             if (dragTop + resizeTipHeight >= tableHeight) {
               resizeBarTop = tableHeight - (dragTop + resizeTipHeight);
@@ -8114,6 +8193,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             } else {
               rowRest.resizeHeight = resizeHeight;
               handleUpdateRowResize(evnt, resizeParams);
+              updateRowOffsetTop();
             }
           }
           (0, _dom.removeClass)(tableEl, 'row-drag--resize');
@@ -9861,21 +9941,21 @@ var _default = exports.default = (0, _vue.defineComponent)({
           const scrollTargetEl = xHandleEl || tableBodyElem;
           if (scrollTargetEl) {
             const wrapperRect = el.getBoundingClientRect();
-            const tableWidth = el.clientWidth;
+            const tableWrapperWidth = el.clientWidth;
             const leftContainerElem = refLeftContainer.value;
             const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
             const rightContainerElem = refRightContainer.value;
             const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0;
             const srartX = wrapperRect.x + leftContainerWidth;
-            const endX = wrapperRect.x + tableWidth - rightContainerWidth;
+            const endX = wrapperRect.x + tableWrapperWidth - rightContainerWidth;
             const distSize = 28;
             const startDistSize = clientX - srartX;
             const endDistSize = endX - clientX;
             if (startDistSize > 0 && startDistSize <= distSize) {
-              const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120));
+              const scrollRatio = Math.floor(tableWrapperWidth / (startDistSize > distSize / 2 ? 240 : 120));
               scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize);
             } else if (endDistSize > 0 && endDistSize <= distSize) {
-              const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120));
+              const scrollRatio = Math.floor(tableWrapperWidth / (endDistSize > distSize / 2 ? 240 : 120));
               scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize);
             }
           }
@@ -10454,49 +10534,72 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const {
           isGroup,
           scrollXLoad,
-          overflowX
+          overflowX,
+          scrollXWidth
         } = reactData;
         const {
           visibleColumn,
           scrollXStore,
           elemStore,
-          tableWidth
+          fullColumnIdData
         } = internalData;
-        const tableHeader = refTableHeader.value;
         const tableBody = refTableBody.value;
-        const tableFooter = refTableFooter.value;
         const tableBodyElem = tableBody ? tableBody.$el : null;
         if (tableBodyElem) {
-          const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-          const tableFooterElem = tableFooter ? tableFooter.$el : null;
-          const headerElem = tableHeaderElem ? tableHeaderElem.querySelector('.vxe-table--header') : null;
-          const bodyElem = tableBodyElem.querySelector('.vxe-table--body');
-          const footerElem = tableFooterElem ? tableFooterElem.querySelector('.vxe-table--footer') : null;
-          const leftSpaceWidth = visibleColumn.slice(0, scrollXStore.startIndex).reduce((previous, column) => previous + column.renderWidth, 0);
+          const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+          const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
+          const headerTableElem = (0, _util.getRefElem)(elemStore['main-header-table']);
+          const footerTableElem = (0, _util.getRefElem)(elemStore['main-footer-table']);
+          let xSpaceLeft = 0;
+          const firstColumn = visibleColumn[scrollXStore.startIndex];
+          if (firstColumn) {
+            const colRest = fullColumnIdData[firstColumn.id] || {};
+            xSpaceLeft = colRest.oLeft;
+          }
+          let clientWidth = 0;
+          if (bodyScrollElem) {
+            clientWidth = bodyScrollElem.clientWidth;
+          }
+          // 虚拟渲染
+          let isScrollXBig = false;
+          let ySpaceWidth = scrollXWidth;
+          if (scrollXWidth > maxXWidth) {
+            // 触右
+            if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollLeft + clientWidth >= maxXWidth) {
+              xSpaceLeft = maxXWidth - bodyTableElem.clientWidth;
+            } else {
+              xSpaceLeft = (maxXWidth - clientWidth) * (xSpaceLeft / (scrollXWidth - clientWidth));
+            }
+            ySpaceWidth = maxXWidth;
+            isScrollXBig = true;
+          }
           let marginLeft = '';
           if (scrollXLoad && overflowX) {
-            marginLeft = `${leftSpaceWidth}px`;
+            marginLeft = `${xSpaceLeft}px`;
+          }
+          if (headerTableElem) {
+            headerTableElem.style.marginLeft = isGroup ? '' : marginLeft;
           }
-          if (headerElem) {
-            headerElem.style.marginLeft = isGroup ? '' : marginLeft;
+          if (bodyTableElem) {
+            bodyTableElem.style.marginLeft = marginLeft;
           }
-          bodyElem.style.marginLeft = marginLeft;
-          if (footerElem) {
-            footerElem.style.marginLeft = marginLeft;
+          if (footerTableElem) {
+            footerTableElem.style.marginLeft = marginLeft;
           }
+          reactData.isScrollXBig = isScrollXBig;
           const containerList = ['main'];
           containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer'];
             layoutList.forEach(layout => {
               const xSpaceElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-xSpace`]);
               if (xSpaceElem) {
-                xSpaceElem.style.width = scrollXLoad ? `${tableWidth}px` : '';
+                xSpaceElem.style.width = scrollXLoad ? `${ySpaceWidth}px` : '';
               }
             });
           });
           const scrollXSpaceEl = refScrollXSpaceElem.value;
           if (scrollXSpaceEl) {
-            scrollXSpaceEl.style.width = `${tableWidth}px`;
+            scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
           }
           (0, _vue.nextTick)(() => {
             updateStyle();
@@ -10525,47 +10628,63 @@ var _default = exports.default = (0, _vue.defineComponent)({
         const rowOpts = computeRowOpts.value;
         const cellOpts = computeCellOpts.value;
         const defaultRowHeight = computeDefaultRowHeight.value;
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
         const bodyTableElem = (0, _util.getRefElem)(elemStore['main-body-table']);
         const containerList = ['main', 'left', 'right'];
-        let topSpaceHeight = 0;
-        let ySpaceHeight = 0;
+        let ySpaceTop = 0;
+        let scrollYHeight = 0;
+        let isScrollYBig = false;
         if (scrollYLoad) {
           const isCustomCellHeight = isResizeCellHeight || cellOpts.height || rowOpts.height;
           if (!isCustomCellHeight && !expandColumn && isAllOverflow) {
-            ySpaceHeight = afterFullData.length * defaultRowHeight;
-            topSpaceHeight = Math.max(0, startIndex * defaultRowHeight);
+            scrollYHeight = afterFullData.length * defaultRowHeight;
+            if (scrollYHeight > maxYHeight) {
+              isScrollYBig = true;
+            }
+            ySpaceTop = Math.max(0, startIndex * defaultRowHeight);
           } else {
-            for (let i = 0; i < afterFullData.length; i++) {
-              const row = afterFullData[i];
-              const rowid = (0, _util.getRowid)($xeTable, row);
-              const rowRest = fullAllDataRowIdData[rowid] || {};
-              ySpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
-              // 是否展开行
-              if (expandColumn && rowExpandedMaps[rowid]) {
-                ySpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
-              }
+            const firstRow = afterFullData[startIndex];
+            let rowid = (0, _util.getRowid)($xeTable, firstRow);
+            let rowRest = fullAllDataRowIdData[rowid] || {};
+            ySpaceTop = rowRest.oTop;
+            const lastRow = afterFullData[afterFullData.length - 1];
+            rowid = (0, _util.getRowid)($xeTable, lastRow);
+            rowRest = fullAllDataRowIdData[rowid] || {};
+            scrollYHeight = rowRest.oTop + (rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight);
+            // 是否展开行
+            if (expandColumn && rowExpandedMaps[rowid]) {
+              scrollYHeight += rowRest.expandHeight || expandOpts.height || 0;
             }
-            for (let i = 0; i < startIndex; i++) {
-              const row = afterFullData[i];
-              const rowid = (0, _util.getRowid)($xeTable, row);
-              const rowRest = fullAllDataRowIdData[rowid] || {};
-              topSpaceHeight += rowRest.resizeHeight || cellOpts.height || rowOpts.height || rowRest.height || defaultRowHeight;
-              // 是否展开行
-              if (expandColumn && rowExpandedMaps[rowid]) {
-                topSpaceHeight += rowRest.expandHeight || expandOpts.height || 0;
-              }
+            if (scrollYHeight > maxYHeight) {
+              isScrollYBig = true;
             }
           }
         } else {
           if (bodyTableElem) {
-            ySpaceHeight = bodyTableElem.clientHeight;
+            scrollYHeight = bodyTableElem.clientHeight;
+          }
+        }
+        let clientHeight = 0;
+        if (bodyScrollElem) {
+          clientHeight = bodyScrollElem.clientHeight;
+        }
+        // 虚拟渲染
+        let ySpaceHeight = scrollYHeight;
+        let scrollYTop = ySpaceTop;
+        if (isScrollYBig) {
+          // 触底
+          if (bodyScrollElem && bodyTableElem && bodyScrollElem.scrollTop + clientHeight >= maxYHeight) {
+            scrollYTop = maxYHeight - bodyTableElem.clientHeight;
+          } else {
+            scrollYTop = (maxYHeight - clientHeight) * (ySpaceTop / (scrollYHeight - clientHeight));
           }
+          ySpaceHeight = maxYHeight;
         }
         containerList.forEach(name => {
           const layoutList = ['header', 'body', 'footer'];
           const tableElem = (0, _util.getRefElem)(elemStore[`${name}-body-table`]);
           if (tableElem) {
-            tableElem.style.marginTop = topSpaceHeight ? `${topSpaceHeight}px` : '';
+            tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : '';
           }
           layoutList.forEach(layout => {
             const ySpaceElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-ySpace`]);
@@ -10582,6 +10701,9 @@ var _default = exports.default = (0, _vue.defineComponent)({
         if (rowExpandYSpaceEl) {
           rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
         }
+        reactData.scrollYTop = scrollYTop;
+        reactData.scrollYHeight = scrollYHeight;
+        reactData.isScrollYBig = isScrollYBig;
         return (0, _vue.nextTick)().then(() => {
           updateStyle();
         });
@@ -11556,7 +11678,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           }
         }
         if (treeConfig && rowOpts.drag && !treeOpts.transform) {
-          (0, _log.warnLog)('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+          (0, _log.errLog)('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
         }
         if (props.dragConfig) {
           (0, _log.warnLog)('vxe.error.delProp', ['drag-config', 'row-drag-config']);