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

package/es/table/src/table.js

@@ -367,9 +367,12 @@ export default defineComponent({
         const refScrollXVirtualElem = ref();
         const refScrollYVirtualElem = ref();
         const refScrollXHandleElem = ref();
+        const refScrollXLeftCornerElem = ref();
         const refScrollXRightCornerElem = ref();
         const refScrollYHandleElem = ref();
         const refScrollYTopCornerElem = ref();
+        const refScrollXWrapperElem = ref();
+        const refScrollYWrapperElem = ref();
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
@@ -419,6 +422,14 @@ export default defineComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.x && scrollbarOpts.x.position === 'top');
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return !!(scrollbarOpts.y && scrollbarOpts.y.position === 'left');
+        });
         const computeScrollYThreshold = computed(() => {
             const sYOpts = computeSYOpts.value;
             const { threshold } = sYOpts;
@@ -679,6 +690,8 @@ export default defineComponent({
             computeVirtualXOpts,
             computeVirtualYOpts,
             computeScrollbarOpts,
+            computeScrollbarXToTop,
+            computeScrollbarYToLeft,
             computeColumnOpts,
             computeScrollXThreshold,
             computeScrollYThreshold,
@@ -814,35 +827,42 @@ export default defineComponent({
             return { toVisibleIndex: 0, visibleSize: 6 };
         };
         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;
             const { rowHeight } = reactData;
             const { elemStore, afterFullData, fullAllDataRowIdData } = internalData;
             const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
             if (bodyScrollElem) {
-                const { scrollTop, clientHeight } = bodyScrollElem;
+                const clientHeight = bodyScrollElem.clientHeight;
+                const scrollTop = XEUtils.isNumber(currScrollTop) ? currScrollTop : bodyScrollElem.scrollTop;
                 const endHeight = scrollTop + clientHeight;
                 let toVisibleIndex = -1;
                 let offsetTop = 0;
@@ -1394,7 +1414,7 @@ export default defineComponent({
                 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++) {
@@ -1710,19 +1730,26 @@ export default 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) {
@@ -1735,10 +1762,10 @@ export default 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) {
@@ -2456,13 +2483,13 @@ export default defineComponent({
             return nextTick().then(() => {
                 const { scrollXLoad, scrollYLoad } = reactData;
                 const { 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.toNumber(sXOpts.oSize) : 0);
-                    scrollXStore.preloadSize = 4;
+                    const offsetXSize = Math.max(0, virtualXOpts.oSize ? XEUtils.toNumber(virtualXOpts.oSize) : 0);
+                    scrollXStore.preloadSize = XEUtils.toNumber(virtualXOpts.preSize);
                     scrollXStore.offsetSize = offsetXSize;
                     scrollXStore.visibleSize = visibleXSize;
                     scrollXStore.endIndex = Math.max(scrollXStore.startIndex + scrollXStore.visibleSize + offsetXSize, scrollXStore.endIndex);
@@ -2475,15 +2502,14 @@ export default defineComponent({
                 else {
                     $xeTable.updateScrollXSpace();
                 }
-                calcCellHeight();
                 // 计算 Y 逻辑
                 const rowHeight = computeRowHeight();
                 scrollYStore.rowHeight = rowHeight;
                 reactData.rowHeight = rowHeight;
                 const { toVisibleIndex: toYVisibleIndex, visibleSize: visibleYSize } = handleVirtualYVisible();
                 if (scrollYLoad) {
-                    const offsetYSize = Math.max(0, sYOpts.oSize ? XEUtils.toNumber(sYOpts.oSize) : 0);
-                    scrollYStore.preloadSize = 2;
+                    const offsetYSize = Math.max(0, virtualYOpts.oSize ? XEUtils.toNumber(virtualYOpts.oSize) : 0);
+                    scrollYStore.preloadSize = XEUtils.toNumber(virtualYOpts.preSize);
                     scrollYStore.offsetSize = offsetYSize;
                     scrollYStore.visibleSize = visibleYSize;
                     scrollYStore.endIndex = Math.max(scrollYStore.startIndex + visibleYSize + offsetYSize, scrollYStore.endIndex);
@@ -2513,7 +2539,6 @@ export default defineComponent({
             return computeScrollLoad().then(() => {
                 if (reFull === true) {
                     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-                    calcCellHeight();
                     calcCellWidth();
                     autoCellWidth();
                     updateStyle();
@@ -2648,6 +2673,7 @@ export default defineComponent({
                         if (sYOpts.scrollToTopOnChange) {
                             targetScrollTop = 0;
                         }
+                        calcCellHeight();
                         // 是否变更虚拟滚动
                         if (oldScrollYLoad === sYLoad) {
                             restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop)
@@ -3026,13 +3052,13 @@ export default defineComponent({
         /**
          * 纵向 Y 可视渲染处理
          */
-        const loadScrollYData = () => {
+        const loadScrollYData = (scrollTop) => {
             const { showOverflow } = props;
             const { mergeList } = reactData;
             const { scrollYStore } = internalData;
             const { preloadSize, startIndex, endIndex, offsetSize } = scrollYStore;
             const autoOffsetYSize = showOverflow ? offsetSize : offsetSize + 1;
-            const { toVisibleIndex, visibleSize } = handleVirtualYVisible();
+            const { toVisibleIndex, visibleSize } = handleVirtualYVisible(scrollTop);
             const offsetItem = {
                 startIndex: Math.max(0, toVisibleIndex - 1 - offsetSize - preloadSize),
                 endIndex: toVisibleIndex + visibleSize + autoOffsetYSize + preloadSize
@@ -3092,10 +3118,8 @@ export default defineComponent({
             }, fpsTime);
         };
         const lazyScrollYData = () => {
-            const { showOverflow } = props;
-            const { lyTimeout, lyRunTime, scrollYStore } = internalData;
-            const { visibleSize } = scrollYStore;
-            const fpsTime = showOverflow ? 5 : Math.max(5, Math.min(80, Math.floor(visibleSize / 2)));
+            const { lyTimeout, lyRunTime } = internalData;
+            const fpsTime = Math.floor(Math.max(4, Math.min(10, 20 / 3)));
             if (lyTimeout) {
                 clearTimeout(lyTimeout);
             }
@@ -3109,68 +3133,6 @@ export default defineComponent({
                 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, scrollYLoad } = reactData;
             const { lcsTimeout } = internalData;
@@ -3186,16 +3148,14 @@ export default 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();
@@ -3212,6 +3172,12 @@ export default defineComponent({
             }
             return nextTick();
         };
+        function handleUupdateResize() {
+            const el = refElem.value;
+            if (el && el.clientWidth && el.clientHeight) {
+                tableMethods.recalculate();
+            }
+        }
         tableMethods = {
             dispatchEvent,
             /**
@@ -6163,6 +6129,7 @@ export default 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);
@@ -6170,6 +6137,7 @@ export default 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`;
@@ -6185,6 +6153,7 @@ export default 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;
@@ -6210,7 +6179,7 @@ export default defineComponent({
                             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');
@@ -8295,13 +8264,75 @@ export default defineComponent({
                     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: ''
+                });
+            },
             /**
              * 对于树形结构中，可以直接滚动到指定深层节点中
              * 对于某些特定的场景可能会用到，比如定位到某一节点
@@ -8435,9 +8466,7 @@ export default defineComponent({
             updateScrollXData() {
                 const { showOverflow } = props;
                 handleTableColumn();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     handleTableColumn();
                     $xeTable.updateScrollXSpace();
                     if (!showOverflow) {
@@ -8447,9 +8476,7 @@ export default defineComponent({
             },
             updateScrollYData() {
                 $xeTable.handleTableData();
-                // calcCellHeight()
                 return nextTick().then(() => {
-                    // calcCellHeight()
                     $xeTable.handleTableData();
                     $xeTable.updateScrollYSpace();
                 });
@@ -8674,15 +8701,133 @@ export default defineComponent({
             }
             return renderEmptyElement($xeTable);
         };
-        function handleUupdateResize() {
-            const el = refElem.value;
-            if (el && el.clientWidth && el.clientHeight) {
-                tableMethods.recalculate();
-            }
-        }
+        const renderScrollX = () => {
+            return h('div', {
+                key: 'vsx',
+                ref: refScrollXVirtualElem,
+                class: 'vxe-table--scroll-x-virtual'
+            }, [
+                h('div', {
+                    ref: refScrollXLeftCornerElem,
+                    class: 'vxe-table--scroll-x-left-corner'
+                }),
+                h('div', {
+                    ref: refScrollXWrapperElem,
+                    class: 'vxe-table--scroll-x-wrapper'
+                }, [
+                    h('div', {
+                        ref: refScrollXHandleElem,
+                        class: 'vxe-table--scroll-x-handle',
+                        onScroll: $xeTable.triggerVirtualScrollXEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollXSpaceElem,
+                            class: 'vxe-table--scroll-x-space'
+                        })
+                    ])
+                ]),
+                h('div', {
+                    ref: refScrollXRightCornerElem,
+                    class: 'vxe-table--scroll-x-right-corner'
+                })
+            ]);
+        };
+        const renderScrollY = () => {
+            return h('div', {
+                ref: refScrollYVirtualElem,
+                class: 'vxe-table--scroll-y-virtual'
+            }, [
+                h('div', {
+                    ref: refScrollYTopCornerElem,
+                    class: 'vxe-table--scroll-y-top-corner'
+                }),
+                h('div', {
+                    ref: refScrollYWrapperElem,
+                    class: 'vxe-table--scroll-y-wrapper'
+                }, [
+                    h('div', {
+                        ref: refScrollYHandleElem,
+                        class: 'vxe-table--scroll-y-handle',
+                        onScroll: $xeTable.triggerVirtualScrollYEvent
+                    }, [
+                        h('div', {
+                            ref: refScrollYSpaceElem,
+                            class: 'vxe-table--scroll-y-space'
+                        })
+                    ])
+                ]),
+                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 h('div', {
+                ref: refTableViewportElem,
+                class: 'vxe-table--viewport-wrapper'
+            }, [
+                h('div', {
+                    class: 'vxe-table--main-wrapper'
+                }, [
+                    /**
+                     * 表头
+                     */
+                    showHeader
+                        ? h(TableHeaderComponent, {
+                            ref: refTableHeader,
+                            tableData,
+                            tableColumn,
+                            tableGroupColumn
+                        })
+                        : renderEmptyElement($xeTable),
+                    /**
+                     * 表体
+                     */
+                    h(TableBodyComponent, {
+                        ref: refTableBody,
+                        tableData,
+                        tableColumn
+                    }),
+                    /**
+                     * 表尾
+                     */
+                    showFooter
+                        ? h(TableFooterComponent, {
+                            ref: refTableFooter,
+                            footerTableData,
+                            tableColumn
+                        })
+                        : renderEmptyElement($xeTable)
+                ]),
+                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 h('div', {
+                class: 'vxe-table--layout-wrapper'
+            }, scrollbarYToLeft
+                ? [
+                    renderScrollY(),
+                    renderViewport()
+                ]
+                : [
+                    renderViewport(),
+                    renderScrollY()
+                ]);
+        };
         const renderVN = () => {
             const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = props;
-            const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, scrollbarHeight, tableData, tableColumn, tableGroupColumn, footerTableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
+            const { isCalcColumn, isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, columnStore, filterStore, customStore, tooltipStore } = reactData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
             const tooltipOpts = computeTooltipOpts.value;
@@ -8701,9 +8846,11 @@ export default defineComponent({
             const resizableOpts = computeResizableOpts.value;
             const isArea = mouseConfig && mouseOpts.area;
             const columnDragOpts = computeColumnDragOpts.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
             return 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,
@@ -8747,95 +8894,15 @@ export default defineComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, [
-                    h('div', {
-                        ref: refTableViewportElem,
-                        class: 'vxe-table--viewport-wrapper'
-                    }, [
-                        h('div', {
-                            class: 'vxe-table--main-wrapper'
-                        }, [
-                            /**
-                             * 表头
-                             */
-                            showHeader
-                                ? h(TableHeaderComponent, {
-                                    ref: refTableHeader,
-                                    tableData,
-                                    tableColumn,
-                                    tableGroupColumn
-                                })
-                                : renderEmptyElement($xeTable),
-                            /**
-                             * 表体
-                             */
-                            h(TableBodyComponent, {
-                                ref: refTableBody,
-                                tableData,
-                                tableColumn
-                            }),
-                            /**
-                             * 表尾
-                             */
-                            showFooter
-                                ? h(TableFooterComponent, {
-                                    ref: refTableFooter,
-                                    footerTableData,
-                                    tableColumn
-                                })
-                                : renderEmptyElement($xeTable)
-                        ]),
-                        h('div', {
-                            class: 'vxe-table--fixed-wrapper'
-                        }, [
-                            leftList && leftList.length && overflowX ? renderFixed('left') : renderEmptyElement($xeTable),
-                            rightList && rightList.length && overflowX ? renderFixed('right') : renderEmptyElement($xeTable)
-                        ])
-                    ]),
-                    h('div', {
-                        ref: refScrollYVirtualElem,
-                        class: 'vxe-table--scroll-y-virtual'
-                    }, [
-                        h('div', {
-                            ref: refScrollYTopCornerElem,
-                            class: 'vxe-table--scroll-y-top-corner'
-                        }),
-                        h('div', {
-                            ref: refScrollYHandleElem,
-                            class: 'vxe-table--scroll-y-handle',
-                            onScroll: scrollYEvent
-                        }, [
-                            h('div', {
-                                ref: refScrollYSpaceElem,
-                                class: 'vxe-table--scroll-y-space'
-                            })
-                        ]),
-                        h('div', {
-                            ref: refScrollYBottomCornerElem,
-                            class: 'vxe-table--scroll-y-bottom-corner'
-                        })
-                    ])
-                ]),
-                h('div', {
-                    key: 'vx',
-                    ref: refScrollXVirtualElem,
-                    class: 'vxe-table--scroll-x-virtual'
-                }, [
-                    h('div', {
-                        ref: refScrollXHandleElem,
-                        class: 'vxe-table--scroll-x-handle',
-                        onScroll: scrollXEvent
-                    }, [
-                        h('div', {
-                            ref: refScrollXSpaceElem,
-                            class: 'vxe-table--scroll-x-space'
-                        })
+                }, scrollbarXToTop
+                    ? [
+                        renderScrollX(),
+                        renderBody()
+                    ]
+                    : [
+                        renderBody(),
+                        renderScrollX()
                     ]),
-                    h('div', {
-                        ref: refScrollXRightCornerElem,
-                        class: 'vxe-table--scroll-x-right-corner'
-                    })
-                ]),
                 /**
                  * 空数据
                  */
@@ -8861,12 +8928,7 @@ export default defineComponent({
                 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
                     ? [
                         h('div', {
@@ -9044,16 +9106,37 @@ export default defineComponent({
                 tableMethods.refreshColumn();
             });
         });
+        const reScrollFlag = ref(0);
+        watch(computeSize, () => {
+            reScrollFlag.value++;
+        });
         watch(() => props.showHeader, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
+            reScrollFlag.value++;
         });
         watch(() => props.showFooter, () => {
+            reScrollFlag.value++;
+        });
+        watch(reScrollFlag, () => {
             nextTick(() => {
                 tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
             });
         });
+        const reLayoutFlag = ref(0);
+        watch(() => props.height, () => {
+            reLayoutFlag.value++;
+        });
+        watch(() => props.maxHeight, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarXToTop, () => {
+            reLayoutFlag.value++;
+        });
+        watch(computeScrollbarYToLeft, () => {
+            reLayoutFlag.value++;
+        });
+        watch(reLayoutFlag, () => {
+            nextTick(() => tableMethods.recalculate(true));
+        });
         const footFlag = ref(0);
         watch(() => props.footerData ? props.footerData.length : -1, () => {
             footFlag.value++;
@@ -9064,17 +9147,6 @@ export default defineComponent({
         watch(footFlag, () => {
             tableMethods.updateFooter();
         });
-        watch(() => props.height, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(() => props.maxHeight, () => {
-            nextTick(() => tableMethods.recalculate(true));
-        });
-        watch(computeSize, () => {
-            nextTick(() => {
-                tableMethods.recalculate(true).then(() => tableMethods.refreshScroll());
-            });
-        });
         watch(() => props.syncResize, (value) => {
             if (value) {
                 handleUupdateResize();