vxe-table 4.10.6-beta.6 → 4.10.6-beta.8

package/lib/index.umd.js

@@ -3138,7 +3138,7 @@ function eqEmptyValue(cellValue) {
 ;// ./packages/ui/index.ts
 
 
-const version = "4.10.6-beta.6";
+const version = "4.10.6-beta.8";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -3568,7 +3568,7 @@ var esnext_iterator_some = __webpack_require__(7550);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.10.6-beta.6"}`;
+const log_version = `table v${"4.10.6-beta.8"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// ./packages/table/src/columnInfo.ts
@@ -7028,7 +7028,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 +7052,9 @@ const header_renderType = 'header';
       const {
         fixedType
       } = props;
+      const {
+        scrollbarHeight
+      } = tableReactData;
       const {
         elemStore,
         visibleColumn
@@ -7061,6 +7065,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 +7117,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 +7135,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 +7150,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)]);
         }
       };
@@ -10659,9 +10667,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 +10729,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 +11041,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXToTop,
+      computeScrollbarYToLeft,
       computeColumnOpts,
       computeScrollXThreshold,
       computeScrollYThreshold,
@@ -12311,19 +12332,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 +12364,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) {
@@ -13925,86 +13953,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,
@@ -14056,6 +14004,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 +17362,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 +17370,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 +17384,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 +17409,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');
@@ -19919,6 +19876,86 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           });
         }
       },
+      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: ''
+        });
+      },
       /**
        * 对于树形结构中，可以直接滚动到指定深层节点中
        * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -20319,12 +20356,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 +20480,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         overflowY,
         scrollXLoad,
         scrollYLoad,
-        scrollbarHeight,
         tableData,
-        tableColumn,
-        tableGroupColumn,
-        footerTableData,
         initStore,
         columnStore,
         filterStore,
@@ -20379,9 +20508,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 +20555,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 +20579,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 +20752,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 +20793,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();