vxe-table 4.11.15 → 4.12.0-beta.0

package/es/table/src/table.js

@@ -19,6 +19,8 @@ import TableExportPanelComponent from '../module/export/export-panel';
 import TableMenuPanelComponent from '../module/menu/panel';
 const { getConfig, getIcon, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns, renderEmptyElement } = VxeUI;
 const customStorageKey = 'VXE_CUSTOM_STORE';
+const maxYHeight = 5e6;
+const maxXWidth = 5e6;
 export default defineComponent({
     name: 'VxeTable',
     props: tableProps,
@@ -840,27 +842,42 @@ export default defineComponent({
             return reserveList;
         };
         const handleVirtualXVisible = () => {
-            const { elemStore, visibleColumn } = internalData;
+            const { isScrollXBig, scrollXWidth } = reactData;
+            const { elemStore, visibleColumn, fullColumnIdData } = internalData;
             const leftFixedWidth = computeLeftFixedWidth.value;
             const rightFixedWidth = computeRightFixedWidth.value;
             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) };
@@ -902,44 +919,51 @@ export default defineComponent({
             // 最低支持 18px 行高
             return Math.max(18, rowHeight);
         };
-        const handleVirtualYVisible = (currScrollTop) => {
-            const { isAllOverflow, expandColumn, rowExpandedMaps } = reactData;
+        const handleVirtualYVisible = () => {
+            const { isAllOverflow, expandColumn, isScrollYBig, scrollYHeight } = reactData;
             const { elemStore, isResizeCellHeight, afterFullData, fullAllDataRowIdData } = internalData;
-            const expandOpts = computeExpandOpts.value;
             const rowOpts = computeRowOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             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 (toVisibleIndex >= 0) {
-                            visibleSize++;
-                            if (offsetTop > endHeight) {
-                                break;
-                            }
+                        if (rowRest.oTop <= startTop) {
+                            leftIndex = rIndex + 1;
                         }
-                        // 是否展开行
-                        if (expandColumn && rowExpandedMaps[rowid]) {
-                            offsetTop += rowRest.expandHeight || expandOpts.height || 0;
+                        else {
+                            rightIndex = rIndex;
+                        }
+                    }
+                    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;
                         }
                     }
                 }
@@ -1318,7 +1342,7 @@ export default defineComponent({
             if (!xHandleEl) {
                 return;
             }
-            let tableWidth = 0;
+            let tWidth = 0;
             const minCellWidth = 40; // 列宽最少限制 40px
             const bodyWidth = bodyElem.clientWidth;
             let remainWidth = bodyWidth;
@@ -1329,51 +1353,51 @@ export default defineComponent({
             // 最小宽
             pxMinList.forEach((column) => {
                 const minWidth = XEUtils.toInteger(column.minWidth);
-                tableWidth += minWidth;
+                tWidth += minWidth;
                 column.renderWidth = minWidth;
             });
             // 最小自适应
             autoMinList.forEach((column) => {
                 const caWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-                tableWidth += caWidth;
+                tWidth += caWidth;
                 column.renderWidth = caWidth;
             });
             // 最小百分比
             scaleMinList.forEach((column) => {
                 const smWidth = Math.floor(XEUtils.toInteger(column.minWidth) * meanWidth);
-                tableWidth += smWidth;
+                tWidth += smWidth;
                 column.renderWidth = smWidth;
             });
             // 固定百分比
             scaleList.forEach((column) => {
                 const sfWidth = Math.floor(XEUtils.toInteger(column.width) * meanWidth);
-                tableWidth += sfWidth;
+                tWidth += sfWidth;
                 column.renderWidth = sfWidth;
             });
             // 固定宽
             pxList.forEach((column) => {
                 const pWidth = XEUtils.toInteger(column.width);
-                tableWidth += pWidth;
+                tWidth += pWidth;
                 column.renderWidth = pWidth;
             });
             // 自适应宽
             autoList.forEach((column) => {
                 const aWidth = Math.max(60, XEUtils.toInteger(column.renderAutoWidth));
-                tableWidth += aWidth;
+                tWidth += aWidth;
                 column.renderWidth = aWidth;
             });
             // 调整了列宽
             resizeList.forEach((column) => {
                 const reWidth = XEUtils.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;
                     });
                 }
@@ -1385,7 +1409,7 @@ export default defineComponent({
             remainList.forEach((column) => {
                 const width = Math.max(meanWidth, minCellWidth);
                 column.renderWidth = width;
-                tableWidth += width;
+                tWidth += width;
             });
             if (fit) {
                 /**
@@ -1395,13 +1419,13 @@ export default 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;
                     }
                 }
             }
@@ -1409,17 +1433,18 @@ export default 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 = 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();
             updateHeight();
             reactData.parentHeight = Math.max(internalData.headerHeight + footerHeight + 20, $xeTable.getParentHeight());
             if (overflowX) {
@@ -1721,8 +1746,8 @@ export default defineComponent({
         };
         const updateStyle = () => {
             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 = refElem.value;
             if (!el) {
                 return;
@@ -1760,9 +1785,9 @@ export default 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`;
@@ -1852,7 +1877,7 @@ export default defineComponent({
                         if (fixedType) {
                             if (isGroup) {
                                 if (wrapperElem) {
-                                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                                    wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                                 }
                             }
                             else {
@@ -1863,7 +1888,7 @@ export default defineComponent({
                                 }
                                 else {
                                     if (wrapperElem) {
-                                        wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                                        wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                                     }
                                 }
                             }
@@ -1941,7 +1966,7 @@ export default defineComponent({
                             }
                             else {
                                 if (wrapperElem) {
-                                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                                    wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                                 }
                             }
                         }
@@ -1982,7 +2007,7 @@ export default defineComponent({
                             }
                             else {
                                 if (wrapperElem) {
-                                    wrapperElem.style.width = tableWidth ? `${tableWidth}px` : '';
+                                    wrapperElem.style.width = scrollXWidth ? `${scrollXWidth}px` : '';
                                 }
                             }
                         }
@@ -2598,6 +2623,9 @@ export default defineComponent({
             calcCellWidth();
             autoCellWidth();
             updateStyle();
+            if (reFull) {
+                updateRowOffsetTop();
+            }
             updateRowExpandStyle();
             return computeScrollLoad().then(() => {
                 if (reFull === true) {
@@ -2605,6 +2633,9 @@ export default defineComponent({
                     calcCellWidth();
                     autoCellWidth();
                     updateStyle();
+                    if (reFull) {
+                        updateRowOffsetTop();
+                    }
                     updateRowExpandStyle();
                     return computeScrollLoad();
                 }
@@ -2743,6 +2774,7 @@ export default defineComponent({
                         }
                         reactData.isRowLoading = false;
                         calcCellHeight();
+                        updateRowOffsetTop();
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -2803,16 +2835,16 @@ export default defineComponent({
             cacheColumnMap();
         };
         const loadScrollXData = () => {
-            const { mergeList, mergeFooterList } = reactData;
+            const { mergeList, mergeFooterList, isScrollXBig } = reactData;
             const { scrollXStore } = internalData;
             const { preloadSize, startIndex, endIndex, offsetSize } = scrollXStore;
             const { toVisibleIndex, 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, endIndex: offsetEndIndex } = offsetItem;
             if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -2955,6 +2987,7 @@ export default defineComponent({
             internalData.visibleColumn = visibleColumn;
             handleTableColumn();
             if (isReset) {
+                updateColumnOffsetLeft();
                 return $xeTable.updateFooter().then(() => {
                     return $xeTable.recalculate();
                 }).then(() => {
@@ -3121,18 +3154,18 @@ export default defineComponent({
         /**
          * 纵向 Y 可视渲染处理
          */
-        const loadScrollYData = (scrollTop) => {
-            const { mergeList, isAllOverflow } = reactData;
+        const loadScrollYData = () => {
+            const { mergeList, isAllOverflow, isScrollYBig } = reactData;
             const { scrollYStore } = internalData;
             const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
             const autoOffsetYSize = isAllOverflow ? offsetSize : offsetSize + 1;
-            const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop);
+            const { toVisibleIndex, visibleSize } = 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, endIndex: offsetEndIndex } = offsetItem;
             if (toVisibleIndex <= startIndex || toVisibleIndex >= endIndex - visibleSize - 1) {
@@ -3228,6 +3261,7 @@ export default defineComponent({
                         $xeTable.updateScrollYSpace();
                     });
                 }
+                updateRowExpandStyle();
                 $xeTable.updateCellAreas();
             }, 200);
         };
@@ -3314,48 +3348,75 @@ export default 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 = 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 } = reactData;
+            const { expandColumn, scrollYLoad, scrollYTop, isScrollYBig } = reactData;
             const expandOpts = computeExpandOpts.value;
             const rowOpts = computeRowOpts.value;
             const cellOpts = computeCellOpts.value;
             const defaultRowHeight = computeDefaultRowHeight.value;
             const { mode } = expandOpts;
             if (expandColumn && mode === 'fixed') {
-                const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
+                const { elemStore, fullAllDataRowIdData } = internalData;
                 const rowExpandEl = refRowExpandElem.value;
                 const bodyScrollElem = 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 = 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.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 = 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 = toCssUnit(trEl.offsetTop + trEl.offsetHeight);
+                                    offsetTop = trEl.offsetTop + trEl.offsetHeight;
                                 }
                             }
+                            if (isScrollYBig) {
+                                offsetTop += scrollYTop;
+                            }
+                            expandEl.style.top = toCssUnit(offsetTop);
                             if (!isUpdateHeight) {
                                 if (rowRest.expandHeight !== expandHeight) {
                                     isUpdateHeight = true;
@@ -3366,6 +3427,9 @@ export default defineComponent({
                     });
                     if (isUpdateHeight) {
                         reactData.rowExpandHeightFlag++;
+                        nextTick(() => {
+                            updateRowOffsetTop();
+                        });
                     }
                 }
             }
@@ -4283,6 +4347,7 @@ export default defineComponent({
                     }
                 }
                 return nextTick().then(() => {
+                    updateRowOffsetTop();
                     return { status };
                 });
             },
@@ -5159,12 +5224,12 @@ export default defineComponent({
                 }
                 reactData.rowExpandedMaps = rExpandedMaps;
                 return Promise.all(lazyRests)
-                    .then(() => $xeTable.recalculate())
+                    .then(() => nextTick())
+                    .then(() => $xeTable.recalculate(true))
                     .then(() => {
-                    if (expandColumn) {
-                        updateRowExpandStyle();
-                        handleRowExpandScroll();
-                    }
+                    updateRowOffsetTop();
+                    updateRowExpandStyle();
+                    handleRowExpandScroll();
                     return $xeTable.updateCellAreas();
                 });
             },
@@ -5191,16 +5256,21 @@ export default defineComponent({
                 const { tableFullData } = internalData;
                 const expandOpts = computeExpandOpts.value;
                 const { reserve } = expandOpts;
-                const expList = tableMethods.getRowExpandRecords();
+                const expList = $xeTable.getRowExpandRecords();
                 reactData.rowExpandedMaps = {};
                 if (reserve) {
                     tableFullData.forEach((row) => handleRowExpandReserve(row, false));
                 }
                 return nextTick().then(() => {
                     if (expList.length) {
-                        tableMethods.recalculate();
+                        return $xeTable.recalculate(true);
                     }
-                }).then(() => $xeTable.updateCellAreas());
+                }).then(() => {
+                    updateRowOffsetTop();
+                    updateRowExpandStyle();
+                    handleRowExpandScroll();
+                    return $xeTable.updateCellAreas();
+                });
             },
             clearRowExpandReserve() {
                 internalData.rowExpandedReserveRowMap = {};
@@ -6408,8 +6478,8 @@ export default 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) {
@@ -6418,14 +6488,14 @@ export default 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');
                     }
@@ -6452,7 +6522,7 @@ export default 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;
                         }
@@ -6464,7 +6534,7 @@ export default defineComponent({
                             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');
@@ -6860,7 +6930,7 @@ export default 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;
@@ -6869,8 +6939,8 @@ export default defineComponent({
                         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`;
@@ -7002,7 +7072,7 @@ export default 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) {
@@ -7013,15 +7083,15 @@ export default 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);
@@ -7052,6 +7122,7 @@ export default defineComponent({
                         else {
                             rowRest.resizeHeight = resizeHeight;
                             handleUpdateRowResize(evnt, resizeParams);
+                            updateRowOffsetTop();
                         }
                     }
                     removeClass(tableEl, 'row-drag--resize');
@@ -8491,22 +8562,22 @@ export default 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);
                         }
                     }
@@ -9001,43 +9072,66 @@ export default defineComponent({
             updateScrollYStatus,
             // 更新横向 X 可视渲染上下剩余空间大小
             updateScrollXSpace() {
-                const { isGroup, scrollXLoad, overflowX } = reactData;
-                const { visibleColumn, scrollXStore, elemStore, tableWidth } = internalData;
-                const tableHeader = refTableHeader.value;
+                const { isGroup, scrollXLoad, overflowX, scrollXWidth } = reactData;
+                const { visibleColumn, scrollXStore, elemStore, fullColumnIdData } = internalData;
                 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 = 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 && overflowX) {
-                        marginLeft = `${leftSpaceWidth}px`;
+                        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 = refScrollXSpaceElem.value;
                     if (scrollXSpaceEl) {
-                        scrollXSpaceEl.style.width = `${tableWidth}px`;
+                        scrollXSpaceEl.style.width = `${ySpaceWidth}px`;
                     }
                     nextTick(() => {
                         updateStyle();
@@ -9053,49 +9147,66 @@ export default defineComponent({
                 const rowOpts = computeRowOpts.value;
                 const cellOpts = computeCellOpts.value;
                 const defaultRowHeight = computeDefaultRowHeight.value;
+                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`]);
@@ -9112,6 +9223,9 @@ export default defineComponent({
                 if (rowExpandYSpaceEl) {
                     rowExpandYSpaceEl.style.height = ySpaceHeight ? `${ySpaceHeight}px` : '';
                 }
+                reactData.scrollYTop = scrollYTop;
+                reactData.scrollYHeight = scrollYHeight;
+                reactData.isScrollYBig = isScrollYBig;
                 return nextTick().then(() => {
                     updateStyle();
                 });
@@ -10073,7 +10187,7 @@ export default defineComponent({
                     }
                 }
                 if (treeConfig && rowOpts.drag && !treeOpts.transform) {
-                    warnLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+                    errLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
                 }
                 if (props.dragConfig) {
                     warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);