vxe-table 4.11.14 → 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');
@@ -7998,6 +8069,7 @@ export default defineComponent({
                         const dragParams = {
                             oldRow: dragRow,
                             newRow: prevDragRow,
+                            dragRow,
                             dragPos: prevDragPos,
                             dragToChild: !!prevDragToChild,
                             offsetIndex: dragOffsetIndex
@@ -8138,6 +8210,7 @@ export default defineComponent({
                             dispatchEvent('row-dragend', {
                                 oldRow: dragRow,
                                 newRow: prevDragRow,
+                                dragRow,
                                 dragPos: prevDragPos,
                                 dragToChild: isDragToChildFlag,
                                 offsetIndex: dragOffsetIndex,
@@ -8280,11 +8353,12 @@ export default defineComponent({
                 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
@@ -8297,14 +8371,14 @@ export default defineComponent({
                             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;
                                     }
@@ -8327,7 +8401,7 @@ export default defineComponent({
                                     }
                                 }
                             }
-                            else if (oldColumn.parentId) {
+                            else if (dragColumn.parentId) {
                                 // 子到根
                                 if (!isCrossDrag) {
                                     return;
@@ -8354,17 +8428,17 @@ export default defineComponent({
                             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 {
@@ -8381,12 +8455,12 @@ export default defineComponent({
                                 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;
@@ -8409,8 +8483,9 @@ export default defineComponent({
                                 }
                             }
                             dispatchEvent('column-dragend', {
-                                oldColumn,
+                                oldColumn: dragColumn,
                                 newColumn,
+                                dragColumn,
                                 dragPos: prevDragPos,
                                 dragToChild: isDragToChildFlag,
                                 offsetIndex: dragOffsetIndex,
@@ -8487,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);
                         }
                     }
@@ -8815,7 +8890,7 @@ export default defineComponent({
                 });
             },
             triggerBodyWheelEvent(evnt) {
-                const { target, deltaY, deltaX } = evnt;
+                const { target, deltaY, deltaX, shiftKey } = evnt;
                 if (target && /^textarea$/i.test(target.tagName)) {
                     return;
                 }
@@ -8846,8 +8921,8 @@ export default defineComponent({
                     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;
                 // 如果滚动位置已经是顶部或底部，则不需要触发
@@ -8997,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;
+                    }
+                    if (bodyTableElem) {
+                        bodyTableElem.style.marginLeft = marginLeft;
                     }
-                    bodyElem.style.marginLeft = marginLeft;
-                    if (footerElem) {
-                        footerElem.style.marginLeft = marginLeft;
+                    if (footerTableElem) {
+                        footerTableElem.style.marginLeft = marginLeft;
                     }
+                    reactData.isScrollXBig = isScrollXBig;
                     const containerList = ['main'];
                     containerList.forEach(name => {
                         const layoutList = ['header', 'body', 'footer'];
                         layoutList.forEach(layout => {
                             const xSpaceElem = 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();
@@ -9049,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`]);
@@ -9108,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();
                 });
@@ -9983,7 +10101,7 @@ export default defineComponent({
                 initTpImg();
             }
             nextTick(() => {
-                const { data, treeConfig, showOverflow } = props;
+                const { data, exportConfig, importConfig, treeConfig, showOverflow } = props;
                 const { scrollXStore, scrollYStore } = internalData;
                 const sYOpts = computeSYOpts.value;
                 const editOpts = computeEditOpts.value;
@@ -9992,129 +10110,121 @@ export default defineComponent({
                 const checkboxOpts = computeCheckboxOpts.value;
                 const expandOpts = computeExpandOpts.value;
                 const rowOpts = computeRowOpts.value;
-                if (process.env.NODE_ENV === 'development') {
-                    if (props.rowId) {
-                        warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
-                    }
-                    if (props.rowKey) {
-                        warnLog('vxe.error.delProp', ['row-key', 'row-config.useKey']);
-                    }
-                    if (props.columnKey) {
-                        warnLog('vxe.error.delProp', ['column-id', 'column-config.useKey']);
-                    }
-                    if (!(props.rowId || rowOpts.keyField) && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
-                        warnLog('vxe.error.reqProp', ['row-config.keyField']);
-                    }
-                    if (props.editConfig && (editOpts.showStatus || editOpts.showUpdateStatus || editOpts.showInsertStatus) && !props.keepSource) {
-                        warnLog('vxe.error.reqProp', ['keep-source']);
-                    }
-                    if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(props.rowKey || rowOpts.useKey) || !showOverflow)) {
-                        warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow']);
-                    }
-                    if (treeConfig && !treeOpts.transform && props.stripe) {
-                        warnLog('vxe.error.noTree', ['stripe']);
-                    }
-                    if (props.showFooter && !(props.footerMethod || props.footerData)) {
-                        warnLog('vxe.error.reqProp', ['footer-data | footer-method']);
-                    }
-                    if (rowOpts.height) {
-                        warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
-                    }
-                    // if (props.highlightCurrentRow) {
-                    //   warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent'])
-                    // }
-                    // if (props.highlightHoverRow) {
-                    //   warnLog('vxe.error.delProp', ['highlight-hover-row', 'row-config.isHover'])
-                    // }
-                    // if (props.highlightCurrentColumn) {
-                    //   warnLog('vxe.error.delProp', ['highlight-current-column', 'column-config.isCurrent'])
-                    // }
-                    // if (props.highlightHoverColumn) {
-                    //   warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover'])
-                    // }
-                    // 检查导入导出类型，如果自定义导入导出方法，则不校验类型
-                    const { exportConfig, importConfig } = props;
-                    const exportOpts = computeExportOpts.value;
-                    const importOpts = computeImportOpts.value;
-                    if (importConfig && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(XEUtils.keys(importOpts._typeMaps), importOpts.types)) {
-                        warnLog('vxe.error.errProp', [`export-config.types=${importOpts.types.join(',')}`, importOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(importOpts._typeMaps), type)).join(',') || XEUtils.keys(importOpts._typeMaps).join(',')]);
-                    }
-                    if (exportConfig && exportOpts.types && !exportOpts.exportMethod && !XEUtils.includeArrays(XEUtils.keys(exportOpts._typeMaps), exportOpts.types)) {
-                        warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')]);
-                    }
+                const customOpts = computeCustomOpts.value;
+                const mouseOpts = computeMouseOpts.value;
+                const exportOpts = computeExportOpts.value;
+                const importOpts = computeImportOpts.value;
+                if (props.rowId) {
+                    warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
                 }
-                if (process.env.NODE_ENV === 'development') {
-                    const customOpts = computeCustomOpts.value;
-                    const mouseOpts = computeMouseOpts.value;
-                    const rowOpts = computeRowOpts.value;
-                    if (!props.id) {
-                        if ((props.customConfig ? isEnableConf(customOpts) : customOpts.enabled) && customOpts.storage) {
-                            errLog('vxe.error.reqProp', ['id']);
-                        }
-                    }
-                    if (props.treeConfig && checkboxOpts.range) {
-                        errLog('vxe.error.noTree', ['checkbox-config.range']);
-                    }
-                    if (rowOpts.height && !props.showOverflow) {
-                        warnLog('vxe.error.notProp', ['table.show-overflow']);
-                    }
-                    if (!$xeTable.handleMousedownCellAreaEvent) {
-                        if (props.areaConfig) {
-                            warnLog('vxe.error.notProp', ['area-config']);
-                        }
-                        if (props.clipConfig) {
-                            warnLog('vxe.error.notProp', ['clip-config']);
-                        }
-                        if (props.fnrConfig) {
-                            warnLog('vxe.error.notProp', ['fnr-config']);
-                        }
-                        if (mouseOpts.area) {
-                            errLog('vxe.error.notProp', ['mouse-config.area']);
-                            return;
-                        }
-                    }
-                    if (props.dragConfig) {
-                        warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);
-                    }
-                    if (props.treeConfig && treeOpts.children) {
-                        warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
-                    }
-                    if (props.treeConfig && treeOpts.line) {
-                        warnLog('vxe.error.delProp', ['tree-config.line', 'tree-config.showLine']);
-                    }
-                    if (mouseOpts.area && mouseOpts.selected) {
-                        warnLog('vxe.error.errConflicts', ['mouse-config.area', 'mouse-config.selected']);
+                if (props.rowKey) {
+                    warnLog('vxe.error.delProp', ['row-key', 'row-config.useKey']);
+                }
+                if (props.columnKey) {
+                    warnLog('vxe.error.delProp', ['column-id', 'column-config.useKey']);
+                }
+                if (!(props.rowId || rowOpts.keyField) && (checkboxOpts.reserve || checkboxOpts.checkRowKeys || radioOpts.reserve || radioOpts.checkRowKey || expandOpts.expandRowKeys || treeOpts.expandRowKeys)) {
+                    warnLog('vxe.error.reqProp', ['row-config.keyField']);
+                }
+                if (props.editConfig && (editOpts.showStatus || editOpts.showUpdateStatus || editOpts.showInsertStatus) && !props.keepSource) {
+                    warnLog('vxe.error.reqProp', ['keep-source']);
+                }
+                if (treeConfig && (treeOpts.showLine || treeOpts.line) && (!(props.rowKey || rowOpts.useKey) || !showOverflow)) {
+                    warnLog('vxe.error.reqProp', ['row-config.useKey | show-overflow']);
+                }
+                if (treeConfig && !treeOpts.transform && props.stripe) {
+                    warnLog('vxe.error.noTree', ['stripe']);
+                }
+                if (props.showFooter && !(props.footerMethod || props.footerData)) {
+                    warnLog('vxe.error.reqProp', ['footer-data | footer-method']);
+                }
+                if (rowOpts.height) {
+                    warnLog('vxe.error.delProp', ['row-config.height', 'cell-config.height']);
+                }
+                if (props.highlightCurrentRow) {
+                    warnLog('vxe.error.delProp', ['highlight-current-row', 'row-config.isCurrent']);
+                }
+                if (props.highlightHoverRow) {
+                    warnLog('vxe.error.delProp', ['highlight-hover-row', 'row-config.isHover']);
+                }
+                if (props.highlightCurrentColumn) {
+                    warnLog('vxe.error.delProp', ['highlight-current-column', 'column-config.isCurrent']);
+                }
+                if (props.highlightHoverColumn) {
+                    warnLog('vxe.error.delProp', ['highlight-hover-column', 'column-config.isHover']);
+                }
+                // 检查导入导出类型，如果自定义导入导出方法，则不校验类型
+                if (importConfig && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(XEUtils.keys(importOpts._typeMaps), importOpts.types)) {
+                    warnLog('vxe.error.errProp', [`export-config.types=${importOpts.types.join(',')}`, importOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(importOpts._typeMaps), type)).join(',') || XEUtils.keys(importOpts._typeMaps).join(',')]);
+                }
+                if (exportConfig && exportOpts.types && !exportOpts.exportMethod && !XEUtils.includeArrays(XEUtils.keys(exportOpts._typeMaps), exportOpts.types)) {
+                    warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')]);
+                }
+                if (!props.id) {
+                    if ((props.customConfig ? isEnableConf(customOpts) : customOpts.enabled) && customOpts.storage) {
+                        errLog('vxe.error.reqProp', ['id']);
                     }
-                    // if (mouseOpts.area && checkboxOpts.range) {
-                    //   warnLog('vxe.error.errConflicts', ['mouse-config.area', 'checkbox-config.range'])
-                    // }
-                    if (mouseOpts.area && (props.treeConfig && !treeOpts.transform)) {
-                        errLog('vxe.error.noTree', ['mouse-config.area']);
+                }
+                if (props.treeConfig && checkboxOpts.range) {
+                    errLog('vxe.error.noTree', ['checkbox-config.range']);
+                }
+                if (rowOpts.height && !props.showOverflow) {
+                    warnLog('vxe.error.notProp', ['table.show-overflow']);
+                }
+                if (!$xeTable.handleMousedownCellAreaEvent) {
+                    if (props.areaConfig) {
+                        warnLog('vxe.error.notProp', ['area-config']);
                     }
-                    if (props.editConfig && editOpts.activeMethod) {
-                        warnLog('vxe.error.delProp', ['edit-config.activeMethod', 'edit-config.beforeEditMethod']);
+                    if (props.clipConfig) {
+                        warnLog('vxe.error.notProp', ['clip-config']);
                     }
-                    if (props.treeConfig && checkboxOpts.isShiftKey) {
-                        errLog('vxe.error.errConflicts', ['tree-config', 'checkbox-config.isShiftKey']);
+                    if (props.fnrConfig) {
+                        warnLog('vxe.error.notProp', ['fnr-config']);
                     }
-                    if (checkboxOpts.halfField) {
-                        warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField']);
+                    if (mouseOpts.area) {
+                        errLog('vxe.error.notProp', ['mouse-config.area']);
+                        return;
                     }
                 }
+                if (treeConfig && rowOpts.drag && !treeOpts.transform) {
+                    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']);
+                }
+                if (props.treeConfig && treeOpts.children) {
+                    warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
+                }
+                if (props.treeConfig && treeOpts.line) {
+                    warnLog('vxe.error.delProp', ['tree-config.line', 'tree-config.showLine']);
+                }
+                if (mouseOpts.area && mouseOpts.selected) {
+                    warnLog('vxe.error.errConflicts', ['mouse-config.area', 'mouse-config.selected']);
+                }
+                if (mouseOpts.area && (props.treeConfig && !treeOpts.transform)) {
+                    errLog('vxe.error.noTree', ['mouse-config.area']);
+                }
+                if (props.editConfig && editOpts.activeMethod) {
+                    warnLog('vxe.error.delProp', ['edit-config.activeMethod', 'edit-config.beforeEditMethod']);
+                }
+                if (props.treeConfig && checkboxOpts.isShiftKey) {
+                    errLog('vxe.error.errConflicts', ['tree-config', 'checkbox-config.isShiftKey']);
+                }
+                if (checkboxOpts.halfField) {
+                    warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField']);
+                }
                 // 检查是否有安装需要的模块
-                if (process.env.NODE_ENV === 'development') {
-                    if (props.editConfig && !$xeTable.insert) {
-                        errLog('vxe.error.reqModule', ['Edit']);
-                    }
-                    if (props.editRules && !$xeTable.validate) {
-                        errLog('vxe.error.reqModule', ['Validator']);
-                    }
-                    if ((checkboxOpts.range || props.keyboardConfig || props.mouseConfig) && !$xeTable.handleCellMousedownEvent) {
-                        errLog('vxe.error.reqModule', ['Keyboard']);
-                    }
-                    if ((props.printConfig || props.importConfig || props.exportConfig) && !$xeTable.exportData) {
-                        errLog('vxe.error.reqModule', ['Export']);
-                    }
+                if (props.editConfig && !$xeTable.insert) {
+                    errLog('vxe.error.reqModule', ['Edit']);
+                }
+                if (props.editRules && !$xeTable.validate) {
+                    errLog('vxe.error.reqModule', ['Validator']);
+                }
+                if ((checkboxOpts.range || props.keyboardConfig || props.mouseConfig) && !$xeTable.handleCellMousedownEvent) {
+                    errLog('vxe.error.reqModule', ['Keyboard']);
+                }
+                if ((props.printConfig || props.importConfig || props.exportConfig) && !$xeTable.exportData) {
+                    errLog('vxe.error.reqModule', ['Export']);
                 }
                 Object.assign(scrollYStore, {
                     startIndex: 0,