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

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.3";
+const version = "4.23.0-beta.5";
 VxeUI.version = version;
 VxeUI.tableVersion = version;
 VxeUI.setConfig({
@@ -219,7 +219,7 @@ VxeUI.setConfig({
             destroyOnClose: true,
             multiple: true,
             showIcon: true,
-            maxHeight: 280
+            maxHeight: 320
         },
         floatingFilterConfig: {
         // enabled: false
@@ -952,7 +952,7 @@ function getPopupAppendElement(appendTo) {
 }
 
 const { log } = VxeUI;
-const tableVersion = `table v${"4.23.0-beta.3"}`;
+const tableVersion = `table v${"4.23.0-beta.5"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -1406,8 +1406,7 @@ function createReactData$2() {
             isIndeterminate: false,
             style: null,
             column: null,
-            visible: false,
-            maxHeight: null
+            visible: false
         },
         // 存放列相关的信息
         columnStore: {
@@ -7670,6 +7669,7 @@ var TableFilterPanelComponent = defineVxeComponent({
     },
     setup(props, context) {
         const xID = XEUtils.uniqueId();
+        const VxeUIScrollbarComponent = VxeUI.getComponent('VxeScrollbar');
         const $xeTable = inject('$xeTable', {});
         const { reactData: tableReactData, internalData: tableInternalData, getComputeMaps } = $xeTable;
         const { computeFilterOpts, computeRendererOpts } = getComputeMaps();
@@ -7757,10 +7757,12 @@ var TableFilterPanelComponent = defineVxeComponent({
         Object.assign($xeFilterPanel, filterPanelMethods);
         const renderOptions = (filterRender, compConf) => {
             const { filterStore } = props;
-            const { column, maxHeight } = filterStore;
+            const { column } = filterStore;
             if (!column) {
                 return [];
             }
+            const filterOpts = computeFilterOpts.value;
+            const { useScrollbar } = filterOpts;
             const { filterMultiple, filters, slots } = column;
             const filterOptions = (filters || []);
             const filterSlot = slots ? slots.filter : null;
@@ -7769,34 +7771,46 @@ var TableFilterPanelComponent = defineVxeComponent({
             if (filterSlot) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, $xeTable.callSlot(filterSlot, params))
                 ];
             }
             else if (filterRender && rtFilter) {
                 return [
                     h('div', {
-                        class: 'vxe-table--filter-template',
-                        style: maxHeight
-                            ? {
-                                maxHeight: toCssUnit(maxHeight)
-                            }
-                            : {}
+                        class: 'vxe-table--filter-template'
                     }, getSlotVNs(rtFilter(filterRender, params)))
                 ];
             }
             const isAllChecked = filterMultiple ? filterStore.isAllSelected : !filterOptions.some((item) => item._checked);
             const isAllIndeterminate = filterMultiple && filterStore.isIndeterminate;
+            const optVNs = filterOptions.map((item) => {
+                const isChecked = item._checked;
+                return h('div', {
+                    class: ['vxe-table--filter-option', {
+                            'is--checked': item._checked
+                        }],
+                    title: item.label,
+                    onClick: (evnt) => {
+                        changeOption(evnt, !item._checked, item);
+                    }
+                }, (filterMultiple
+                    ? [
+                        h('span', {
+                            class: ['vxe-checkbox--icon', (isChecked ? getIcon$5().TABLE_CHECKBOX_CHECKED : getIcon$5().TABLE_CHECKBOX_UNCHECKED)]
+                        })
+                    ]
+                    : []).concat([
+                    h('span', {
+                        class: 'vxe-checkbox--label'
+                    }, formatText(item.label, 1))
+                ]));
+            });
             return [
-                h('ul', {
+                h('div', {
                     class: 'vxe-table--filter-header'
                 }, [
-                    h('li', {
+                    h('div', {
                         class: ['vxe-table--filter-option', {
                                 'is--checked': isAllChecked,
                                 'is--indeterminate': isAllIndeterminate
@@ -7817,35 +7831,16 @@ var TableFilterPanelComponent = defineVxeComponent({
                         }, getI18n$9('vxe.table.allFilter'))
                     ]))
                 ]),
-                h('ul', {
-                    class: 'vxe-table--filter-body',
-                    style: maxHeight
-                        ? {
-                            maxHeight: toCssUnit(maxHeight)
-                        }
-                        : {}
-                }, filterOptions.map((item) => {
-                    const isChecked = item._checked;
-                    return h('li', {
-                        class: ['vxe-table--filter-option', {
-                                'is--checked': item._checked
-                            }],
-                        title: item.label,
-                        onClick: (evnt) => {
-                            changeOption(evnt, !item._checked, item);
-                        }
-                    }, (filterMultiple
-                        ? [
-                            h('span', {
-                                class: ['vxe-checkbox--icon', (isChecked ? getIcon$5().TABLE_CHECKBOX_CHECKED : getIcon$5().TABLE_CHECKBOX_UNCHECKED)]
-                            })
-                        ]
-                        : []).concat([
-                        h('span', {
-                            class: 'vxe-checkbox--label'
-                        }, formatText(item.label, 1))
-                    ]));
-                }))
+                useScrollbar
+                    ? h(VxeUIScrollbarComponent, {
+                        class: 'vxe-table--scrollbar-filter-body',
+                        viewClassName: 'vxe-table--scrollbar-filter-body-view'
+                    }, {
+                        default: () => optVNs
+                    })
+                    : h('div', {
+                        class: 'vxe-table--filter-body'
+                    }, optVNs)
             ];
         };
         const renderFooters = () => {
@@ -8955,7 +8950,7 @@ hooks$7.add('tableFilterModule', {
         const { refElem, refTableFilter } = $xeTable.getRefMaps();
         const { computeFilterOpts, computeMouseOpts, computeRendererOpts } = $xeTable.getComputeMaps();
         const updatePopupStyle = () => {
-            const { filterStore } = reactData;
+            const { filterStore, scrollbarHeight } = reactData;
             const { elemStore } = internalData;
             const { column, targetEl } = filterStore;
             if (!column) {
@@ -8976,8 +8971,6 @@ hooks$7.add('tableFilterModule', {
             if (!filterWrapperElem) {
                 return nextTick();
             }
-            const filterHeadElem = filterWrapperElem.querySelector('.vxe-table--filter-header');
-            const filterFootElem = filterWrapperElem.querySelector('.vxe-table--filter-footer');
             /**
              * 是否显示筛选按钮图标
              * 如果不存在图标，则相对单元格居中显示
@@ -9014,7 +9007,7 @@ hooks$7.add('tableFilterModule', {
                     const centerWidth = targetEl ? filterWidth / 2 : ((filterWidth - column.renderWidth) / 2);
                     left = btnRect.left - tableRect.left - centerWidth;
                     top = btnRect.top - tableRect.top + currEl.clientHeight;
-                    maxHeight = Math.max(40, tableEl.clientHeight - top - (filterHeadElem ? filterHeadElem.clientHeight : 0) - (filterFootElem ? filterFootElem.clientHeight : 0) - 14);
+                    maxHeight = Math.max(40, tableEl.clientHeight - top - scrollbarHeight);
                     if (left < 1) {
                         left = 1;
                     }
@@ -9036,7 +9029,6 @@ hooks$7.add('tableFilterModule', {
                 if (zIndex) {
                     panelStyle.zIndex = zIndex;
                 }
-                filterStore.style = panelStyle;
                 // 筛选面板是自适应表格高度
                 if (compConf ? !compConf.tableFilterAutoHeight : false) {
                     maxHeight = 0;
@@ -9046,8 +9038,8 @@ hooks$7.add('tableFilterModule', {
                         maxHeight = customMaxHeight > maxHeight ? maxHeight : customMaxHeight;
                     }
                 }
-                // 判断面板不能大于表格高度
-                filterStore.maxHeight = maxHeight;
+                panelStyle['--vxe-ui-vxe-table-filter-default-max-height'] = maxHeight ? toCssUnit(maxHeight) : 'none';
+                filterStore.style = panelStyle;
             };
             handleStyle();
             return nextTick().then(() => {
@@ -16003,8 +15995,7 @@ 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, 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 { getConfig: getConfig$2, getIcon: getIcon$1, getI18n: getI18n$2, renderer: renderer$1, formats, 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 supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
@@ -16031,11 +16022,10 @@ var VxeTableComponent = defineVxeComponent({
         const $xeGantt = inject('$xeGantt', null);
         const $xeGGWrapper = $xeGrid || $xeGantt;
         const { computeSize } = useFns$2.useSize(props);
+        const { computeIsVScrollbar } = useFns$2.useVScrollbar(props);
         const crossTableDragRowInfo = getCrossTableDragRowInfo();
         const reactData = reactive(createReactData$2());
         const internalData = createInternalData$3();
-        let tableMethods = {};
-        let tablePrivateMethods = {};
         const refElem = ref();
         const refVarElem = ref();
         const refTooltip = ref();
@@ -16079,10 +16069,6 @@ 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;
@@ -16324,8 +16310,8 @@ var VxeTableComponent = defineVxeComponent({
             return Object.assign({}, getConfig$2().table.checkboxConfig, props.checkboxConfig);
         });
         const computeTooltipOpts = computed(() => {
-            const { useScrollbar } = props;
-            return Object.assign({ useScrollbar }, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
+            const isVScrollbar = computeIsVScrollbar.value;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
         });
         const computeHeaderTooltipOpts = computed(() => {
             const tooltipOpts = computeTooltipOpts.value;
@@ -16360,7 +16346,8 @@ var VxeTableComponent = defineVxeComponent({
             return Object.assign({ orders: ['asc', 'desc', null] }, getConfig$2().table.sortConfig, props.sortConfig);
         });
         const computeFilterOpts = computed(() => {
-            return Object.assign({}, getConfig$2().table.filterConfig, props.filterConfig);
+            const isVScrollbar = computeIsVScrollbar.value;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig$2().table.filterConfig, props.filterConfig);
         });
         const computeFloatingFilterOpts = computed(() => {
             return Object.assign({}, getConfig$2().table.floatingFilterConfig, props.floatingFilterConfig);
@@ -16750,7 +16737,9 @@ var VxeTableComponent = defineVxeComponent({
         };
         const computeMaps = {
             computeSize,
+            computeIsVScrollbar,
             computeTableId,
+            computeTableStyle,
             computeValidOpts,
             computeRowField,
             computeVirtualXOpts,
@@ -16851,6 +16840,7 @@ var VxeTableComponent = defineVxeComponent({
             // 已废弃
             xegrid: $xeGrid
         };
+        const { refTrackXElem, refTrackYElem, refThumbXElem, refThumbYElem, updateThumbSize, updateThumbOffset, clickTrackXEvent, clickTrackYEvent, pointerdownThumbXEvent, pointermoveThumbXEvent, cleatPointerThumbEvent, pointerdownThumbYEvent, pointermoveThumbYEvent } = useFns$2.useInitVScrollbar($xeTable);
         const eqCellValue = (newRow, oldRow, field) => {
             const val1 = XEUtils.get(newRow, field);
             const val2 = XEUtils.get(oldRow, field);
@@ -19401,6 +19391,7 @@ var VxeTableComponent = defineVxeComponent({
                 if (reFull) {
                     updateTreeLineStyle();
                 }
+                updateScrollbar();
                 internalData.rceRunTime = Date.now();
                 if (reFull) {
                     return computeScrollLoad();
@@ -19408,8 +19399,14 @@ var VxeTableComponent = defineVxeComponent({
             });
         };
         const updateScrollbar = () => {
-            updateThumbSize();
-            updateThumbOffset();
+            const isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                return nextTick().then(() => {
+                    updateThumbSize();
+                    updateThumbOffset();
+                });
+            }
+            return Promise.resolve();
         };
         const defaultMinRunDelay = 50;
         const handleLazyRecalculate = (reFull, reWidth, reHeight, options) => {
@@ -20922,11 +20919,16 @@ var VxeTableComponent = defineVxeComponent({
                 return nextTick();
             };
         };
-        tableMethods = {
+        const tableMethods = {
             dispatchEvent,
             getEl() {
                 return refElem.value;
             },
+            getScrollViewElem() {
+                const { elemStore } = internalData;
+                const viewEl = getRefElem(elemStore['main-body-scroll']);
+                return viewEl;
+            },
             /**
              * 重置表格的一切数据状态
              */
@@ -25492,7 +25494,13 @@ var VxeTableComponent = defineVxeComponent({
         /**
          * 内部方法
          */
-        tablePrivateMethods = {
+        const tablePrivateMethods = {
+            getReactData() {
+                return reactData;
+            },
+            getInternalData() {
+                return internalData;
+            },
             getSetupOptions() {
                 return getConfig$2();
             },
@@ -28710,8 +28718,8 @@ var VxeTableComponent = defineVxeComponent({
                 }
             },
             triggerBodyScrollEvent(evnt, fixedType) {
-                const { useScrollbar } = props;
                 const { scrollYLoad, scrollXLoad } = reactData;
+                const isVScrollbar = computeIsVScrollbar.value;
                 const { elemStore, intoRunScroll, lastScrollTop, lastScrollLeft, inWheelScroll, inVirtualScroll, inHeaderScroll, inBodyScroll, scrollRenderType, inFooterScroll } = internalData;
                 if (inWheelScroll || inVirtualScroll || inHeaderScroll || inFooterScroll) {
                     return;
@@ -28730,7 +28738,7 @@ var VxeTableComponent = defineVxeComponent({
                 if (!bodyScrollElem) {
                     return;
                 }
-                if (!useScrollbar) {
+                if (!isVScrollbar) {
                     if (!xHandleEl) {
                         return;
                     }
@@ -29481,166 +29489,22 @@ 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 bindScrollbarResize = () => {
             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 isVScrollbar = computeIsVScrollbar.value;
+            if (isVScrollbar) {
+                const el = refElem.value;
+                const viewInnerEl = getRefElem(elemStore['main-body-table']);
+                const scrollObserver = globalResize.create(() => {
+                    reScrollFlag.value++;
+                });
+                if (el) {
+                    scrollObserver.observe(el);
                 }
-                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;
+                if (viewInnerEl) {
+                    scrollObserver.observe(viewInnerEl);
                 }
-                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);
+                internalData.scrollObserver = scrollObserver;
             }
         };
         // 检测对应模块是否安装
@@ -30060,8 +29924,8 @@ var VxeTableComponent = defineVxeComponent({
         };
         const renderVirtualBody = () => {
             const $xeGanttView = internalData.xeGanttView;
-            const { useScrollbar } = props;
             const { xThumbWidth, yThumbHeight } = reactData;
+            const isVScrollbar = computeIsVScrollbar.value;
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollXAutoHide = computeScrollXAutoHide.value;
             const scrollYAutoHide = computeScrollYAutoHide.value;
@@ -30075,10 +29939,10 @@ var VxeTableComponent = defineVxeComponent({
             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,
+                        'is--virtual-scrollbar': isVScrollbar,
+                        'ov-padding': isVScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
                         'overflow-y': yThumbHeight,
                         'overflow-x': xThumbWidth
                     }]
@@ -30125,10 +29989,11 @@ var VxeTableComponent = defineVxeComponent({
             ]);
         };
         const renderVN = () => {
-            const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props;
+            const { loading, stripe, 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;
             const { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData;
             const { leftList, rightList } = columnStore;
+            const isVScrollbar = computeIsVScrollbar.value;
             const loadingSlot = slots.loading;
             const tipSlots = {
                 header: slots.headerTooltip || slots['header-tooltip'],
@@ -30168,7 +30033,7 @@ var VxeTableComponent = defineVxeComponent({
             if (isCrossTableDrag && !tableData.length) {
                 tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, isVScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
                         [`size--${vSize}`]: vSize,
                         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
                         'vxe-editable': !!editConfig,
@@ -30229,7 +30094,7 @@ var VxeTableComponent = defineVxeComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, useScrollbar
+                }, isVScrollbar
                     ? [renderVirtualBody()]
                     : (scrollbarXToTop
                         ? [
@@ -30416,7 +30281,7 @@ var VxeTableComponent = defineVxeComponent({
                             ref: refCommTooltip,
                             isArrow: false,
                             enterable: false,
-                            useScrollbar
+                            useScrollbar: isVScrollbar
                         }),
                         /**
                           * 工具提示
@@ -30480,7 +30345,7 @@ var VxeTableComponent = defineVxeComponent({
                                 enterable: validTipConfig.enterable,
                                 enterDelay: validTipConfig.enterDelay,
                                 leaveDelay: validTipConfig.leaveDelay,
-                                useScrollbar
+                                useScrollbar: validTipConfig.useScrollbar
                             })
                             : renderEmptyElement$1($xeTable)
                     ])
@@ -30585,42 +30450,43 @@ var VxeTableComponent = defineVxeComponent({
         watch(() => VxeUI.getLanguage(), () => {
             reLayoutFlag.value++;
         });
+        watch(computeIsVScrollbar, () => {
+            nextTick(() => {
+                bindScrollbarResize();
+                nextTick(() => {
+                    reLayoutFlag.value++;
+                });
+            });
+        });
         watch(computeScrollbarXToTop, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollbarYToLeft, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollXVisible, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollYVisible, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollXHeight, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeScrollYWidth, () => {
-            reScrollFlag.value++;
             reLayoutFlag.value++;
         });
         watch(computeCellHeitht, () => {
             reLayoutFlag.value++;
         });
         watch(reLayoutFlag, () => {
-            $xeTable.recalculate(true);
+            nextTick().then(() => {
+                $xeTable.recalculate(true);
+            });
         });
         watch(reScrollFlag, () => {
-            nextTick(() => {
-                $xeTable.updateScrollbar();
-                nextTick(() => {
-                    $xeTable.updateScrollbar();
-                });
+            updateScrollbar().then(() => {
+                updateScrollbar();
             });
         });
         const footFlag = ref(0);
@@ -30753,7 +30619,7 @@ var VxeTableComponent = defineVxeComponent({
         });
         onMounted(() => {
             const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props;
-            const { elemStore, scrollXStore, scrollYStore } = internalData;
+            const { scrollXStore, scrollYStore } = internalData;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
             const aggregateOpts = computeAggregateOpts.value;
@@ -31026,22 +30892,9 @@ var VxeTableComponent = defineVxeComponent({
             handleUpdateRowGroup(groupFields);
             initData();
             nextTick(() => {
-                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;
-                }
+                const { autoResize } = props;
                 if (autoResize) {
+                    const el = refElem.value;
                     const parentEl = $xeTable.getParentElem();
                     const resizeObserver = globalResize.create(() => {
                         if (props.autoResize) {
@@ -31056,6 +30909,7 @@ var VxeTableComponent = defineVxeComponent({
                     }
                     internalData.resizeObserver = resizeObserver;
                 }
+                bindScrollbarResize();
             });
             if (virtualYOpts.mode !== 'scroll') {
                 const tableViewportEl = refTableViewportElem.value;
@@ -31884,6 +31738,7 @@ var VxeGridComponent = defineVxeComponent({
         const VxeUIPagerComponent = VxeUI.getComponent('VxePager');
         const defaultLayouts = [['Form'], ['Toolbar', 'Top', 'Table', 'Bottom', 'Pager']];
         const { computeSize } = useFns.useSize(props);
+        const { computeIsVScrollbar } = useFns.useVScrollbar(props);
         const reactData = reactive(createReactData());
         const internalData = createInternalData();
         const refElem = ref();
@@ -32066,6 +31921,8 @@ var VxeGridComponent = defineVxeComponent({
             refPopupContainerElem
         };
         const computeMaps = {
+            computeSize,
+            computeIsVScrollbar,
             computeProxyOpts,
             computePagerOpts,
             computeFormOpts,