vxe-table 3.13.14 → 3.14.0-beta.0

package/es/table/src/methods.js

@@ -8,6 +8,8 @@ import { getSlotVNs } from '../../ui/src/vn';
 import { warnLog, errLog } from '../../ui/src/log';
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
 const customStorageKey = 'VXE_CUSTOM_STORE';
+const maxYHeight = 5e6;
+const maxXWidth = 5e6;
 function eqCellValue(row1, row2, field) {
     const val1 = XEUtils.get(row1, field);
     const val2 = XEUtils.get(row2, field);
@@ -61,28 +63,44 @@ function handleReserveRow($xeTable, reserveRowMap) {
     return reserveList;
 }
 function handleVirtualXVisible($xeTable) {
+    const reactData = $xeTable;
     const internalData = $xeTable;
-    const { elemStore, visibleColumn } = internalData;
+    const { isScrollXBig, scrollXWidth } = reactData;
+    const { elemStore, visibleColumn, fullColumnIdData } = internalData;
     const leftFixedWidth = $xeTable.computeLeftFixedWidth;
     const rightFixedWidth = $xeTable.computeRightFixedWidth;
     const bodyScrollElem = 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;
             }
-            if (toVisibleIndex >= 0) {
-                visibleSize++;
-                if (cWidth > endWidth) {
-                    break;
-                }
+            else {
+                rightIndex = cIndex;
+            }
+        }
+        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 { toVisibleIndex: Math.max(0, toVisibleIndex), visibleSize: Math.max(1, visibleSize) };
@@ -396,8 +414,8 @@ function updateStyle($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { border, showHeaderOverflow: allColumnHeaderOverflow, showFooterOverflow: allColumnFooterOverflow, mouseConfig, spanMethod, footerSpanMethod } = props;
-    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
-    const { visibleColumn, fullColumnIdData, tableHeight, tableWidth, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
+    const { isGroup, currentRow, tableColumn, scrollXLoad, scrollYLoad, overflowX, scrollbarWidth, overflowY, scrollbarHeight, scrollXWidth, columnStore, editStore, isAllOverflow, expandColumn } = reactData;
+    const { visibleColumn, fullColumnIdData, tableHeight, headerHeight, footerHeight, elemStore, customHeight, customMinHeight, customMaxHeight } = internalData;
     const el = $xeTable.$refs.refElem;
     if (!el) {
         return;
@@ -435,9 +453,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`;
@@ -527,7 +545,7 @@ function updateStyle($xeTable) {
                 if (fixedType) {
                     if (isGroup) {
                         if (wrapperElem) {
-                            wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                            wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                         }
                     }
                     else {
@@ -538,7 +556,7 @@ function updateStyle($xeTable) {
                         }
                         else {
                             if (wrapperElem) {
-                                wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                                wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                             }
                         }
                     }
@@ -549,10 +567,6 @@ function updateStyle($xeTable) {
                 if (tableElem) {
                     tableElem.style.width = tWidth ? `${tWidth}px` : '';
                 }
-                const repairElem = getRefElem(elemStore[`${name}-${layout}-repair`]);
-                if (repairElem) {
-                    repairElem.style.width = `${tableWidth}px`;
-                }
                 const listElem = getRefElem(elemStore[`${name}-${layout}-list`]);
                 if (isGroup && listElem) {
                     XEUtils.arrayEach(listElem.querySelectorAll('.col--group'), (thElem) => {
@@ -620,7 +634,7 @@ function updateStyle($xeTable) {
                     }
                     else {
                         if (wrapperElem) {
-                            wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                            wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                         }
                     }
                 }
@@ -661,7 +675,7 @@ function updateStyle($xeTable) {
                     }
                     else {
                         if (wrapperElem) {
-                            wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                            wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                         }
                     }
                 }
@@ -984,46 +998,53 @@ 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 } = reactData;
+    const { isAllOverflow, expandColumn, isScrollYBig, scrollYHeight } = reactData;
     const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
-    const expandOpts = $xeTable.computeExpandOpts;
     const rowOpts = $xeTable.computeRowOpts;
     const cellOpts = $xeTable.computeCellOpts;
     const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
     if (bodyScrollElem) {
         const clientHeight = bodyScrollElem.clientHeight;
-        const scrollTop = XEUtils.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 = 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 (rowRest.oTop <= startTop) {
+                    leftIndex = rIndex + 1;
                 }
-                if (toVisibleIndex >= 0) {
-                    visibleSize++;
-                    if (offsetTop > endHeight) {
-                        break;
-                    }
+                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 = getRowid($xeTable, row);
+                const rowRest = fullAllDataRowIdData[rowid] || {};
+                visibleSize++;
+                if (rowRest.oTop > endTop || visibleSize >= 100) {
+                    break;
                 }
             }
         }
@@ -1178,7 +1199,7 @@ function autoCellWidth($xeTable) {
     if (!xHandleEl) {
         return;
     }
-    let tableWidth = 0;
+    let tWidth = 0;
     const minCellWidth = 40; // 列宽最少限制 40px
     const bodyWidth = bodyElem.clientWidth;
     let remainWidth = bodyWidth;
@@ -1189,51 +1210,51 @@ function autoCellWidth($xeTable) {
     // 最小宽
     pxMinList.forEach((column) => {
         const minWidth = XEUtils.toInteger(column.minWidth);
-        tableWidth += minWidth;
+        tWidth += minWidth;
         column.renderWidth = minWidth;
     });
     // 最小自适应
     autoMinList.forEach((column) => {
         const scaleWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-        tableWidth += scaleWidth;
+        tWidth += scaleWidth;
         column.renderWidth = scaleWidth;
     });
     // 最小百分比
     scaleMinList.forEach((column) => {
         const scaleWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
-        tableWidth += scaleWidth;
+        tWidth += scaleWidth;
         column.renderWidth = scaleWidth;
     });
     // 固定百分比
     scaleList.forEach((column) => {
         const scaleWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
-        tableWidth += scaleWidth;
+        tWidth += scaleWidth;
         column.renderWidth = scaleWidth;
     });
     // 固定宽
     pxList.forEach((column) => {
         const width = XEUtils.toInteger(column.width);
-        tableWidth += width;
+        tWidth += width;
         column.renderWidth = width;
     });
     // 自适应宽
     autoList.forEach((column) => {
         const width = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-        tableWidth += width;
+        tWidth += width;
         column.renderWidth = width;
     });
     // 调整了列宽
     resizeList.forEach((column) => {
         const width = XEUtils.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;
             });
         }
@@ -1245,7 +1266,7 @@ function autoCellWidth($xeTable) {
     remainList.forEach((column) => {
         const width = Math.max(meanWidth, minCellWidth);
         column.renderWidth = width;
-        tableWidth += width;
+        tWidth += width;
     });
     if (fit) {
         /**
@@ -1255,13 +1276,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;
             }
         }
     }
@@ -1269,17 +1290,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 = getRefElem(elemStore['main-header-table']);
     const footerTableElem = 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) {
@@ -1455,8 +1477,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) {
@@ -1465,14 +1487,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');
             }
@@ -1499,7 +1521,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;
                 }
@@ -1511,7 +1533,7 @@ function showDropTip($xeTable, evnt, trEl, thEl, showLine, dragPos) {
                     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');
@@ -1587,6 +1609,20 @@ 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 = getRowid($xeTable, row);
+        if (expanded) {
+            rowExpandedReserveRowMap[rowid] = row;
+        }
+        else if (rowExpandedReserveRowMap[rowid]) {
+            delete rowExpandedReserveRowMap[rowid];
+        }
+    }
+};
 // 计算可视渲染相关数据
 function computeScrollLoad($xeTable) {
     const reactData = $xeTable;
@@ -1656,14 +1692,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);
         }
@@ -1695,16 +1736,16 @@ function handleUpdateColumn($xeTable) {
 function loadScrollXData($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
-    const { mergeList, mergeFooterList } = reactData;
+    const { mergeList, mergeFooterList, isScrollXBig } = reactData;
     const { scrollXStore } = internalData;
     const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
     const { toVisibleIndex, 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, endIndex: offsetEndIndex } = offsetItem;
     if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -1911,20 +1952,20 @@ function handleColumn($xeTable, collectColumn) {
 /**
  * 纵向 Y 可视渲染处理
  */
-function loadScrollYData($xeTable, scrollTop) {
+function loadScrollYData($xeTable) {
     const reactData = $xeTable;
     const internalData = $xeTable;
-    const { mergeList, isAllOverflow } = reactData;
+    const { mergeList, isAllOverflow, isScrollYBig } = reactData;
     const { scrollYStore } = internalData;
     const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
     const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
-    const { toVisibleIndex, visibleSize } = handleVirtualYVisible($xeTable, scrollTop);
+    const { toVisibleIndex, visibleSize } = 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, endIndex: offsetEndIndex } = offsetItem;
     if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -2110,6 +2151,40 @@ 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 = 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;
@@ -4060,7 +4135,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;
@@ -4069,8 +4144,8 @@ const Methods = {
                 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`;
@@ -4208,7 +4283,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) {
@@ -4219,15 +4294,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);
@@ -4258,6 +4333,7 @@ const Methods = {
                 else {
                     rowRest.resizeHeight = resizeHeight;
                     handleUpdateRowResize($xeTable, evnt, resizeParams);
+                    updateRowOffsetTop($xeTable);
                 }
             }
             removeClass(tableEl, 'row-drag--resize');
@@ -6378,6 +6454,7 @@ const Methods = {
                 const dragParams = {
                     oldRow: dragRow,
                     newRow: prevDragRow,
+                    dragRow,
                     dragPos: prevDragPos,
                     dragToChild: !!prevDragToChild,
                     offsetIndex: dragOffsetIndex
@@ -6518,6 +6595,7 @@ const Methods = {
                     $xeTable.dispatchEvent('row-dragend', {
                         oldRow: dragRow,
                         newRow: prevDragRow,
+                        dragRow,
                         dragPos: prevDragPos,
                         dragToChild: isDragToChildFlag,
                         offsetIndex: dragOffsetIndex,
@@ -6678,11 +6756,12 @@ const Methods = {
         if (prevDragCol && dragCol) {
             // 判断是否有拖动
             if (prevDragCol !== dragCol) {
-                const oldColumn = dragCol;
+                const dragColumn = dragCol;
                 const newColumn = prevDragCol;
                 const dragParams = {
-                    oldColumn,
+                    oldColumn: dragColumn,
                     newColumn,
+                    dragColumn,
                     dragPos: prevDragPos,
                     dragToChild: !!prevDragToChild,
                     offsetIndex: dragOffsetIndex
@@ -6695,14 +6774,14 @@ const Methods = {
                     let oafIndex = -1;
                     let nafIndex = -1;
                     const oldAllMaps = {};
-                    XEUtils.eachTree([oldColumn], column => {
+                    XEUtils.eachTree([dragColumn], column => {
                         oldAllMaps[column.id] = column;
                     });
                     let isSelfToChildStatus = false;
-                    if (oldColumn.parentId && newColumn.parentId) {
+                    if (dragColumn.parentId && newColumn.parentId) {
                         // 子到子
                         if (isPeerDrag && !isCrossDrag) {
-                            if (oldColumn.parentId !== newColumn.parentId) {
+                            if (dragColumn.parentId !== newColumn.parentId) {
                                 // 非同级
                                 return;
                             }
@@ -6725,7 +6804,7 @@ const Methods = {
                             }
                         }
                     }
-                    else if (oldColumn.parentId) {
+                    else if (dragColumn.parentId) {
                         // 子到根
                         if (!isCrossDrag) {
                             return;
@@ -6752,17 +6831,17 @@ const Methods = {
                     else {
                         // 根到根
                     }
-                    const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === oldColumn.id);
+                    const oldewMatchRest = XEUtils.findTree(collectColumn, item => item.id === dragColumn.id);
                     // 改变层级
                     if (isSelfToChildStatus && (isCrossDrag && isSelfToChildDrag)) {
                         if (oldewMatchRest) {
                             const { items: oCols, index: oIndex } = oldewMatchRest;
-                            const childList = oldColumn.children || [];
+                            const childList = dragColumn.children || [];
                             childList.forEach(column => {
-                                column.parentId = oldColumn.parentId;
+                                column.parentId = dragColumn.parentId;
                             });
                             oCols.splice(oIndex, 1, ...childList);
-                            oldColumn.children = [];
+                            dragColumn.children = [];
                         }
                     }
                     else {
@@ -6779,12 +6858,12 @@ const Methods = {
                         const { items: nCols, index: nIndex, parent: nParent } = newMatchRest;
                         // 转子级
                         if ((isCrossDrag && isToChildDrag) && isDragToChildFlag) {
-                            oldColumn.parentId = newColumn.id;
-                            newColumn.children = (newColumn.children || []).concat([oldColumn]);
+                            dragColumn.parentId = newColumn.id;
+                            newColumn.children = (newColumn.children || []).concat([dragColumn]);
                         }
                         else {
-                            oldColumn.parentId = newColumn.parentId;
-                            nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn);
+                            dragColumn.parentId = newColumn.parentId;
+                            nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
                         }
                         if (!nParent) {
                             nafIndex = nIndex;
@@ -6807,8 +6886,9 @@ const Methods = {
                         }
                     }
                     $xeTable.dispatchEvent('column-dragend', {
-                        oldColumn,
+                        oldColumn: dragColumn,
                         newColumn,
+                        dragColumn,
                         dragPos: prevDragPos,
                         dragToChild: isDragToChildFlag,
                         offsetIndex: dragOffsetIndex,
@@ -6891,22 +6971,22 @@ 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);
                 }
             }
@@ -7402,17 +7482,17 @@ 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(() => $xeTable.$nextTick())
+            .then(() => $xeTable.recalculate(true))
             .then(() => {
-            if (expandColumn) {
-                updateRowExpandStyle($xeTable);
-                handleRowExpandScroll($xeTable);
-            }
+            updateRowOffsetTop($xeTable);
+            updateRowExpandStyle($xeTable);
+            handleRowExpandScroll($xeTable);
             return $xeTable.updateCellAreas();
         });
     },
@@ -7437,35 +7517,31 @@ const Methods = {
      */
     clearRowExpand() {
         const $xeTable = this;
-        const { expandOpts, tableFullData } = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { tableFullData } = 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 = getRowid(this, row);
-            if (expanded) {
-                rowExpandedReserveRowMap[rowid] = row;
-            }
-            else if (rowExpandedReserveRowMap[rowid]) {
-                delete rowExpandedReserveRowMap[rowid];
-            }
-        }
-    },
     getRowExpandRecords() {
         const rest = [];
         XEUtils.each(this.rowExpandedMaps, item => {
@@ -8168,7 +8244,7 @@ const Methods = {
         const tableProps = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { target, deltaY, deltaX } = evnt;
+        const { target, deltaY, deltaX, shiftKey } = evnt;
         if (target && /^textarea$/i.test(target.tagName)) {
             return;
         }
@@ -8199,8 +8275,8 @@ const Methods = {
             return;
         }
         const wheelSpeed = getWheelSpeed(reactData.lastScrollTime);
-        const deltaTop = Math.ceil(deltaY * wheelSpeed);
-        const deltaLeft = Math.ceil(deltaX * wheelSpeed);
+        const deltaTop = Math.ceil((shiftKey ? deltaX : deltaY) * wheelSpeed);
+        const deltaLeft = Math.ceil((shiftKey ? deltaY : deltaX) * wheelSpeed);
         const isTopWheel = deltaTop < 0;
         const currScrollTop = bodyScrollElem.scrollTop;
         // 如果滚动位置已经是顶部或底部，则不需要触发
@@ -8348,43 +8424,66 @@ const Methods = {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { isGroup, scrollXLoad } = reactData;
-        const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData;
-        const tableHeader = $xeTable.$refs.refTableHeader;
+        const { isGroup, scrollXLoad, overflowX, scrollXWidth } = reactData;
+        const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData;
         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 = getRefElem(elemStore['main-body-scroll']);
+            const bodyTableElem = getRefElem(elemStore['main-body-table']);
+            const headerTableElem = getRefElem(elemStore['main-header-table']);
+            const footerTableElem = 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 (headerElem) {
-                headerElem.style.marginLeft = isGroup ? '' : marginLeft;
+            if (headerTableElem) {
+                headerTableElem.style.marginLeft = isGroup ? '' : marginLeft;
             }
-            bodyElem.style.marginLeft = marginLeft;
-            if (footerElem) {
-                footerElem.style.marginLeft = marginLeft;
+            if (bodyTableElem) {
+                bodyTableElem.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 = 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);
@@ -8412,49 +8511,66 @@ const Methods = {
         const rowOpts = $xeTable.computeRowOpts;
         const cellOpts = $xeTable.computeCellOpts;
         const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
         const bodyTableElem = 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 = 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 = getRowid($xeTable, firstRow);
+                let rowRest = fullAllDataRowIdData[rowid] || {};
+                ySpaceTop = rowRest.oTop;
+                const lastRow = afterFullData[afterFullData.length - 1];
+                rowid = 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 = 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 = getRefElem(elemStore[`${name}-body-table`]);
             if (tableElem) {
-                tableElem.style.marginTop = topSpaceHeight ? `${topSpaceHeight}px` : '';
+                tableElem.style.marginTop = scrollYTop ? `${scrollYTop}px` : '';
             }
             layoutList.forEach(layout => {
                 const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`]);
@@ -8471,6 +8587,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);
         });