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

package/lib/table/src/table.js

@@ -393,9 +393,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const refScrollXVirtualElem = (0, _vue.ref)();
     const refScrollYVirtualElem = (0, _vue.ref)();
     const refScrollXHandleElem = (0, _vue.ref)();
+    const refScrollXLeftCornerElem = (0, _vue.ref)();
     const refScrollXRightCornerElem = (0, _vue.ref)();
     const refScrollYHandleElem = (0, _vue.ref)();
     const refScrollYTopCornerElem = (0, _vue.ref)();
+    const refScrollXWrapperElem = (0, _vue.ref)();
+    const refScrollYWrapperElem = (0, _vue.ref)();
     const refScrollYBottomCornerElem = (0, _vue.ref)();
     const refScrollXSpaceElem = (0, _vue.ref)();
     const refScrollYSpaceElem = (0, _vue.ref)();
@@ -452,6 +455,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
     const computeScrollbarOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarXToTop = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+    });
+    const computeScrollbarYToLeft = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+    });
     const computeScrollYThreshold = (0, _vue.computed)(() => {
       const sYOpts = computeSYOpts.value;
       const {
@@ -756,6 +767,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       computeVirtualXOpts,
       computeVirtualYOpts,
       computeScrollbarOpts,
+      computeScrollbarXToTop,
+      computeScrollbarYToLeft,
       computeColumnOpts,
       computeScrollXThreshold,
       computeScrollYThreshold,
@@ -911,29 +924,36 @@ var _default = exports.default = (0, _vue.defineComponent)({
       };
     };
     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;
@@ -947,10 +967,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
       } = internalData;
       const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
       if (bodyScrollElem) {
-        const {
-          scrollTop,
-          clientHeight
-        } = bodyScrollElem;
+        const clientHeight = bodyScrollElem.clientHeight;
+        const scrollTop = _xeUtils.default.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
         const endHeight = scrollTop + clientHeight;
         let toVisibleIndex = -1;
         let offsetTop = 0;
@@ -1582,7 +1600,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         tableData.forEach(row => {
           const rowid = (0, _util.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++) {
@@ -2045,19 +2063,26 @@ var _default = exports.default = (0, _vue.defineComponent)({
         }
         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) {
@@ -2070,10 +2095,10 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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) {
@@ -2896,16 +2921,16 @@ var _default = exports.default = (0, _vue.defineComponent)({
           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 ? _xeUtils.default.toNumber(sXOpts.oSize) : 0);
-          scrollXStore.preloadSize = 4;
+          const offsetXSize = Math.max(0, virtualXOpts.oSize ? _xeUtils.default.toNumber(virtualXOpts.oSize) : 0);
+          scrollXStore.preloadSize = _xeUtils.default.toNumber(virtualXOpts.preSize);
           scrollXStore.offsetSize = offsetXSize;
           scrollXStore.visibleSize = visibleXSize;
           scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -2917,7 +2942,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         } else {
           $xeTable.updateScrollXSpace();
         }
-        calcCellHeight();
         // 计算 Y 逻辑
         const rowHeight = computeRowHeight();
         scrollYStore.rowHeight = rowHeight;
@@ -2927,8 +2951,8 @@ var _default = exports.default = (0, _vue.defineComponent)({
           visibleSize: visibleYSize
         } = handleVirtualYVisible();
         if (scrollYLoad) {
-          const offsetYSize = Math.max(0, sYOpts.oSize ? _xeUtils.default.toNumber(sYOpts.oSize) : 0);
-          scrollYStore.preloadSize = 2;
+          const offsetYSize = Math.max(0, virtualYOpts.oSize ? _xeUtils.default.toNumber(virtualYOpts.oSize) : 0);
+          scrollYStore.preloadSize = _xeUtils.default.toNumber(virtualYOpts.preSize);
           scrollYStore.offsetSize = offsetYSize;
           scrollYStore.visibleSize = visibleYSize;
           scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -2957,7 +2981,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
       return computeScrollLoad().then(() => {
         if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-          calcCellHeight();
           calcCellWidth();
           autoCellWidth();
           updateStyle();
@@ -3103,6 +3126,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             if (sYOpts.scrollToTopOnChange) {
               targetScrollTop = 0;
             }
+            calcCellHeight();
             // 是否变更虚拟滚动
             if (oldScrollYLoad === sYLoad) {
               (0, _util.restoreScrollLocation)($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -3533,7 +3557,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
     /**
      * 纵向 Y 可视渲染处理
      */
-    const loadScrollYData = () => {
+    const loadScrollYData = scrollTop => {
       const {
         showOverflow
       } = props;
@@ -3553,7 +3577,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const {
         toVisibleIndex,
         visibleSize
-      } = handleVirtualYVisible();
+      } = handleVirtualYVisible(scrollTop);
       const offsetItem = {
         startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
         endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -3626,18 +3650,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }, 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);
       }
@@ -3651,86 +3668,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
         loadScrollYData();
       }, fpsTime);
     };
-    const scrollXEvent = evnt => {
-      const {
-        elemStore,
-        inWheelScroll,
-        lastScrollTop,
-        inHeaderScroll,
-        inBodyScroll,
-        inFooterScroll
-      } = internalData;
-      if (inHeaderScroll || inBodyScroll || inFooterScroll) {
-        return;
-      }
-      if (inWheelScroll) {
-        return;
-      }
-      const headerScrollElem = (0, _util.getRefElem)(elemStore['main-header-scroll']);
-      const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-      const footerScrollElem = (0, _util.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;
-      (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
-      (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
-      (0, _dom.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 = (0, _util.getRefElem)(elemStore['left-body-scroll']);
-      const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
-      const rightScrollElem = (0, _util.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;
-      (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
-      (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
-      (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
-      $xeTable.triggerScrollYEvent(evnt);
-      $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
-        type: 'table',
-        fixed: ''
-      });
-    };
     const checkLastSyncScroll = (isRollX, isRollY) => {
       const {
         scrollXLoad,
@@ -3751,16 +3688,14 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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();
@@ -3782,6 +3717,12 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return (0, _vue.nextTick)();
     };
+    function handleUupdateResize() {
+      const el = refElem.value;
+      if (el && el.clientWidth && el.clientHeight) {
+        tableMethods.recalculate();
+      }
+    }
     tableMethods = {
       dispatchEvent,
       /**
@@ -7126,6 +7067,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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);
@@ -7133,6 +7075,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
               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`;
@@ -7146,6 +7089,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         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;
@@ -7170,7 +7114,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
             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');
@@ -9628,13 +9572,93 @@ var _default = exports.default = (0, _vue.defineComponent)({
           (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
           (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
           (0, _dom.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 = (0, _util.getRefElem)(elemStore['main-header-scroll']);
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        const footerScrollElem = (0, _util.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;
+        (0, _dom.setScrollLeft)(bodyScrollElem, scrollLeft);
+        (0, _dom.setScrollLeft)(headerScrollElem, scrollLeft);
+        (0, _dom.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 = (0, _util.getRefElem)(elemStore['left-body-scroll']);
+        const bodyScrollElem = (0, _util.getRefElem)(elemStore['main-body-scroll']);
+        const rightScrollElem = (0, _util.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;
+        (0, _dom.setScrollTop)(bodyScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(leftScrollElem, scrollTop);
+        (0, _dom.setScrollTop)(rightScrollElem, scrollTop);
+        $xeTable.triggerScrollYEvent(evnt);
+        $xeTable.handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, {
+          type: 'table',
+          fixed: ''
+        });
+      },
       /**
        * 对于树形结构中，可以直接滚动到指定深层节点中
        * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -9794,9 +9818,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
           showOverflow
         } = props;
         handleTableColumn();
-        // calcCellHeight()
         return (0, _vue.nextTick)().then(() => {
-          // calcCellHeight()
           handleTableColumn();
           $xeTable.updateScrollXSpace();
           if (!showOverflow) {
@@ -9806,9 +9828,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       },
       updateScrollYData() {
         $xeTable.handleTableData();
-        // calcCellHeight()
         return (0, _vue.nextTick)().then(() => {
-          // calcCellHeight()
           $xeTable.handleTableData();
           $xeTable.updateScrollYSpace();
         });
@@ -10035,12 +10055,108 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }
       return renderEmptyElement($xeTable);
     };
-    function handleUupdateResize() {
-      const el = refElem.value;
-      if (el && el.clientWidth && el.clientHeight) {
-        tableMethods.recalculate();
-      }
-    }
+    const renderScrollX = () => {
+      return (0, _vue.h)('div', {
+        key: 'vsx',
+        ref: refScrollXVirtualElem,
+        class: 'vxe-table--scroll-x-virtual'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXLeftCornerElem,
+        class: 'vxe-table--scroll-x-left-corner'
+      }), (0, _vue.h)('div', {
+        ref: refScrollXWrapperElem,
+        class: 'vxe-table--scroll-x-wrapper'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXHandleElem,
+        class: 'vxe-table--scroll-x-handle',
+        onScroll: $xeTable.triggerVirtualScrollXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refScrollXSpaceElem,
+        class: 'vxe-table--scroll-x-space'
+      })])]), (0, _vue.h)('div', {
+        ref: refScrollXRightCornerElem,
+        class: 'vxe-table--scroll-x-right-corner'
+      })]);
+    };
+    const renderScrollY = () => {
+      return (0, _vue.h)('div', {
+        ref: refScrollYVirtualElem,
+        class: 'vxe-table--scroll-y-virtual'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYTopCornerElem,
+        class: 'vxe-table--scroll-y-top-corner'
+      }), (0, _vue.h)('div', {
+        ref: refScrollYWrapperElem,
+        class: 'vxe-table--scroll-y-wrapper'
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYHandleElem,
+        class: 'vxe-table--scroll-y-handle',
+        onScroll: $xeTable.triggerVirtualScrollYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refScrollYSpaceElem,
+        class: 'vxe-table--scroll-y-space'
+      })])]), (0, _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, _vue.h)('div', {
+        ref: refTableViewportElem,
+        class: 'vxe-table--viewport-wrapper'
+      }, [(0, _vue.h)('div', {
+        class: 'vxe-table--main-wrapper'
+      }, [
+      /**
+       * 表头
+       */
+      showHeader ? (0, _vue.h)(_header.default, {
+        ref: refTableHeader,
+        tableData,
+        tableColumn,
+        tableGroupColumn
+      }) : renderEmptyElement($xeTable),
+      /**
+       * 表体
+       */
+      (0, _vue.h)(_body.default, {
+        ref: refTableBody,
+        tableData,
+        tableColumn
+      }),
+      /**
+       * 表尾
+       */
+      showFooter ? (0, _vue.h)(_footer.default, {
+        ref: refTableFooter,
+        footerTableData,
+        tableColumn
+      }) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
+        class: 'vxe-table--fixed-wrapper'
+      }, [leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)])]);
+    };
+    const renderBody = () => {
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      return (0, _vue.h)('div', {
+        class: 'vxe-table--layout-wrapper'
+      }, scrollbarYToLeft ? [renderScrollY(), renderViewport()] : [renderViewport(), renderScrollY()]);
+    };
     const renderVN = () => {
       const {
         loading,
@@ -10063,11 +10179,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
         overflowY,
         scrollXLoad,
         scrollYLoad,
-        scrollbarHeight,
         tableData,
-        tableColumn,
-        tableGroupColumn,
-        footerTableData,
         initStore,
         columnStore,
         filterStore,
@@ -10095,9 +10207,11 @@ var _default = exports.default = (0, _vue.defineComponent)({
       const resizableOpts = computeResizableOpts.value;
       const isArea = mouseConfig && mouseOpts.area;
       const columnDragOpts = computeColumnDragOpts.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
       return (0, _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,
@@ -10140,69 +10254,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       }, slots.default ? slots.default({}) : []), (0, _vue.h)('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, [(0, _vue.h)('div', {
-        ref: refTableViewportElem,
-        class: 'vxe-table--viewport-wrapper'
-      }, [(0, _vue.h)('div', {
-        class: 'vxe-table--main-wrapper'
-      }, [
-      /**
-       * 表头
-       */
-      showHeader ? (0, _vue.h)(_header.default, {
-        ref: refTableHeader,
-        tableData,
-        tableColumn,
-        tableGroupColumn
-      }) : renderEmptyElement($xeTable),
-      /**
-       * 表体
-       */
-      (0, _vue.h)(_body.default, {
-        ref: refTableBody,
-        tableData,
-        tableColumn
-      }),
-      /**
-       * 表尾
-       */
-      showFooter ? (0, _vue.h)(_footer.default, {
-        ref: refTableFooter,
-        footerTableData,
-        tableColumn
-      }) : renderEmptyElement($xeTable)]), (0, _vue.h)('div', {
-        class: 'vxe-table--fixed-wrapper'
-      }, [leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)])]), (0, _vue.h)('div', {
-        ref: refScrollYVirtualElem,
-        class: 'vxe-table--scroll-y-virtual'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollYTopCornerElem,
-        class: 'vxe-table--scroll-y-top-corner'
-      }), (0, _vue.h)('div', {
-        ref: refScrollYHandleElem,
-        class: 'vxe-table--scroll-y-handle',
-        onScroll: scrollYEvent
-      }, [(0, _vue.h)('div', {
-        ref: refScrollYSpaceElem,
-        class: 'vxe-table--scroll-y-space'
-      })]), (0, _vue.h)('div', {
-        ref: refScrollYBottomCornerElem,
-        class: 'vxe-table--scroll-y-bottom-corner'
-      })])]), (0, _vue.h)('div', {
-        key: 'vx',
-        ref: refScrollXVirtualElem,
-        class: 'vxe-table--scroll-x-virtual'
-      }, [(0, _vue.h)('div', {
-        ref: refScrollXHandleElem,
-        class: 'vxe-table--scroll-x-handle',
-        onScroll: scrollXEvent
-      }, [(0, _vue.h)('div', {
-        ref: refScrollXSpaceElem,
-        class: 'vxe-table--scroll-x-space'
-      })]), (0, _vue.h)('div', {
-        ref: refScrollXRightCornerElem,
-        class: 'vxe-table--scroll-x-right-corner'
-      })]),
+      }, scrollbarXToTop ? [renderScrollX(), renderBody()] : [renderBody(), renderScrollX()]),
       /**
        * 空数据
        */
@@ -10226,10 +10278,7 @@ var _default = exports.default = (0, _vue.defineComponent)({
       (0, _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, _vue.h)('div', {
         ref: refCellResizeTip,
         class: 'vxe-table--resizable-number-tip'
@@ -10401,16 +10450,37 @@ var _default = exports.default = (0, _vue.defineComponent)({
         tableMethods.refreshColumn();
       });
     });
+    const reScrollFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(computeSize, () => {
+      reScrollFlag.value++;
+    });
     (0, _vue.watch)(() => props.showHeader, () => {
-      (0, _vue.nextTick)(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-      });
+      reScrollFlag.value++;
     });
     (0, _vue.watch)(() => props.showFooter, () => {
+      reScrollFlag.value++;
+    });
+    (0, _vue.watch)(reScrollFlag, () => {
       (0, _vue.nextTick)(() => {
         tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
       });
     });
+    const reLayoutFlag = (0, _vue.ref)(0);
+    (0, _vue.watch)(() => props.height, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(() => props.maxHeight, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollbarXToTop, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollbarYToLeft, () => {
+      reLayoutFlag.value++;
+    });
+    (0, _vue.watch)(reLayoutFlag, () => {
+      (0, _vue.nextTick)(() => tableMethods.recalculate(true));
+    });
     const footFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.footerData ? props.footerData.length : -1, () => {
       footFlag.value++;
@@ -10421,17 +10491,6 @@ var _default = exports.default = (0, _vue.defineComponent)({
     (0, _vue.watch)(footFlag, () => {
       tableMethods.updateFooter();
     });
-    (0, _vue.watch)(() => props.height, () => {
-      (0, _vue.nextTick)(() => tableMethods.recalculate(true));
-    });
-    (0, _vue.watch)(() => props.maxHeight, () => {
-      (0, _vue.nextTick)(() => tableMethods.recalculate(true));
-    });
-    (0, _vue.watch)(computeSize, () => {
-      (0, _vue.nextTick)(() => {
-        tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-      });
-    });
     (0, _vue.watch)(() => props.syncResize, value => {
       if (value) {
         handleUupdateResize();