vxe-table 4.10.6-beta.7 → 4.10.6-beta.9

package/lib/index.umd.js

@@ -3138,7 +3138,7 @@ function eqEmptyValue(cellValue) {
 ;// ./packages/ui/index.ts
 
 
-const version = "4.10.6-beta.7";
+const version = "4.10.6-beta.9";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3312,13 +3312,15 @@ core_.VxeUI.setConfig({
     },
     virtualXConfig: {
       // enabled: false,
-      gt: 60
-      // oSize: 0
+      gt: 60,
+      preSize: 0,
+      oSize: 1
     },
     virtualYConfig: {
       // enabled: false,
-      gt: 100
-      // oSize: 0
+      gt: 100,
+      preSize: 1,
+      oSize: 2
     },
     scrollbarConfig: {
       width: 10,
@@ -3568,7 +3570,7 @@ var esnext_iterator_some = __webpack_require__(7550);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.10.6-beta.7"}`;
+const log_version = `table v${"4.10.6-beta.9"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// ./packages/table/src/columnInfo.ts
@@ -6449,6 +6451,26 @@ const renderType = 'body';
       if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
         isDirty = $xeTable.isUpdateByRow(row, column.field);
       }
+      const isVNAutoHeight = scrollYLoad && !hasEllipsis;
+      let cellHeight = 0;
+      const vnHeight = isCalcCellHeight ? rest.height : 0;
+      if (hasEllipsis) {
+        if (customRHeight) {
+          cellHeight = customRHeight;
+        } else if (!isAllOverflow) {
+          cellHeight = vnHeight || defaultRowHeight || 18;
+        }
+      } else {
+        cellHeight = vnHeight || defaultRowHeight || 18;
+      }
+      const tcStyle = {};
+      if (cellHeight) {
+        if (hasEllipsis) {
+          tcStyle.maxHeight = `${cellHeight}px`;
+        } else if (isVNAutoHeight) {
+          tcStyle.height = `${cellHeight}px`;
+        }
+      }
       const tdVNs = [];
       if (fixedHiddenColumn && (allColumnOverflow ? isAllOverflow : allColumnOverflow)) {
         tdVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -6457,9 +6479,7 @@ const renderType = 'body';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }],
-          style: {
-            maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-          }
+          style: tcStyle
         }));
       } else {
         // 渲染单元格
@@ -6469,11 +6489,11 @@ const renderType = 'body';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }],
-          style: {
-            maxHeight: hasEllipsis && (customRHeight || defaultRowHeight) ? `${customRHeight || defaultRowHeight}px` : ''
-          },
+          style: tcStyle,
           title: showTitle ? $xeTable.getCellLabel(row, column) : null
-        }, column.renderCell(params)));
+        }, isVNAutoHeight ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-cell--auto-wrapper'
+        }, column.renderCell(params))] : column.renderCell(params)));
         if (showValidTip && errorValidItem) {
           const errRule = errorValidItem.rule;
           const validSlot = slots ? slots.valid : null;
@@ -6494,17 +6514,6 @@ const renderType = 'body';
           }, errorValidItem.content)]])]));
         }
       }
-      let cellHeight = '';
-      const vnHeight = isCalcCellHeight ? rest.height : 0;
-      if (hasEllipsis) {
-        if (customRHeight) {
-          cellHeight = `${customRHeight}px`;
-        } else if (!isAllOverflow) {
-          cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
-        }
-      } else {
-        cellHeight = `${vnHeight || defaultRowHeight || 18}px`;
-      }
       if (mouseConfig && mouseOpts.area && selectCellToRow) {
         if (!$columnIndex && selectCellToRow === true || selectCellToRow === column.field) {
           tdVNs.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
@@ -6514,11 +6523,11 @@ const renderType = 'body';
       }
       const isLastColumn = $columnIndex === columns.length - 1;
       const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-      let isPreLoadStatus = false;
-      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex || _rowIndex > scrollYStore.visibleEndIndex)) {
-        isPreLoadStatus = true;
-      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-        isPreLoadStatus = true;
+      let isVNPreEmptyStatus = false;
+      if (scrollYLoad && (_rowIndex < scrollYStore.visibleStartIndex - scrollYStore.preloadSize || _rowIndex > scrollYStore.visibleEndIndex + scrollYStore.preloadSize)) {
+        isVNPreEmptyStatus = true;
+      } else if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+        isVNPreEmptyStatus = true;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
         class: ['vxe-body--column', colid, {
@@ -6529,6 +6538,7 @@ const renderType = 'body';
           'col--tree-node': treeNode,
           'col--edit': isEdit,
           'col--ellipsis': hasEllipsis,
+          'col--auto-height': isVNAutoHeight,
           'fixed--width': !isAutoCellWidth,
           'fixed--hidden': fixedHiddenColumn,
           'is--drag-cell': isRowDragCell && (isCrossDrag || isPeerDrag || !rowLevel),
@@ -6541,10 +6551,10 @@ const renderType = 'body';
         key: columnKey || scrollXLoad || scrollYLoad || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
-          height: cellHeight
+          height: cellHeight ? `${cellHeight}px` : ''
         }, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(compCellStyle) ? compCellStyle(params) : compCellStyle, external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(cellStyle) ? cellStyle(params) : cellStyle),
         ...tdOns
-      }, isPreLoadStatus || isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
+      }, isVNPreEmptyStatus || isOptimizeMode && fixedHiddenColumn ? [] : tdVNs);
     };
     const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
       const {
@@ -7028,7 +7038,8 @@ const header_renderType = 'header';
     const {
       computeColumnOpts,
       computeColumnDragOpts,
-      computeResizableOpts
+      computeResizableOpts,
+      computeScrollbarXToTop
     } = $xeTable.getComputeMaps();
     const headerColumn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)([]);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -7051,6 +7062,9 @@ const header_renderType = 'header';
       const {
         fixedType
       } = props;
+      const {
+        scrollbarHeight
+      } = tableReactData;
       const {
         elemStore,
         visibleColumn
@@ -7061,6 +7075,7 @@ const header_renderType = 'header';
       const rightContainerElem = refRightContainer.value;
       const resizeBarElem = refCellResizeBar.value;
       const resizeTipElem = refCellResizeTip.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
       const {
         clientX: dragClientX
       } = evnt;
@@ -7112,6 +7127,7 @@ const header_renderType = 'header';
       const updateEvent = evnt => {
         evnt.stopPropagation();
         evnt.preventDefault();
+        const tableHeight = tableEl.clientHeight;
         const offsetX = evnt.clientX - dragClientX;
         let left = dragPosLeft + offsetX;
         const scrollLeft = fixedType ? 0 : bodyScrollElem.scrollLeft;
@@ -7129,6 +7145,8 @@ const header_renderType = 'header';
         dragLeft = Math.max(left, dragMinLeft);
         const resizeBarLeft = Math.max(1, dragLeft - scrollLeft);
         resizeBarElem.style.left = `${resizeBarLeft}px`;
+        resizeBarElem.style.top = `${scrollbarXToTop ? scrollbarHeight : 0}px`;
+        resizeBarElem.style.height = `${scrollbarXToTop ? tableHeight - scrollbarHeight : tableHeight}px`;
         if (resizableOpts.showDragTip && resizeTipElem) {
           const tableWidth = tableEl.clientWidth;
           const wrapperRect = wrapperElem.getBoundingClientRect();
@@ -7142,7 +7160,7 @@ const header_renderType = 'header';
             resizeTipLeft += tableWidth - resizeBarLeft;
           }
           resizeTipElem.style.left = `${resizeTipLeft}px`;
-          resizeTipElem.style.top = `${Math.min(tableEl.clientHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
+          resizeTipElem.style.top = `${Math.min(tableHeight - resizeTipHeight, Math.max(0, evnt.clientY - wrapperRect.y - resizeTipHeight / 2))}px`;
           resizeTipElem.textContent = header_getI18n('vxe.table.resizeColTip', [resizeColumn.renderWidth + (isRightFixed ? dragPosLeft - dragLeft : dragLeft - dragPosLeft)]);
         }
       };
@@ -7293,9 +7311,9 @@ const header_renderType = 'header';
         const isLastColumn = $columnIndex === cols.length - 1;
         const showResizable = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-        let isPreLoadStatus = false;
-        if (scrollXLoad && !isGroup && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true;
+        let isVNPreEmptyStatus = false;
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true;
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
           class: ['vxe-header--column', colid, {
@@ -7324,7 +7342,7 @@ const header_renderType = 'header';
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }]
-        }, isPreLoadStatus || isOptimizeMode && fixedHiddenColumn ? [] : column.renderHeader(params)),
+        }, isVNPreEmptyStatus || isOptimizeMode && fixedHiddenColumn ? [] : column.renderHeader(params)),
         /**
          * 列宽拖动
          */
