vxe-table 4.23.0-beta.1 → 4.23.0-beta.3

package/dist/all.esm.js

@@ -56,7 +56,7 @@ function getDefaultConfig(val1, def1) {
     return XEUtils.eqNull(val1) ? def1 : val1;
 }
 
-const version = "4.23.0-beta.1";
+const version = "4.23.0-beta.3";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -790,7 +790,8 @@ function wheelScrollTopTo(diffNum, cb) {
  * 通用定位计算
  */
 function updatePanelPlacement(targetElem, panelElem, options) {
-    const { defaultTop, defaultLeft, placement, defaultPlacement, teleportTo, marginSize, isMinWidth } = Object.assign({
+    const { defaultTop, defaultLeft, placement, defaultPlacement, appendTo, teleportTo, marginSize, isMinWidth } = Object.assign({
+        appendTo: '',
         teleportTo: false,
         marginSize: 18,
         isMinWidth: true
@@ -804,7 +805,7 @@ function updatePanelPlacement(targetElem, panelElem, options) {
     const stys = {};
     if (panelElem && targetElem) {
         const bodyEl = document.body;
-        const parentWrapperEl = getPopupWrapperElement(panelElem);
+        const parentWrapperEl = getPopupWrapperElement(teleportTo ? getPopupAppendElement(appendTo) : panelElem);
         if (parentWrapperEl) {
             const targetWidth = targetElem.offsetWidth;
             const targetHeight = targetElem.offsetHeight;
@@ -815,14 +816,16 @@ function updatePanelPlacement(targetElem, panelElem, options) {
             const targetRect = targetElem.getBoundingClientRect();
             const visibleHeight = bodyEl.clientHeight;
             const visibleWidth = bodyEl.clientWidth;
-            const offsetLeft = parentWrapperRect.left;
-            const offsetTop = parentWrapperRect.top;
+            const parentWrapperScrollLeft = parentWrapperEl.scrollLeft;
+            const parentWrapperScrollTop = parentWrapperEl.scrollTop;
+            const parentWrapperOffsetLeft = parentWrapperRect.left;
+            const parentWrapperOffsetTop = parentWrapperRect.top;
             const targetLeft = targetRect.left;
             const targetTop = targetRect.top;
             minWidth = targetElem.offsetWidth;
             if (teleportTo) {
-                left = defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2);
-                top = defaultTop || (targetTop + targetHeight);
+                left = (defaultLeft || (targetLeft - (panelWidth - targetWidth) / 2)) - parentWrapperScrollLeft;
+                top = (defaultTop || (targetTop + targetHeight)) - parentWrapperScrollTop;
                 if (placement === 'top') {
                     panelPlacement = 'top';
                     top = targetTop - panelHeight;
@@ -866,8 +869,8 @@ function updatePanelPlacement(targetElem, panelElem, options) {
                     left = marginSize;
                 }
                 // 偏移
-                top -= offsetTop;
-                left -= offsetLeft;
+                top -= parentWrapperOffsetTop;
+                left -= parentWrapperOffsetLeft;
             }
             else {
                 if (placement === 'top') {
@@ -936,9 +939,20 @@ function getPopupWrapperElement(panelElem) {
     const parentEl = panelElem.parentElement;
     return (parentEl === bodyEl ? document.documentElement : parentEl) || null;
 }
+function getPopupContainer(appendTo) {
+    const selectElem = appendTo && XEUtils.isFunction(appendTo) ? appendTo({}) : appendTo;
+    return selectElem || 'body';
+}
+function getPopupAppendElement(appendTo) {
+    const selectElem = getPopupContainer(appendTo);
+    if (XEUtils.isString(selectElem)) {
+        return document.querySelector(selectElem) || document.body;
+    }
+    return selectElem;
+}
 
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.1"}`;
+const tableVersion = `table v${"4.23.0-beta.3"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -1190,9 +1204,15 @@ function createInternalData$3() {
         // 当前行
         currentRow: null,
         currentCol: null,
-        // 最后滚动位置
-        lastScrollLeft: 0,
+        // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         // 单选框属性，已选中保留的行
         radioReserveRow: null,
         // 复选框属性，已选中保留的行集合
@@ -1325,6 +1345,9 @@ function createReactData$2() {
         scrollbarWidth: 0,
         // 横向滚动条的高度
         scrollbarHeight: 0,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         // 行高
         rowHeight: 0,
         // 表格父容器的高度
@@ -3850,7 +3873,10 @@ const tableProps = {
         type: Boolean,
         default: () => getConfig$7().table.highlightCurrentRow
     },
-    // （即将废弃）鼠标移到行是否要高亮显示
+    /**
+     * （即将废弃）鼠标移到行是否要高亮显示
+     * @deprecated
+     */
     highlightHoverRow: {
         type: Boolean,
         default: () => getConfig$7().table.highlightHoverRow
@@ -4075,7 +4101,7 @@ const tableProps = {
     virtualYConfig: Object,
     useScrollbar: {
         type: Boolean,
-        default: () => getConfig$7().table.useScrollbar
+        default: () => getDefaultConfig(getConfig$7().table.useScrollbar, getConfig$7().useScrollbar)
     },
     // 滚动条配置项
     scrollbarConfig: Object,
@@ -6382,8 +6408,8 @@ var TableCustomPanelComponent = defineVxeComponent({
             const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
             if (prevDragGroupField || prevDragAggFnColid) {
-                if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
-                    $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
+                if ($xeTable.handlePivotTableAggPanelDragendEvent) {
+                    $xeTable.handlePivotTableAggPanelDragendEvent(evnt);
                 }
             }
             else if (prevDragCol && dragCol) {
@@ -8977,6 +9003,7 @@ hooks$7.add('tableFilterModule', {
                 if (transfer) {
                     const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
                         defaultPlacement: 'bottom',
+                        appendTo: '',
                         isMinWidth: false,
                         teleportTo: transfer
                     });
@@ -15976,7 +16003,8 @@ renderer$2.mixin({
 });
 
 const { warnLog: warnLog$2, errLog: errLog$2 } = createComponentLog('table');
-const { getConfig: getConfig$2, getIcon: getIcon$1, getI18n: getI18n$2, renderer: renderer$1, formats, createEvent: createEvent$2, globalResize, interceptor, hooks: hooks$1, globalEvents: globalEvents$1, GLOBAL_EVENT_KEYS: GLOBAL_EVENT_KEYS$1, useFns: useFns$2, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
+const { getConfig: getConfig$2, getIcon: getIcon$1, getI18n: getI18n$2, renderer: renderer$1, formats, scrollbarUtils, createEvent: createEvent$2, globalResize, interceptor, hooks: hooks$1, domUtils, globalEvents: globalEvents$1, GLOBAL_EVENT_KEYS: GLOBAL_EVENT_KEYS$1, useFns: useFns$2, renderEmptyElement: renderEmptyElement$1 } = VxeUI;
+const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils || {};
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -16051,6 +16079,10 @@ var VxeTableComponent = defineVxeComponent({
         const refScrollYBottomCornerElem = ref();
         const refScrollXSpaceElem = ref();
         const refScrollYSpaceElem = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
         let $xeToolbar;
         const computeTableId = computed(() => {
             const { id } = props;
@@ -16141,6 +16173,36 @@ var VxeTableComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {});
         });
+        const computeScrollXHeight = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
+        });
+        const computeScrollYWidth = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+        });
+        const computeScrollXVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollYVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollXAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+        });
+        const computeScrollYAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+        });
         const computeScrollbarXToTop = computed(() => {
             const scrollbarXOpts = computeScrollbarXOpts.value;
             return scrollbarXOpts.position === 'top';
@@ -16149,6 +16211,23 @@ var VxeTableComponent = defineVxeComponent({
             const scrollbarYOpts = computeScrollbarYOpts.value;
             return scrollbarYOpts.position === 'left';
         });
+        const computeScrollbarWrapperClss = computed(() => {
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            return domUtils.buildClass([
+                'vxe-scrollbar is--virtual',
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+                `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+                `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+            ], {
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
+            });
+        });
         const computeScrollYThreshold = computed(() => {
             const virtualYOpts = computeVirtualYOpts.value;
             const { threshold } = virtualYOpts;
@@ -16178,6 +16257,10 @@ var VxeTableComponent = defineVxeComponent({
             }
             return cellOpts;
         });
+        const computeCellHeitht = computed(() => {
+            const cellOpts = computeCellOpts.value;
+            return cellOpts.height;
+        });
         const computeHeaderCellOpts = computed(() => {
             const headerCellOpts = Object.assign({}, getConfig$2().table.headerCellConfig, props.headerCellConfig);
             const defaultRowHeight = computeDefaultRowHeight.value;
@@ -16241,7 +16324,8 @@ var VxeTableComponent = defineVxeComponent({
             return Object.assign({}, getConfig$2().table.checkboxConfig, props.checkboxConfig);
         });
         const computeTooltipOpts = computed(() => {
-            return Object.assign({}, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
+            const { useScrollbar } = props;
+            return Object.assign({ useScrollbar }, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
         });
         const computeHeaderTooltipOpts = computed(() => {
             const tooltipOpts = computeTooltipOpts.value;
@@ -16477,11 +16561,8 @@ var VxeTableComponent = defineVxeComponent({
             return '';
         });
         const computeTableStyle = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
-            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width);
-            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height);
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
             const stys = {};
             if (barWidth || barHeight) {
                 stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight);
@@ -16677,8 +16758,15 @@ var VxeTableComponent = defineVxeComponent({
             computeScrollbarOpts,
             computeScrollbarXOpts,
             computeScrollbarYOpts,
+            computeScrollXHeight,
+            computeScrollYWidth,
+            computeScrollXVisible,
+            computeScrollYVisible,
+            computeScrollXAutoHide,
+            computeScrollYAutoHide,
             computeScrollbarXToTop,
             computeScrollbarYToLeft,
+            computeScrollbarWrapperClss,
             computeColumnOpts,
             computeCurrentColumnOpts,
             computeScrollXThreshold,
@@ -17795,14 +17883,6 @@ var VxeTableComponent = defineVxeComponent({
             if (!bodyWrapperElem) {
                 return;
             }
-            const yHandleEl = refScrollYHandleElem.value;
-            if (!yHandleEl) {
-                return;
-            }
-            const xHandleEl = refScrollXHandleElem.value;
-            if (!xHandleEl) {
-                return;
-            }
             const columnOpts = computeColumnOpts.value;
             let tWidth = 0;
             const minCellWidth = 40; // 列宽最少限制 40px
@@ -18402,12 +18482,12 @@ var VxeTableComponent = defineVxeComponent({
                 emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-            const hideXScroll = scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden';
-            if (!hideXScroll || $xeGanttView) {
+            const hideXScroll = scrollXVisible === false || scrollXVisible === 'hidden';
+            if (scrollXVisible === 'visible' || $xeGanttView) {
                 osbHeight = scrollbarHeight;
                 xScrollbarVisible = 'visible';
             }
@@ -18416,12 +18496,12 @@ var VxeTableComponent = defineVxeComponent({
                 xScrollbarVisible = 'hidden';
             }
             let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-            const showYScroll = !(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden');
-            if (!showYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
+            const hideYScroll = scrollYVisible === false || scrollYVisible === 'hidden';
+            if (hideYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
                 osbWidth = 0;
                 yScrollbarVisible = 'hidden';
             }
-            else if (showYScroll) {
+            else if (scrollYVisible === 'visible') {
                 osbWidth = scrollbarWidth;
                 yScrollbarVisible = 'visible';
             }
@@ -19229,7 +19309,6 @@ var VxeTableComponent = defineVxeComponent({
         const calcScrollbar = () => {
             const { scrollXWidth, scrollYHeight } = reactData;
             const { elemStore } = internalData;
-            const scrollbarOpts = computeScrollbarOpts.value;
             const el = refElem.value;
             if (!el || !el.clientWidth) {
                 return;
@@ -19239,20 +19318,29 @@ var VxeTableComponent = defineVxeComponent({
             const footerTableElem = getRefElem(elemStore['main-footer-table']);
             const xHandleEl = refScrollXHandleElem.value;
             const yHandleEl = refScrollYHandleElem.value;
+            const thumbXElem = refThumbXElem.value;
+            const thumbYElem = refThumbYElem.value;
             let overflowY = false;
             let overflowX = false;
             if (bodyWrapperElem) {
-                const scrollbarXOpts = computeScrollbarXOpts.value;
-                const scrollbarYOpts = computeScrollbarYOpts.value;
-                const barWidth = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
-                const barHeight = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
+                const scrollbarOpts = computeScrollbarOpts.value;
+                const barWidth = computeScrollYWidth.value;
+                const barHeight = computeScrollXHeight.value;
                 overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
-                if (yHandleEl) {
+                // 如果是虚拟滚动条
+                if (thumbYElem) {
+                    reactData.scrollbarHeight = scrollbarOpts.padding ? thumbYElem.offsetWidth : 0;
+                }
+                else if (yHandleEl) {
                     reactData.scrollbarWidth = (barWidth || barHeight) || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
                 }
                 reactData.overflowY = overflowY;
                 overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
-                if (xHandleEl) {
+                // 如果是虚拟滚动条
+                if (thumbXElem) {
+                    reactData.scrollbarHeight = scrollbarOpts.padding ? thumbXElem.offsetHeight : 0;
+                }
+                else if (xHandleEl) {
                     reactData.scrollbarHeight = (barHeight || barWidth) || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
                 const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
@@ -19319,6 +19407,10 @@ var VxeTableComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         const defaultMinRunDelay = 50;
         const handleLazyRecalculate = (reFull, reWidth, reHeight, options) => {
             const minRunDelay = (options ? options.minRunDelay : defaultMinRunDelay) || defaultMinRunDelay;
@@ -19339,6 +19431,7 @@ var VxeTableComponent = defineVxeComponent({
                 const refreshDelay = resizeOpts.refreshDelay || 30;
                 const reDelay = rceDelay + refreshDelay;
                 const el = refElem.value;
+                updateScrollbar();
                 if (el && el.clientWidth) {
                     autoCellWidth();
                     updateRowExpandStyle();
@@ -27340,6 +27433,18 @@ var VxeTableComponent = defineVxeComponent({
                 }
                 return nextTick();
             },
+            /**
+             * @private
+             */
+            updateScrollbar() {
+                return updateScrollbar();
+            },
+            /**
+             * @private
+             */
+            updateThumbOffset() {
+                return updateThumbOffset();
+            },
             /**
              * 表头单元格按下事件
              */
@@ -28487,19 +28592,18 @@ var VxeTableComponent = defineVxeComponent({
             },
             handleScrollEvent(evnt, isRollY, isRollX, scrollTop, scrollLeft, params) {
                 const { highlightHoverRow } = props;
-                const { lastScrollLeft, lastScrollTop } = internalData;
-                const xHandleEl = refScrollXHandleElem.value;
-                const yHandleEl = refScrollYHandleElem.value;
-                if (!xHandleEl || !yHandleEl) {
+                const { elemStore, lastScrollLeft, lastScrollTop } = internalData;
+                const bodyScrollElem = getRefElem(elemStore['main-body-scroll']);
+                if (!bodyScrollElem) {
                     return;
                 }
                 const rowOpts = computeRowOpts.value;
                 const validTip = refValidTooltip.value;
                 const tooltip = refTooltip.value;
-                const bodyHeight = yHandleEl.clientHeight;
-                const bodyWidth = xHandleEl.clientWidth;
-                const scrollHeight = yHandleEl.scrollHeight;
-                const scrollWidth = xHandleEl.scrollWidth;
+                const bodyHeight = bodyScrollElem.clientHeight;
+                const bodyWidth = bodyScrollElem.clientWidth;
+                const scrollHeight = bodyScrollElem.scrollHeight;
+                const scrollWidth = bodyScrollElem.scrollWidth;
                 let isTop = false;
                 let isBottom = false;
                 let isLeft = false;
@@ -28561,6 +28665,7 @@ var VxeTableComponent = defineVxeComponent({
                     isLeft,
                     isRight,
                     direction }, params);
+                updateThumbOffset();
                 updateRowExpandStyle();
                 checkLastSyncScroll(isRollX, isRollY);
                 if (isRollX) {
@@ -28605,6 +28710,7 @@ var VxeTableComponent = defineVxeComponent({
                 }
             },
             triggerBodyScrollEvent(evnt, fixedType) {
+                const { useScrollbar } = props;
                 const { scrollYLoad, scrollXLoad } = reactData;
                 const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
                 if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
@@ -28624,19 +28730,21 @@ var VxeTableComponent = defineVxeComponent({
                 if (!bodyScrollElem) {
                     return;
                 }
-                if (!xHandleEl) {
-                    return;
-                }
-                if (!yHandleEl) {
-                    return;
+                if (!useScrollbar) {
+                    if (!xHandleEl) {
+                        return;
+                    }
+                    if (!yHandleEl) {
+                        return;
+                    }
                 }
                 if (inBodyScroll) {
                     if (scrollRenderType !== fixedType) {
                         return;
                     }
                 }
-                let scrollTop = yHandleEl.scrollTop;
-                let scrollLeft = xHandleEl.scrollLeft;
+                let scrollTop = 0;
+                let scrollLeft = 0;
                 if (leftScrollElem && fixedType === 'left') {
                     scrollTop = leftScrollElem.scrollTop;
                 }
@@ -28777,8 +28885,8 @@ var VxeTableComponent = defineVxeComponent({
                 const rightFixedWidth = computeRightFixedWidth.value;
                 const { elemStore, lastScrollTop, lastScrollLeft } = internalData;
                 const rowOpts = computeRowOpts.value;
-                const scrollbarXOpts = computeScrollbarXOpts.value;
-                const scrollbarYOpts = computeScrollbarYOpts.value;
+                const scrollXVisible = computeScrollXVisible.value;
+                const scrollYVisible = computeScrollYVisible.value;
                 const xHandleEl = refScrollXHandleElem.value;
                 const yHandleEl = refScrollYHandleElem.value;
                 const leftScrollElem = getRefElem(elemStore['left-body-scroll']);
@@ -28801,14 +28909,14 @@ var VxeTableComponent = defineVxeComponent({
                 const isRollY = overflowY && scrollTop !== lastScrollTop;
                 if (isRollX) {
                     // 如果禁用滚动
-                    if (scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') {
+                    if (scrollXVisible === false || scrollXVisible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
                 }
                 if (isRollY) {
                     // 如果禁用滚动
-                    if (scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') {
+                    if (scrollYVisible === false || scrollYVisible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
@@ -29373,6 +29481,168 @@ var VxeTableComponent = defineVxeComponent({
                 return nextTick();
             }
         };
+        const updateThumbSize = () => {
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const trackXEl = refTrackXElem.value;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = refThumbXElem.value;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = refTrackYElem.value;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = refThumbYElem.value;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        };
+        const updateThumbOffset = () => {
+            const { elemStore } = internalData;
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = refTrackXElem.value;
+            const thumbXElem = refThumbXElem.value;
+            const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+            internalData.xThumbLeft = xThumbLeft;
+            if (thumbXElem && xThumbWidth) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+                thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+            }
+            const trackYEl = refTrackYElem.value;
+            const thumbYElem = refThumbYElem.value;
+            const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+            internalData.yThumbTop = yThumbTop;
+            if (thumbYElem && yThumbHeight) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+                thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+            }
+        };
+        const clickTrackXEvent = (evnt) => {
+            const { elemStore } = internalData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const trackRect = trackEl.getBoundingClientRect();
+            viewEl.scrollTo({
+                left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+                behavior: 'auto'
+            });
+        };
+        const clickTrackYEvent = (evnt) => {
+            const { elemStore } = internalData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const trackRect = trackEl.getBoundingClientRect();
+            viewEl.scrollTo({
+                top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+                behavior: 'auto'
+            });
+        };
+        const pointerdownThumbXEvent = (evnt) => {
+            const { elemStore } = internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { xThumbWidth } = reactData;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            const pointerPosition = evnt.clientX - trackRect.left;
+            // 记录 thumb 的偏移
+            const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+            internalData.thumbDragOffset = pointerPosition - thumbOffset;
+        };
+        const pointermoveThumbXEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                if (!viewEl) {
+                    return;
+                }
+                const { xThumbWidth } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+            }
+        };
+        const cleatPointerThumbEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        };
+        const pointerdownThumbYEvent = (evnt) => {
+            const { elemStore } = internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = getRefElem(elemStore['main-body-scroll']);
+            if (!viewEl) {
+                return;
+            }
+            const { yThumbHeight } = reactData;
+            const trackEl = thumbEl.parentElement;
+            const trackRect = trackEl.getBoundingClientRect();
+            const pointerPosition = evnt.clientY - trackRect.top;
+            // 记录 thumb 的偏移
+            const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+            internalData.thumbDragOffset = pointerPosition - thumbOffset;
+        };
+        const pointermoveThumbYEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { elemStore, isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                if (!viewEl) {
+                    return;
+                }
+                const { yThumbHeight } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+            }
+        };
         // 检测对应模块是否安装
         // 'openExport,openPrint,exportData,openImport,importData,saveFile,readFile,importByFile,print'.split(',').forEach(name => {
         //   ($xeTable as any)[name] = function () {
@@ -29397,6 +29667,8 @@ var VxeTableComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
             const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts;
             const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
             const isFixedLeft = fixedType === 'left';
@@ -29407,8 +29679,8 @@ var VxeTableComponent = defineVxeComponent({
                 ref: isFixedLeft ? refLeftContainer : refRightContainer,
                 class: [
                     `vxe-table--fixed-${fixedType}-wrapper`,
-                    `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
-                    `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+                    `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`,
                     {
                         [`x-ob--${osXBehavior}`]: osXBehavior,
                         [`y-ob--${osYBehavior}`]: osYBehavior
@@ -29672,6 +29944,7 @@ var VxeTableComponent = defineVxeComponent({
         };
         const renderScrollY = () => {
             return h('div', {
+                key: 'vsy',
                 ref: refScrollYVirtualElem,
                 class: 'vxe-table--scroll-y-virtual'
             }, [
@@ -29709,12 +29982,15 @@ var VxeTableComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
             const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts;
             const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
             const { leftList, rightList } = columnStore;
             const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior;
             const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
             return h('div', {
+                key: 'tvw',
                 ref: refTableViewportElem,
                 class: ['vxe-table--viewport-wrapper', {
                         [`x-ob--${osXBehavior}`]: osXBehavior,
@@ -29724,8 +30000,8 @@ var VxeTableComponent = defineVxeComponent({
                 h('div', {
                     class: [
                         'vxe-table--main-wrapper',
-                        `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
-                        `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`
+                        `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+                        `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`
                     ]
                 }, [
                     /**
@@ -29767,9 +30043,10 @@ var VxeTableComponent = defineVxeComponent({
                 renderRowExpandedVNs()
             ]);
         };
-        const renderBody = () => {
+        const renderNativeBody = () => {
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             return h('div', {
+                key: 'lnb',
                 class: 'vxe-table--layout-wrapper'
             }, scrollbarYToLeft
                 ? [
@@ -29781,6 +30058,72 @@ var VxeTableComponent = defineVxeComponent({
                     renderScrollY()
                 ]);
         };
+        const renderVirtualBody = () => {
+            const $xeGanttView = internalData.xeGanttView;
+            const { useScrollbar } = props;
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollXAutoHide = computeScrollXAutoHide.value;
+            const scrollYAutoHide = computeScrollYAutoHide.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
+            const hideXScroll = scrollXVisible === false || scrollXVisible === 'hidden';
+            const hideYScroll = scrollYVisible === false || scrollYVisible === 'hidden';
+            return h('div', {
+                key: 'lvb',
+                class: ['vxe-table--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+                        'is--virtual-scrollbar': useScrollbar,
+                        'ov-padding': useScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'overflow-y': yThumbHeight,
+                        'overflow-x': xThumbWidth
+                    }]
+            }, [
+                renderViewport(),
+                h('div', {
+                    class: scrollbarWrapperClss
+                }, [
+                    hideXScroll
+                        ? renderEmptyElement$1($xeTable)
+                        : h('div', {
+                            ref: refTrackXElem,
+                            class: 'vxe-scrollbar--track-x',
+                            onClick: clickTrackXEvent
+                        }, [
+                            h('div', {
+                                ref: refThumbXElem,
+                                class: 'vxe-scrollbar--thumb-x',
+                                onPointerdown: pointerdownThumbXEvent,
+                                onPointermove: pointermoveThumbXEvent,
+                                onPointerup: cleatPointerThumbEvent,
+                                onPointercancel: cleatPointerThumbEvent,
+                                onLostpointercapture: cleatPointerThumbEvent
+                            })
+                        ]),
+                    hideYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)
+                        ? renderEmptyElement$1($xeTable)
+                        : h('div', {
+                            ref: refTrackYElem,
+                            class: 'vxe-scrollbar--track-y',
+                            onClick: clickTrackYEvent
+                        }, [
+                            h('div', {
+                                ref: refThumbYElem,
+                                class: 'vxe-scrollbar--thumb-y',
+                                onPointerdown: pointerdownThumbYEvent,
+                                onPointermove: pointermoveThumbYEvent,
+                                onPointerup: cleatPointerThumbEvent,
+                                onPointercancel: cleatPointerThumbEvent,
+                                onLostpointercapture: cleatPointerThumbEvent
+                            })
+                        ])
+                ])
+            ]);
+        };
         const renderVN = () => {
             const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
             const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData;
@@ -29886,15 +30229,17 @@ var VxeTableComponent = defineVxeComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, scrollbarXToTop
-                    ? [
-                        renderScrollX(),
-                        renderBody()
-                    ]
-                    : [
-                        renderBody(),
-                        renderScrollX()
-                    ]),
+                }, useScrollbar
+                    ? [renderVirtualBody()]
+                    : (scrollbarXToTop
+                        ? [
+                            renderScrollX(),
+                            renderNativeBody()
+                        ]
+                        : [
+                            renderNativeBody(),
+                            renderScrollX()
+                        ])),
                 /**
                  * 空数据
                  */
@@ -30070,7 +30415,8 @@ var VxeTableComponent = defineVxeComponent({
                             key: 'ctp',
                             ref: refCommTooltip,
                             isArrow: false,
-                            enterable: false
+                            enterable: false,
+                            useScrollbar
                         }),
                         /**
                           * 工具提示
@@ -30093,7 +30439,8 @@ var VxeTableComponent = defineVxeComponent({
                             maxHeight: tableTipConfig.maxHeight,
                             placement: tableTipConfig.placement,
                             defaultPlacement: tableTipConfig.defaultPlacement,
-                            popupClassName: tableTipConfig.popupClassName
+                            popupClassName: tableTipConfig.popupClassName,
+                            useScrollbar: tableTipConfig.useScrollbar
                         }, currTooltipSlot
                             ? {
                                 content: () => {
@@ -30132,7 +30479,8 @@ var VxeTableComponent = defineVxeComponent({
                                 theme: validTipConfig.theme,
                                 enterable: validTipConfig.enterable,
                                 enterDelay: validTipConfig.enterDelay,
-                                leaveDelay: validTipConfig.leaveDelay
+                                leaveDelay: validTipConfig.leaveDelay,
+                                useScrollbar
                             })
                             : renderEmptyElement$1($xeTable)
                     ])
@@ -30201,6 +30549,7 @@ var VxeTableComponent = defineVxeComponent({
                 $xeTable.refreshColumn();
             });
         });
+        const reScrollFlag = ref(0);
         const reLayoutFlag = ref(0);
         watch(computeSize, () => {
             reLayoutFlag.value++;
@@ -30233,36 +30582,47 @@ var VxeTableComponent = defineVxeComponent({
         watch(() => props.maxHeight, () => {
             reLayoutFlag.value++;
         });
+        watch(() => VxeUI.getLanguage(), () => {
+            reLayoutFlag.value++;
+        });
         watch(computeScrollbarXToTop, () => {
+            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollbarYToLeft, () => {
+            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
-        watch(() => VxeUI.getLanguage(), () => {
+        watch(computeScrollXVisible, () => {
+            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
-        watch(() => {
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            return scrollbarXOpts.visible;
-        }, () => {
+        watch(computeScrollYVisible, () => {
+            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
-        watch(() => {
-            const scrollbarYOpts = computeScrollbarYOpts.value;
-            return scrollbarYOpts.visible;
-        }, () => {
+        watch(computeScrollXHeight, () => {
+            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
-        watch(() => {
-            const cellOpts = computeCellOpts.value;
-            return cellOpts.height;
-        }, () => {
+        watch(computeScrollYWidth, () => {
+            reScrollFlag.value++;
+            reLayoutFlag.value++;
+        });
+        watch(computeCellHeitht, () => {
             reLayoutFlag.value++;
         });
         watch(reLayoutFlag, () => {
             $xeTable.recalculate(true);
         });
+        watch(reScrollFlag, () => {
+            nextTick(() => {
+                $xeTable.updateScrollbar();
+                nextTick(() => {
+                    $xeTable.updateScrollbar();
+                });
+            });
+        });
         const footFlag = ref(0);
         watch(() => props.footerData ? props.footerData.length : -1, () => {
             footFlag.value++;
@@ -30378,7 +30738,6 @@ var VxeTableComponent = defineVxeComponent({
             }
         });
         $xeTable.preventEvent(null, 'created', { $table: $xeTable });
-        let resizeObserver;
         onActivated(() => {
             $xeTable.recalculate().then(() => $xeTable.refreshScroll());
             $xeTable.preventEvent(null, 'activated', { $table: $xeTable });
@@ -30394,7 +30753,7 @@ var VxeTableComponent = defineVxeComponent({
         });
         onMounted(() => {
             const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props;
-            const { scrollXStore, scrollYStore } = internalData;
+            const { elemStore, scrollXStore, scrollYStore } = internalData;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
             const aggregateOpts = computeAggregateOpts.value;
@@ -30667,12 +31026,26 @@ var VxeTableComponent = defineVxeComponent({
             handleUpdateRowGroup(groupFields);
             initData();
             nextTick(() => {
-                if (props.autoResize) {
-                    const el = refElem.value;
+                const { useScrollbar, autoResize } = props;
+                const el = refElem.value;
+                if (useScrollbar) {
+                    const viewInnerEl = getRefElem(elemStore['main-body-table']);
+                    const scrollObserver = globalResize.create(() => {
+                        reScrollFlag.value++;
+                    });
+                    if (el) {
+                        scrollObserver.observe(el);
+                    }
+                    if (viewInnerEl) {
+                        scrollObserver.observe(viewInnerEl);
+                    }
+                    internalData.scrollObserver = scrollObserver;
+                }
+                if (autoResize) {
                     const parentEl = $xeTable.getParentElem();
-                    resizeObserver = globalResize.create(() => {
+                    const resizeObserver = globalResize.create(() => {
                         if (props.autoResize) {
-                            layoutReFlag.value++;
+                            handleResizeEvent();
                         }
                     });
                     if (el) {
@@ -30681,6 +31054,7 @@ var VxeTableComponent = defineVxeComponent({
                     if (parentEl) {
                         resizeObserver.observe(parentEl);
                     }
+                    internalData.resizeObserver = resizeObserver;
                 }
             });
             if (virtualYOpts.mode !== 'scroll') {
@@ -30702,7 +31076,7 @@ var VxeTableComponent = defineVxeComponent({
             $xeTable.preventEvent(null, 'mounted', { $table: $xeTable });
         });
         onBeforeUnmount(() => {
-            const { _sToTime } = internalData;
+            const { resizeObserver, scrollObserver, _sToTime } = internalData;
             if (_sToTime) {
                 clearTimeout(_sToTime);
             }
@@ -30713,6 +31087,9 @@ var VxeTableComponent = defineVxeComponent({
             internalData.cvCacheMaps = {};
             internalData.prevDragRow = null;
             internalData.prevDragCol = null;
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }