vxe-table 3.13.15 → 3.14.0-beta.0

package/lib/table/src/methods.js

@@ -22,6 +22,8 @@ const {
   createEvent
 } = _ui.VxeUI;
 const customStorageKey = 'VXE_CUSTOM_STORE';
+const maxYHeight = 5e6;
+const maxXWidth = 5e6;
 function eqCellValue(row1, row2, field) {
   const val1 = _xeUtils.default.get(row1, field);
   const val2 = _xeUtils.default.get(row2, field);
@@ -81,34 +83,50 @@ function handleReserveRow($xeTable, reserveRowMap) {
   return reserveList;
 }
 function handleVirtualXVisible($xeTable) {
+  const reactData = $xeTable;
   const internalData = $xeTable;
+  const {
+    isScrollXBig,
+    scrollXWidth
+  } = reactData;
   const {
     elemStore,
-    visibleColumn
+    visibleColumn,
+    fullColumnIdData
   } = internalData;
   const leftFixedWidth = $xeTable.computeLeftFixedWidth;
   const rightFixedWidth = $xeTable.computeRightFixedWidth;
   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 {
@@ -534,6 +552,7 @@ function updateStyle($xeTable) {
     scrollbarWidth,
     overflowY,
     scrollbarHeight,
+    scrollXWidth,
     columnStore,
     editStore,
     isAllOverflow,
@@ -543,7 +562,6 @@ function updateStyle($xeTable) {
     visibleColumn,
     fullColumnIdData,
     tableHeight,
-    tableWidth,
     headerHeight,
     footerHeight,
     elemStore,
@@ -588,9 +606,9 @@ function updateStyle($xeTable) {
     }
     bodyHeight = Math.max(bodyMinHeight, bodyHeight);
   }
+  const scrollbarXToTop = $xeTable.$refs.computeScrollbarXToTop;
   const xLeftCornerEl = $xeTable.$refs.refScrollXLeftCornerElem;
   const xRightCornerEl = $xeTable.$refs.refScrollXRightCornerElem;
-  const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
   const scrollXVirtualEl = $xeTable.$refs.refScrollXVirtualElem;
   if (scrollXVirtualEl) {
     scrollXVirtualEl.style.height = `${osbHeight}px`;
@@ -678,7 +696,7 @@ function updateStyle($xeTable) {
         if (fixedType) {
           if (isGroup) {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
             }
           } else {
             if (isOptimizeMode) {
@@ -687,7 +705,7 @@ function updateStyle($xeTable) {
               }
             } else {
               if (wrapperElem) {
-                wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
               }
             }
           }
@@ -698,10 +716,6 @@ function updateStyle($xeTable) {
         if (tableElem) {
           tableElem.style.width = tWidth ? `${tWidth}px` : '';
         }
-        const repairElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-repair`]);
-        if (repairElem) {
-          repairElem.style.width = `${tableWidth}px`;
-        }
         const listElem = (0, _util.getRefElem)(elemStore[`${name}-${layout}-list`]);
         if (isGroup && listElem) {
           _xeUtils.default.arrayEach(listElem.querySelectorAll('.col--group'), thElem => {
@@ -770,7 +784,7 @@ function updateStyle($xeTable) {
             }
           } else {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
             }
           }
         }
@@ -808,7 +822,7 @@ function updateStyle($xeTable) {
             }
           } else {
             if (wrapperElem) {
-              wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+              wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
             }
           }
         }
@@ -1174,13 +1188,14 @@ function computeRowHeight($xeTable) {
   // 最低支持 18px 行高
   return Math.max(18, rowHeight);
 }
-function handleVirtualYVisible($xeTable, currScrollTop) {
+function handleVirtualYVisible($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
     isAllOverflow,
     expandColumn,
-    rowExpandedMaps
+    isScrollYBig,
+    scrollYHeight
   } = reactData;
   const {
     elemStore,
@@ -1188,40 +1203,46 @@ function handleVirtualYVisible($xeTable, currScrollTop) {
     afterFullData,
     fullAllDataRowIdData
   } = internalData;
-  const expandOpts = $xeTable.computeExpandOpts;
   const rowOpts = $xeTable.computeRowOpts;
   const cellOpts = $xeTable.computeCellOpts;
   const defaultRowHeight = $xeTable.computeDefaultRowHeight;
   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;
         }
       }
     }
@@ -1400,7 +1421,7 @@ function autoCellWidth($xeTable) {
   if (!xHandleEl) {
     return;
   }
-  let tableWidth = 0;
+  let tWidth = 0;
   const minCellWidth = 40; // 列宽最少限制 40px
   const bodyWidth = bodyElem.clientWidth;
   let remainWidth = bodyWidth;
@@ -1424,51 +1445,51 @@ function autoCellWidth($xeTable) {
   // 最小宽
   pxMinList.forEach(column => {
     const minWidth = _xeUtils.default.toInteger(column.minWidth);
-    tableWidth += minWidth;
+    tWidth += minWidth;
     column.renderWidth = minWidth;
   });
   // 最小自适应
   autoMinList.forEach(column => {
     const scaleWidth = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-    tableWidth += scaleWidth;
+    tWidth += scaleWidth;
     column.renderWidth = scaleWidth;
   });
   // 最小百分比
   scaleMinList.forEach(column => {
     const scaleWidth = Math.floor(_xeUtils.default.toInteger(column.minWidth) * meanWidth);
-    tableWidth += scaleWidth;
+    tWidth += scaleWidth;
     column.renderWidth = scaleWidth;
   });
   // 固定百分比
   scaleList.forEach(column => {
     const scaleWidth = Math.floor(_xeUtils.default.toInteger(column.width) * meanWidth);
-    tableWidth += scaleWidth;
+    tWidth += scaleWidth;
     column.renderWidth = scaleWidth;
   });
   // 固定宽
   pxList.forEach(column => {
     const width = _xeUtils.default.toInteger(column.width);
-    tableWidth += width;
+    tWidth += width;
     column.renderWidth = width;
   });
   // 自适应宽
   autoList.forEach(column => {
     const width = Math.max(60, _xeUtils.default.toInteger(column.renderAutoWidth));
-    tableWidth += width;
+    tWidth += width;
     column.renderWidth = width;
   });
   // 调整了列宽
   resizeList.forEach(column => {
     const width = _xeUtils.default.toInteger(column.resizeWidth);
-    tableWidth += width;
+    tWidth += width;
     column.renderWidth = width;
   });
-  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;
       });
     }
@@ -1479,7 +1500,7 @@ function autoCellWidth($xeTable) {
   remainList.forEach(column => {
     const width = Math.max(meanWidth, minCellWidth);
     column.renderWidth = width;
-    tableWidth += width;
+    tWidth += width;
   });
   if (fit) {
     /**
@@ -1489,13 +1510,13 @@ function autoCellWidth($xeTable) {
     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;
       }
     }
   }
@@ -1503,17 +1524,18 @@ function autoCellWidth($xeTable) {
   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($xeTable);
   updateHeight($xeTable);
   reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
   if (overflowX) {
@@ -1716,8 +1738,8 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
   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 = $xeTable.$refs.refDragRowLineElem;
     if (rdLineEl) {
@@ -1726,14 +1748,14 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         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 {
@@ -1758,7 +1780,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
           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;
         }
@@ -1769,7 +1791,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
         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');
@@ -1854,6 +1876,21 @@ function handleScrollToRowColumn($xeTable, fieldOrColumn, row) {
   }
   return $xeTable.$nextTick();
 }
+const handleRowExpandReserve = ($xeTable, row, expanded) => {
+  const internalData = $xeTable;
+  const {
+    rowExpandedReserveRowMap
+  } = internalData;
+  const expandOpts = $xeTable.computeExpandOpts;
+  if (expandOpts.reserve) {
+    const rowid = (0, _util.getRowid)($xeTable, row);
+    if (expanded) {
+      rowExpandedReserveRowMap[rowid] = row;
+    } else if (rowExpandedReserveRowMap[rowid]) {
+      delete rowExpandedReserveRowMap[rowid];
+    }
+  }
+};
 // 计算可视渲染相关数据
 function computeScrollLoad($xeTable) {
   const reactData = $xeTable;
@@ -1933,14 +1970,19 @@ function handleRecalculateLayout($xeTable, reFull) {
   calcCellWidth($xeTable);
   autoCellWidth($xeTable);
   updateStyle($xeTable);
+  if (reFull) {
+    updateRowOffsetTop($xeTable);
+  }
   updateRowExpandStyle($xeTable);
   return computeScrollLoad($xeTable).then(() => {
     if (reFull === true) {
       // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-      calcCellHeight($xeTable);
       calcCellWidth($xeTable);
       autoCellWidth($xeTable);
       updateStyle($xeTable);
+      if (reFull) {
+        updateRowOffsetTop($xeTable);
+      }
       updateRowExpandStyle($xeTable);
       return computeScrollLoad($xeTable);
     }
@@ -1980,7 +2022,8 @@ function loadScrollXData($xeTable) {
   const internalData = $xeTable;
   const {
     mergeList,
-    mergeFooterList
+    mergeFooterList,
+    isScrollXBig
   } = reactData;
   const {
     scrollXStore
@@ -1996,11 +2039,11 @@ function loadScrollXData($xeTable) {
     visibleSize
   } = handleVirtualXVisible($xeTable);
   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,
@@ -2224,12 +2267,13 @@ function handleColumn($xeTable, collectColumn) {
 /**
  * 纵向 Y 可视渲染处理
  */
-function loadScrollYData($xeTable, scrollTop) {
+function loadScrollYData($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
   const {
     mergeList,
-    isAllOverflow
+    isAllOverflow,
+    isScrollYBig
   } = reactData;
   const {
     scrollYStore
@@ -2244,13 +2288,13 @@ function loadScrollYData($xeTable, scrollTop) {
   const {
     toVisibleIndex,
     visibleSize
-  } = handleVirtualYVisible($xeTable, scrollTop);
+  } = handleVirtualYVisible($xeTable);
   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,
@@ -2453,6 +2497,49 @@ function handleUpdateRowResize($xeTable, evnt, params) {
     setTimeout(() => $xeTable.recalculate(true), 300);
   });
 }
+function updateColumnOffsetLeft($xeTable) {
+  const internalData = $xeTable;
+  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;
+  }
+}
+function updateRowOffsetTop($xeTable) {
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  const {
+    expandColumn,
+    rowExpandedMaps
+  } = reactData;
+  const {
+    afterFullData,
+    fullAllDataRowIdData
+  } = internalData;
+  const expandOpts = $xeTable.computeExpandOpts;
+  const rowOpts = $xeTable.computeRowOpts;
+  const cellOpts = $xeTable.computeCellOpts;
+  const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+  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;
+    }
+  }
+}
 function updateRowExpandStyle($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -4724,7 +4811,7 @@ const Methods = {
       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;
@@ -4732,8 +4819,8 @@ const Methods = {
         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`;
@@ -4895,7 +4982,7 @@ const Methods = {
     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) {
@@ -4905,15 +4992,15 @@ const Methods = {
       }
       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);
@@ -4946,6 +5033,7 @@ const Methods = {
         } else {
           rowRest.resizeHeight = resizeHeight;
           handleUpdateRowResize($xeTable, evnt, resizeParams);
+          updateRowOffsetTop($xeTable);
         }
       }
       (0, _dom.removeClass)(tableEl, 'row-drag--resize');
@@ -8052,21 +8140,21 @@ const Methods = {
       const scrollTargetEl = xHandleEl || tableBodyElem;
       if (scrollTargetEl) {
         const wrapperRect = el.getBoundingClientRect();
-        const tableWidth = el.clientWidth;
+        const tableWrapperWidth = el.clientWidth;
         const leftContainerElem = $xeTable.$refs.refLeftContainer;
         const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
         const rightContainerElem = $xeTable.$refs.refRightContainer;
         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);
         }
       }
@@ -8674,15 +8762,14 @@ const Methods = {
         });
       }
       if (reserve) {
-        validRows.forEach(row => this.handleRowExpandReserve(row, expanded));
+        validRows.forEach(row => handleRowExpandReserve($xeTable, row, expanded));
       }
     }
     this.rowExpandedMaps = rExpandedMaps;
-    return Promise.all(lazyRests).then(() => $xeTable.recalculate()).then(() => {
-      if (expandColumn) {
-        updateRowExpandStyle($xeTable);
-        handleRowExpandScroll($xeTable);
-      }
+    return Promise.all(lazyRests).then(() => $xeTable.$nextTick()).then(() => $xeTable.recalculate(true)).then(() => {
+      updateRowOffsetTop($xeTable);
+      updateRowExpandStyle($xeTable);
+      handleRowExpandScroll($xeTable);
       return $xeTable.updateCellAreas();
     });
   },
@@ -8709,42 +8796,35 @@ const Methods = {
    */
   clearRowExpand() {
     const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
-      expandOpts,
       tableFullData
-    } = this;
+    } = internalData;
+    const expandOpts = $xeTable.computeExpandOpts;
     const {
       reserve
     } = expandOpts;
-    const expList = this.getRowExpandRecords();
-    this.rowExpandedMaps = {};
+    const expList = $xeTable.getRowExpandRecords();
+    reactData.rowExpandedMaps = {};
     if (reserve) {
-      tableFullData.forEach(row => this.handleRowExpandReserve(row, false));
+      tableFullData.forEach(row => handleRowExpandReserve($xeTable, row, false));
     }
-    return this.$nextTick().then(() => {
+    return $xeTable.$nextTick().then(() => {
       if (expList.length) {
-        this.recalculate();
+        return $xeTable.recalculate(true);
       }
-    }).then(() => $xeTable.updateCellAreas());
+    }).then(() => {
+      updateRowOffsetTop($xeTable);
+      updateRowExpandStyle($xeTable);
+      handleRowExpandScroll($xeTable);
+      return $xeTable.updateCellAreas();
+    });
   },
   clearRowExpandReserve() {
     this.rowExpandedReserveRowMap = {};
     return this.$nextTick();
   },
-  handleRowExpandReserve(row, expanded) {
-    const {
-      rowExpandedReserveRowMap,
-      expandOpts
-    } = this;
-    if (expandOpts.reserve) {
-      const rowid = (0, _util.getRowid)(this, row);
-      if (expanded) {
-        rowExpandedReserveRowMap[rowid] = row;
-      } else if (rowExpandedReserveRowMap[rowid]) {
-        delete rowExpandedReserveRowMap[rowid];
-      }
-    }
-  },
   getRowExpandRecords() {
     const rest = [];
     _xeUtils.default.each(this.rowExpandedMaps, item => {
@@ -9797,49 +9877,73 @@ const Methods = {
     const internalData = $xeTable;
     const {
       isGroup,
-      scrollXLoad
+      scrollXLoad,
+      overflowX,
+      scrollXWidth
     } = reactData;
     const {
       visibleColumn,
       scrollXStore,
       elemStore,
-      tableWidth
+      fullColumnIdData
     } = internalData;
-    const tableHeader = $xeTable.$refs.refTableHeader;
     const tableBody = $xeTable.$refs.refTableBody;
-    const tableFooter = $xeTable.$refs.refTableFooter;
     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) {
-        marginLeft = `${leftSpaceWidth}px`;
+      if (scrollXLoad && overflowX) {
+        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 = $xeTable.$refs.refScrollXSpaceElem;
       if (scrollXSpaceEl) {
-        scrollXSpaceEl.style.width = `${tableWidth}px`;
+        scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
       }
       $xeTable.$nextTick(() => {
         updateStyle($xeTable);
@@ -9880,47 +9984,63 @@ const Methods = {
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+    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`]);
@@ -9937,6 +10057,9 @@ const Methods = {
     if (rowExpandYSpaceEl) {
       rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
     }
+    reactData.scrollYTop = scrollYTop;
+    reactData.scrollYHeight = scrollYHeight;
+    reactData.isScrollYBig = isScrollYBig;
     return $xeTable.$nextTick().then(() => {
       updateStyle($xeTable);
     });