@@ -7746,9 +7764,9 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         }
         const isLastColumn = $columnIndex === tableColumn.length - 1;
         const isAutoCellWidth = !column.resizeWidth && (column.minWidth === 'auto' || column.width === 'auto');
-        let isPreLoadStatus = false;
-        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex || _columnIndex > scrollXStore.visibleEndIndex)) {
-          isPreLoadStatus = true;
+        let isVNPreEmptyStatus = false;
+        if (scrollXLoad && !column.fixed && (_columnIndex < scrollXStore.visibleStartIndex - scrollXStore.preloadSize || _columnIndex > scrollXStore.visibleEndIndex + scrollXStore.preloadSize)) {
+          isVNPreEmptyStatus = true;
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
           class: ['vxe-footer--column', column.id, {
@@ -7770,7 +7788,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
             'c--tooltip': showTooltip,
             'c--ellipsis': showEllipsis
           }]
-        }, isPreLoadStatus ? [] : column.renderFooter(cellParams))]);
+        }, isVNPreEmptyStatus ? [] : column.renderFooter(cellParams))]);
       });
     };
     const renderHeads = renderColumnList => {
@@ -10659,9 +10677,12 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const refScrollXVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXHandleElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refScrollXLeftCornerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXRightCornerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYHandleElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYTopCornerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refScrollXWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refScrollYWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYBottomCornerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXSpaceElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYSpaceElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -10718,6 +10739,14 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarXToTop = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+    });
+    const computeScrollbarYToLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+    });
     const computeScrollYThreshold = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const sYOpts = computeSYOpts.value;
       const {
@@ -11022,6 +11051,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXToTop,
+      computeScrollbarYToLeft,
       computeColumnOpts,
       computeScrollXThreshold,
       computeScrollYThreshold,
@@ -11177,29 +11208,36 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       };
     };
     const computeRowHeight = () => {
+      const {
+        showOverflow
+      } = props;
       const tableHeader = refTableHeader.value;
       const tableBody = refTableBody.value;
       const tableBodyElem = tableBody ? tableBody.$el : null;
       const defaultRowHeight = computeDefaultRowHeight.value;
       let rowHeight = 0;
-      if (tableBodyElem) {
-        const tableHeaderElem = tableHeader ? tableHeader.$el : null;
-        let firstTrElem;
-        firstTrElem = tableBodyElem.querySelector('tr');
-        if (!firstTrElem && tableHeaderElem) {
-          firstTrElem = tableHeaderElem.querySelector('tr');
+      if (showOverflow) {
+        if (tableBodyElem) {
+          const tableHeaderElem = tableHeader ? tableHeader.$el : null;
+          let firstTrElem;
+          firstTrElem = tableBodyElem.querySelector('tr');
+          if (!firstTrElem && tableHeaderElem) {
+            firstTrElem = tableHeaderElem.querySelector('tr');
+          }
+          if (firstTrElem) {
+            rowHeight = firstTrElem.clientHeight;
+          }
         }
-        if (firstTrElem) {
-          rowHeight = firstTrElem.clientHeight;
+        if (!rowHeight) {
+          rowHeight = defaultRowHeight;
         }
-      }
-      if (!rowHeight) {
+      } else {
         rowHeight = defaultRowHeight;
       }
       // 最低支持 18px 行高
       return Math.max(18, rowHeight);
     };
-    const handleVirtualYVisible = () => {
+    const handleVirtualYVisible = currScrollTop => {
       const {
         showOverflow
       } = props;
@@ -11213,10 +11251,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       } = internalData;
       const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
-        const {
-          scrollTop,
-          clientHeight
-        } = bodyScrollElem;
+        const clientHeight = bodyScrollElem.clientHeight;
+        const scrollTop = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
         const endHeight = scrollTop + clientHeight;
         let toVisibleIndex = -1;
         let offsetTop = 0;
@@ -11848,7 +11884,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         tableData.forEach(row => {
           const rowid = getRowid($xeTable, row);
           const rowRest = fullAllDataRowIdData[rowid];
-          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`);
+          const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell>.vxe-cell--auto-wrapper`);
           if (rowRest && cellList.length) {
             let height = 0;
             for (let i = 0; i < cellList.length; i++) {
@@ -12311,19 +12347,26 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         }
         bodyHeight = Math.max(bodyMinHeight, bodyHeight);
       }
+      const xLeftCornerEl = refScrollXLeftCornerElem.value;
+      const xRightCornerEl = refScrollXRightCornerElem.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
       const scrollXVirtualEl = refScrollXVirtualElem.value;
       if (scrollXVirtualEl) {
         scrollXVirtualEl.style.height = `${scrollbarHeight}px`;
         scrollXVirtualEl.style.visibility = scrollbarHeight ? 'visible' : 'hidden';
       }
-      const xHandleEl = refScrollXHandleElem.value;
-      if (xHandleEl) {
-        xHandleEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+      const xWrapperEl = refScrollXWrapperElem.value;
+      if (xWrapperEl) {
+        xWrapperEl.style.left = scrollbarXToTop ? `${scrollbarWidth}px` : '';
+        xWrapperEl.style.width = `${el.clientWidth - scrollbarWidth}px`;
+      }
+      if (xLeftCornerEl) {
+        xLeftCornerEl.style.width = scrollbarXToTop ? `${scrollbarWidth}px` : '';
+        xLeftCornerEl.style.display = scrollbarXToTop ? scrollbarWidth && scrollbarHeight ? 'block' : '' : '';
       }
-      const xRightCornerEl = refScrollXRightCornerElem.value;
       if (xRightCornerEl) {
-        xRightCornerEl.style.width = `${scrollbarWidth}px`;
-        xRightCornerEl.style.display = scrollbarWidth && scrollbarHeight ? 'block' : '';
+        xRightCornerEl.style.width = scrollbarXToTop ? '' : `${scrollbarWidth}px`;
+        xRightCornerEl.style.display = scrollbarXToTop ? '' : scrollbarWidth && scrollbarHeight ? 'block' : '';
       }
       const scrollYVirtualEl = refScrollYVirtualElem.value;
       if (scrollYVirtualEl) {
@@ -12336,10 +12379,10 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         yTopCornerEl.style.height = `${headerHeight}px`;
         yTopCornerEl.style.display = headerHeight ? 'block' : '';
       }
-      const yHandleEl = refScrollYHandleElem.value;
-      if (yHandleEl) {
-        yHandleEl.style.height = `${bodyHeight}px`;
-        yHandleEl.style.top = `${headerHeight}px`;
+      const yWrapperEl = refScrollYWrapperElem.value;
+      if (yWrapperEl) {
+        yWrapperEl.style.height = `${bodyHeight}px`;
+        yWrapperEl.style.top = `${headerHeight}px`;
       }
       const yBottomCornerEl = refScrollYBottomCornerElem.value;
       if (yBottomCornerEl) {
@@ -13168,16 +13211,16 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           scrollXStore,
           scrollYStore
         } = internalData;
-        const sYOpts = computeSYOpts.value;
-        const sXOpts = computeSXOpts.value;
+        const virtualYOpts = computeVirtualYOpts.value;
+        const virtualXOpts = computeVirtualXOpts.value;
         // 计算 X 逻辑
         if (scrollXLoad) {
           const {
             toVisibleIndex: toXVisibleIndex,
             visibleSize: visibleXSize
           } = handleVirtualXVisible();
-          const offsetXSize = Math.max(0, sXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sXOpts.oSize) : 0);
-          scrollXStore.preloadSize = 4;
+          const offsetXSize = Math.max(0, virtualXOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualXOpts.oSize) : 0);
+          scrollXStore.preloadSize = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualXOpts.preSize);
           scrollXStore.offsetSize = offsetXSize;
           scrollXStore.visibleSize = visibleXSize;
           scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -13189,7 +13232,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         } else {
           $xeTable.updateScrollXSpace();
         }
-        calcCellHeight();
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight();
         scrollYStore.rowHeight = rowHeight;
@@ -13199,8 +13241,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           visibleSize: visibleYSize
         } = handleVirtualYVisible();
         if (scrollYLoad) {
-          const offsetYSize = Math.max(0, sYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(sYOpts.oSize) : 0);
-          scrollYStore.preloadSize = 2;
+          const offsetYSize = Math.max(0, virtualYOpts.oSize ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.oSize) : 0);
+          scrollYStore.preloadSize = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(virtualYOpts.preSize);
           scrollYStore.offsetSize = offsetYSize;
           scrollYStore.visibleSize = visibleYSize;
           scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -13229,7 +13271,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       return computeScrollLoad().then(() => {
         if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellHeight();
           calcCellWidth();
           autoCellWidth();
           updateStyle();
@@ -13375,6 +13416,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             if (sYOpts.scrollToTopOnChange) {
               targetScrollTop = 0;
             }
+            calcCellHeight();
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -13807,7 +13849,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = () => {
+    const loadScrollYData = scrollTop => {
       const {
         showOverflow
       } = props;
@@ -13827,7 +13869,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const {
         toVisibleIndex,
         visibleSize
-      } = handleVirtualYVisible();
+      } = handleVirtualYVisible(scrollTop);
       const offsetItem = {
         startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
         endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -13900,18 +13942,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }, fpsTime);
     };
     const lazyScrollYData = () => {
-      const {
-        showOverflow
-      } = props;
       const {
         lyTimeout,
-        lyRunTime,
-        scrollYStore
+        lyRunTime
       } = internalData;
-      const {
-        visibleSize
-      } = scrollYStore;
-      const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
+      const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)));
       if (lyTimeout) {
         clearTimeout(lyTimeout);
       }
@@ -13925,86 +13960,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         loadScrollYData();
       }, fpsTime);
     };
