vxe-table 4.23.0-beta.2 → 4.23.0-beta.4

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.2";
+const version = "4.23.0-beta.4";
 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
@@ -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.2"}`;
+const tableVersion = `table v${"4.23.0-beta.4"}`;
 function createComponentLog(name) {
     const uiVersion = VxeUI.uiVersion ? `ui v${VxeUI.uiVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -1392,8 +1406,7 @@ function createReactData$2() {
             isIndeterminate: false,
             style: null,
             column: null,
-            visible: false,
-            maxHeight: null
+            visible: false
         },
         // 存放列相关的信息
         columnStore: {
@@ -4299,61 +4312,6 @@ function clearColAnimate(elem, clss) {
     }, 500);
 }
 
-/**
- * 计算滚动条滑块的长度
- */
-function getThumbSize(viewportSize, contentSize, trackSize) {
-    if (contentSize <= viewportSize) {
-        return 0;
-    }
-    const ratio = viewportSize / contentSize;
-    const ideal = trackSize * ratio;
-    return Math.max(20, Math.min(ideal, trackSize));
-}
-/**
- * 计算滚动条滑块的偏移位置
- */
-function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0) {
-        return 0;
-    }
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxThumbOffset <= 0) {
-        return 0;
-    }
-    const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
-    const ratio = clamped / maxScroll;
-    return ratio * maxThumbOffset;
-}
-/**
- * 根据点击轨道的位置，计算滑块的偏移位置
- */
-function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxThumbOffset = trackSize - thumbSize;
-    const maxScroll = contentSize - viewportSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = clickPosition - thumbSize / 2;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    const scrollOffset = (thumbOffset / maxThumbOffset) * maxScroll;
-    return scrollOffset;
-}
-/**
- * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
- */
-function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
-    const maxScroll = contentSize - viewportSize;
-    const maxThumbOffset = trackSize - thumbSize;
-    if (maxScroll <= 0 || maxThumbOffset <= 0) {
-        return 0;
-    }
-    let thumbOffset = pointerPosition - dragOffset;
-    thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
-    return (thumbOffset / maxThumbOffset) * maxScroll;
-}
-
 // 跨表拖拽
 const crossTableDragRowInfo = reactive({
     row: null
@@ -6449,8 +6407,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) {
@@ -7711,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();
@@ -7798,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;
@@ -7810,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
@@ -7858,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 = () => {
@@ -8996,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) {
@@ -9017,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');
             /**
              * 是否显示筛选按钮图标
              * 如果不存在图标，则相对单元格居中显示
@@ -9044,6 +8996,7 @@ hooks$7.add('tableFilterModule', {
                 if (transfer) {
                     const ppObj = updatePanelPlacement(currEl, filterWrapperElem, {
                         defaultPlacement: 'bottom',
+                        appendTo: '',
                         isMinWidth: false,
                         teleportTo: transfer
                     });
@@ -9054,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;
                     }
@@ -9076,7 +9029,6 @@ hooks$7.add('tableFilterModule', {
                 if (zIndex) {
                     panelStyle.zIndex = zIndex;
                 }
-                filterStore.style = panelStyle;
                 // 筛选面板是自适应表格高度
                 if (compConf ? !compConf.tableFilterAutoHeight : false) {
                     maxHeight = 0;
@@ -9086,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(() => {
@@ -16043,7 +15995,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, domUtils, 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;
@@ -16070,6 +16023,7 @@ 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();
@@ -16363,7 +16317,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 isVScrollbar = computeIsVScrollbar.value;
+            return Object.assign({ useScrollbar: isVScrollbar }, getConfig$2().tooltip, getConfig$2().table.tooltipConfig, props.tooltipConfig);
         });
         const computeHeaderTooltipOpts = computed(() => {
             const tooltipOpts = computeTooltipOpts.value;
@@ -16398,7 +16353,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);
@@ -16788,6 +16744,7 @@ var VxeTableComponent = defineVxeComponent({
         };
         const computeMaps = {
             computeSize,
+            computeIsVScrollbar,
             computeTableId,
             computeValidOpts,
             computeRowField,
@@ -19439,6 +19396,7 @@ var VxeTableComponent = defineVxeComponent({
                 if (reFull) {
                     updateTreeLineStyle();
                 }
+                updateScrollbar();
                 internalData.rceRunTime = Date.now();
                 if (reFull) {
                     return computeScrollLoad();
@@ -19446,8 +19404,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) => {
@@ -28748,8 +28712,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;
@@ -28768,7 +28732,7 @@ var VxeTableComponent = defineVxeComponent({
                 if (!bodyScrollElem) {
                     return;
                 }
-                if (!useScrollbar) {
+                if (!isVScrollbar) {
                     if (!xHandleEl) {
                         return;
                     }
@@ -29519,6 +29483,24 @@ var VxeTableComponent = defineVxeComponent({
                 return nextTick();
             }
         };
+        const bindScrollbarResize = () => {
+            const { elemStore } = internalData;
+            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);
+                }
+                if (viewInnerEl) {
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+        };
         const updateThumbSize = () => {
             const { elemStore } = internalData;
             const viewEl = getRefElem(elemStore['main-body-scroll']);
@@ -30098,8 +30080,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;
@@ -30113,10 +30095,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
                     }]
@@ -30163,10 +30145,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'],
@@ -30206,7 +30189,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,
@@ -30267,7 +30250,7 @@ var VxeTableComponent = defineVxeComponent({
                 h('div', {
                     key: 'tw',
                     class: 'vxe-table--render-wrapper'
-                }, useScrollbar
+                }, isVScrollbar
                     ? [renderVirtualBody()]
                     : (scrollbarXToTop
                         ? [
@@ -30453,7 +30436,8 @@ var VxeTableComponent = defineVxeComponent({
                             key: 'ctp',
                             ref: refCommTooltip,
                             isArrow: false,
-                            enterable: false
+                            enterable: false,
+                            useScrollbar: isVScrollbar
                         }),
                         /**
                           * 工具提示
@@ -30476,7 +30460,8 @@ var VxeTableComponent = defineVxeComponent({
                             maxHeight: tableTipConfig.maxHeight,
                             placement: tableTipConfig.placement,
                             defaultPlacement: tableTipConfig.defaultPlacement,
-                            popupClassName: tableTipConfig.popupClassName
+                            popupClassName: tableTipConfig.popupClassName,
+                            useScrollbar: tableTipConfig.useScrollbar
                         }, currTooltipSlot
                             ? {
                                 content: () => {
@@ -30515,7 +30500,8 @@ var VxeTableComponent = defineVxeComponent({
                                 theme: validTipConfig.theme,
                                 enterable: validTipConfig.enterable,
                                 enterDelay: validTipConfig.enterDelay,
-                                leaveDelay: validTipConfig.leaveDelay
+                                leaveDelay: validTipConfig.leaveDelay,
+                                useScrollbar: validTipConfig.useScrollbar
                             })
                             : renderEmptyElement$1($xeTable)
                     ])
@@ -30620,42 +30606,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);
@@ -30788,7 +30775,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;
@@ -31061,22 +31048,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) {
@@ -31091,6 +31065,7 @@ var VxeTableComponent = defineVxeComponent({
                     }
                     internalData.resizeObserver = resizeObserver;
                 }
+                bindScrollbarResize();
             });
             if (virtualYOpts.mode !== 'scroll') {
                 const tableViewportEl = refTableViewportElem.value;
@@ -31919,6 +31894,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();
@@ -32101,6 +32077,8 @@ var VxeGridComponent = defineVxeComponent({
             refPopupContainerElem
         };
         const computeMaps = {
+            computeSize,
+            computeIsVScrollbar,
             computeProxyOpts,
             computePagerOpts,
             computeFormOpts,