-    const scrollXEvent = evnt => {
-      const {
-        elemStore,
-        inWheelScroll,
-        lastScrollTop,
-        inHeaderScroll,
-        inBodyScroll,
-        inFooterScroll
-      } = internalData;
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return;
-      }
-      if (inWheelScroll) {
-        return;
-      }
-      const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-      const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
-      const yHandleEl = refScrollYHandleElem.value;
-      const wrapperEl = evnt.currentTarget;
-      const {
-        scrollLeft
-      } = wrapperEl;
-      const yBodyEl = yHandleEl || bodyScrollElem;
-      let scrollTop = 0;
-      if (yBodyEl) {
-        scrollTop = yBodyEl.scrollTop;
-      }
-      const isRollX = true;
-      const isRollY = scrollTop !== lastScrollTop;
-      internalData.inVirtualScroll = true;
-      setScrollLeft(bodyScrollElem, scrollLeft);
-      setScrollLeft(headerScrollElem, scrollLeft);
-      setScrollLeft(footerScrollElem, scrollLeft);
-      $xeTable.triggerScrollXEvent(evnt);
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      });
-    };
-    const scrollYEvent = evnt => {
-      const {
-        elemStore,
-        inWheelScroll,
-        lastScrollLeft,
-        inHeaderScroll,
-        inBodyScroll,
-        inFooterScroll
-      } = internalData;
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return;
-      }
-      if (inWheelScroll) {
-        return;
-      }
-      const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
-      const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
-      const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
-      const xHandleEl = refScrollXHandleElem.value;
-      const wrapperEl = evnt.currentTarget;
-      const {
-        scrollTop
-      } = wrapperEl;
-      const xBodyEl = xHandleEl || bodyScrollElem;
-      let scrollLeft = 0;
-      if (xBodyEl) {
-        scrollLeft = xBodyEl.scrollLeft;
-      }
-      const isRollX = scrollLeft !== lastScrollLeft;
-      const isRollY = true;
-      internalData.inVirtualScroll = true;
-      setScrollTop(bodyScrollElem, scrollTop);
-      setScrollTop(leftScrollElem, scrollTop);
-      setScrollTop(rightScrollElem, scrollTop);
-      $xeTable.triggerScrollYEvent(evnt);
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      });
-    };
     const checkLastSyncScroll = (isRollX, isRollY) => {
       const {
         scrollXLoad,
@@ -14025,16 +13980,14 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         internalData.inBodyScroll = false;
         internalData.inFooterScroll = false;
         internalData.scrollRenderType = '';
+        calcCellHeight();
         if (isRollX && scrollXLoad) {
-          $xeTable.updateScrollXData().then(() => {
-            calcCellHeight();
-            loadScrollXData();
-          });
+          $xeTable.updateScrollXData();
         }
         if (isRollY && scrollYLoad) {
           $xeTable.updateScrollYData().then(() => {
             calcCellHeight();
-            loadScrollYData();
+            $xeTable.updateScrollYSpace();
           });
         }
         $xeTable.updateCellAreas();
@@ -14056,6 +14009,12 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
+    function handleUupdateResize() {
+      const el = refElem.value;
+      if (el && el.clientWidth && el.clientHeight) {
+        tableMethods.recalculate();
+      }
+    }
     tableMethods = {
       dispatchEvent,
       /**
@@ -17408,6 +17367,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         const rdLineEl = refDragRowLineElem.value;
         if (rdLineEl) {
           if (showLine) {
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
             const trRect = trEl.getBoundingClientRect();
             let trHeight = trEl.clientHeight;
             const offsetTop = Math.max(1, trRect.y - wrapperRect.y);
@@ -17415,6 +17375,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               trHeight = tableHeight - offsetTop - scrollbarHeight;
             }
             rdLineEl.style.display = 'block';
+            rdLineEl.style.left = `${scrollbarYToLeft ? scrollbarWidth : 0}px`;
             rdLineEl.style.top = `${offsetTop}px`;
             rdLineEl.style.height = `${trHeight}px`;
             rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`;
@@ -17428,6 +17389,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         const cdLineEl = refDragColLineElem.value;
         if (cdLineEl) {
           if (showLine) {
+            const scrollbarXToTop = computeScrollbarXToTop.value;
             const leftContainerElem = refLeftContainer.value;
             const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0;
             const rightContainerElem = refRightContainer.value;
@@ -17452,7 +17414,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             if (prevDragToChild) {
               cdLineEl.style.height = `${thRect.height}px`;
             } else {
-              cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`;
+              cdLineEl.style.height = `${tableHeight - offsetTop - (scrollbarXToTop ? 0 : scrollbarHeight)}px`;
             }
             cdLineEl.setAttribute('drag-pos', dragPos);
             cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n');
@@ -19912,13 +19874,93 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           setScrollTop(bodyScrollElem, scrollTop);
           setScrollTop(leftScrollElem, scrollTop);
           setScrollTop(rightScrollElem, scrollTop);
-          $xeTable.triggerScrollYEvent(evnt);
+          loadScrollYData(scrollTop);
           $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-            type: 'footer',
+            type: 'table',
             fixed: ''
           });
         }
       },
+      triggerVirtualScrollXEvent(evnt) {
+        const {
+          elemStore,
+          inWheelScroll,
+          lastScrollTop,
+          inHeaderScroll,
+          inBodyScroll,
+          inFooterScroll
+        } = internalData;
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return;
+        }
+        if (inWheelScroll) {
+          return;
+        }
+        const headerScrollElem = getRefElem(elemStore['main-header-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const footerScrollElem = getRefElem(elemStore['main-footer-scroll']);
+        const yHandleEl = refScrollYHandleElem.value;
+        const wrapperEl = evnt.currentTarget;
+        const {
+          scrollLeft
+        } = wrapperEl;
+        const yBodyEl = yHandleEl || bodyScrollElem;
+        let scrollTop = 0;
+        if (yBodyEl) {
+          scrollTop = yBodyEl.scrollTop;
+        }
+        const isRollX = true;
+        const isRollY = scrollTop !== lastScrollTop;
+        internalData.inVirtualScroll = true;
+        setScrollLeft(bodyScrollElem, scrollLeft);
+        setScrollLeft(headerScrollElem, scrollLeft);
+        setScrollLeft(footerScrollElem, scrollLeft);
+        $xeTable.triggerScrollXEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        });
+      },
+      triggerVirtualScrollYEvent(evnt) {
+        const {
+          elemStore,
+          inWheelScroll,
+          lastScrollLeft,
+          inHeaderScroll,
+          inBodyScroll,
+          inFooterScroll
+        } = internalData;
+        if (inHeaderScroll || inBodyScroll || inFooterScroll) {
+          return;
+        }
+        if (inWheelScroll) {
+          return;
+        }
+        const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
+        const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+        const rightScrollElem = getRefElem(elemStore['right-body-scroll']);
+        const xHandleEl = refScrollXHandleElem.value;
+        const wrapperEl = evnt.currentTarget;
+        const {
+          scrollTop
+        } = wrapperEl;
+        const xBodyEl = xHandleEl || bodyScrollElem;
+        let scrollLeft = 0;
+        if (xBodyEl) {
+          scrollLeft = xBodyEl.scrollLeft;
+        }
+        const isRollX = scrollLeft !== lastScrollLeft;
+        const isRollY = true;
+        internalData.inVirtualScroll = true;
+        setScrollTop(bodyScrollElem, scrollTop);
+        setScrollTop(leftScrollElem, scrollTop);
+        setScrollTop(rightScrollElem, scrollTop);
+        $xeTable.triggerScrollYEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        });
+      },
       /**
        * 对于树形结构中，可以直接滚动到指定深层节点中
        * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -20078,9 +20120,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           showOverflow
         } = props;
         handleTableColumn();
-        // calcCellHeight()
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          // calcCellHeight()
           handleTableColumn();
           $xeTable.updateScrollXSpace();
           if (!showOverflow) {
@@ -20090,9 +20130,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       },
       updateScrollYData() {
         $xeTable.handleTableData();
-        // calcCellHeight()
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
-          // calcCellHeight()
           $xeTable.handleTableData();
           $xeTable.updateScrollYSpace();
         });
@@ -20319,12 +20357,108 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }
       return table_renderEmptyElement($xeTable);
     };
-    function handleUupdateResize() {
-      const el = refElem.value;
-      if (el && el.clientWidth && el.clientHeight) {
-        tableMethods.recalculate();
-      }
-    }
+    const renderScrollX = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        key: 'vsx',
+        ref: refScrollXVirtualElem,
+        class: 'vxe-table--scroll-x-virtual'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollXLeftCornerElem,
+        class: 'vxe-table--scroll-x-left-corner'
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollXWrapperElem,
+        class: 'vxe-table--scroll-x-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollXHandleElem,
+        class: 'vxe-table--scroll-x-handle',
+        onScroll: $xeTable.triggerVirtualScrollXEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollXSpaceElem,
+        class: 'vxe-table--scroll-x-space'
+      })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollXRightCornerElem,
+        class: 'vxe-table--scroll-x-right-corner'
+      })]);
+    };
+    const renderScrollY = () => {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYVirtualElem,
+        class: 'vxe-table--scroll-y-virtual'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYTopCornerElem,
+        class: 'vxe-table--scroll-y-top-corner'
+      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYWrapperElem,
+        class: 'vxe-table--scroll-y-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYHandleElem,
+        class: 'vxe-table--scroll-y-handle',
+        onScroll: $xeTable.triggerVirtualScrollYEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYSpaceElem,
+        class: 'vxe-table--scroll-y-space'
+      })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refScrollYBottomCornerElem,
+        class: 'vxe-table--scroll-y-bottom-corner'
+      })]);
+    };
+    const renderViewport = () => {
+      const {
+        showHeader,
+        showFooter
+      } = props;
+      const {
+        overflowX,
+        tableData,
+        tableColumn,
+        tableGroupColumn,
+        footerTableData,
+        columnStore
+      } = reactData;
+      const {
+        leftList,
+        rightList
+      } = columnStore;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTableViewportElem,
+        class: 'vxe-table--viewport-wrapper'
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table--main-wrapper'
+      }, [
+      /**
+       * 表头
+       */
+      showHeader ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(header, {
+        ref: refTableHeader,
+        tableData,
+        tableColumn,
+        tableGroupColumn
+      }) : table_renderEmptyElement($xeTable),
+      /**
+       * 表体
+       */
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(body, {
+        ref: refTableBody,
+        tableData,
+        tableColumn
+      }),
+      /**
+       * 表尾
+       */
+      showFooter ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(footer, {
+        ref: refTableFooter,
+        footerTableData,
+        tableColumn
+      }) : table_renderEmptyElement($xeTable)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table--fixed-wrapper'
+      }, [leftList && leftList.length && overflowX ? renderFixed('left') : table_renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : table_renderEmptyElement($xeTable)])]);
+    };
+    const renderBody = () => {
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: 'vxe-table--layout-wrapper'
+      }, scrollbarYToLeft ? [renderScrollY(), renderViewport()] : [renderViewport(), renderScrollY()]);
+    };
     const renderVN = () => {
       const {
         loading,
@@ -20347,11 +20481,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         overflowY,
         scrollXLoad,
         scrollYLoad,
-        scrollbarHeight,
         tableData,
-        tableColumn,
-        tableGroupColumn,
-        footerTableData,
         initStore,
         columnStore,
         filterStore,
@@ -20379,9 +20509,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const resizableOpts = computeResizableOpts.value;
       const isArea = mouseConfig && mouseOpts.area;
       const columnDragOpts = computeColumnDragOpts.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
+        class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
           [`size--${vSize}`]: vSize,
           [`valid-msg--${validOpts.msgMode}`]: !!editRules,
           'vxe-editable': !!editConfig,
@@ -20424,69 +20556,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }, slots.default ? slots.default({}) : []), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refTableViewportElem,
-        class: 'vxe-table--viewport-wrapper'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-table--main-wrapper'
-      }, [
-      /**
-       * 表头
-       */
-      showHeader ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(header, {
-        ref: refTableHeader,
-        tableData,
-        tableColumn,
-        tableGroupColumn
-      }) : table_renderEmptyElement($xeTable),
-      /**
-       * 表体
-       */
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(body, {
-        ref: refTableBody,
-        tableData,
-        tableColumn
-      }),
-      /**
-       * 表尾
-       */
-      showFooter ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(footer, {
-        ref: refTableFooter,
-        footerTableData,
-        tableColumn
-      }) : table_renderEmptyElement($xeTable)]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        class: 'vxe-table--fixed-wrapper'
-      }, [leftList && leftList.length && overflowX ? renderFixed('left') : table_renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : table_renderEmptyElement($xeTable)])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollYVirtualElem,
-        class: 'vxe-table--scroll-y-virtual'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollYTopCornerElem,
-        class: 'vxe-table--scroll-y-top-corner'
-      }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollYHandleElem,
-        class: 'vxe-table--scroll-y-handle',
-        onScroll: scrollYEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollYSpaceElem,
-        class: 'vxe-table--scroll-y-space'
-      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollYBottomCornerElem,
-        class: 'vxe-table--scroll-y-bottom-corner'
-      })])]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'vx',
-        ref: refScrollXVirtualElem,
-        class: 'vxe-table--scroll-x-virtual'
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollXHandleElem,
-        class: 'vxe-table--scroll-x-handle',
-        onScroll: scrollXEvent
-      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollXSpaceElem,
-        class: 'vxe-table--scroll-x-space'
-      })]), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refScrollXRightCornerElem,
-        class: 'vxe-table--scroll-x-right-corner'
-      })]),
+      }, scrollbarXToTop ? [renderScrollX(), renderBody()] : [renderBody(), renderScrollX()]),
       /**
        * 空数据
        */
@@ -20510,10 +20580,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'cl',
         ref: refCellResizeBar,
-        class: 'vxe-table--resizable-bar',
-        style: overflowX ? {
-          'padding-bottom': `${scrollbarHeight}px`
-        } : null
+        class: 'vxe-table--resizable-bar'
       }, resizableOpts.showDragTip ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refCellResizeTip,
         class: 'vxe-table--resizable-number-tip'
@@ -20686,16 +20753,37 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         tableMethods.refreshColumn();
       });
     });
+    const reScrollFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeSize, () => {
+      reScrollFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.showHeader, () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-      });
+      reScrollFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.showFooter, () => {
+      reScrollFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reScrollFlag, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
       });
     });
+    const reLayoutFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
+      reLayoutFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
+      reLayoutFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollbarXToTop, () => {
+      reLayoutFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollbarYToLeft, () => {
+      reLayoutFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reLayoutFlag, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => tableMethods.recalculate(true));
+    });
     const footFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.footerData ? props.footerData.length : -1, () => {
       footFlag.value++;
@@ -20706,17 +20794,6 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(footFlag, () => {
       tableMethods.updateFooter();
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => tableMethods.recalculate(true));
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => tableMethods.recalculate(true));
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeSize, () => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-      });
-    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, value => {
       if (value) {
         handleUupdateResize();