vxe-pc-ui 4.20.1 → 4.20.2

package/dist/all.esm.js

@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.20.1"}`;
+const uiVersion = `ui v${"4.20.2"}`;
 function createComponentLog(name) {
     const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
     const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -115,7 +115,7 @@ function createComponentLog(name) {
 const warnLog$j = log.create('warn', uiVersion);
 log.create('error', uiVersion);
 
-const version = "4.20.1";
+const version = "4.20.2";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -6548,10 +6548,8 @@ var VxeScrollbarComponent = defineVxeComponent({
         const internalData = createInternalData$m();
         const computeWrapperStyle = computed(() => {
             const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props;
-            const xOpts = computeXOpts.value;
-            const yOpts = computeYOpts.value;
-            const barWidth = yOpts.width;
-            const barHeight = xOpts.height;
+            const barWidth = computeYWidth.value;
+            const barHeight = computeXHeight.value;
             const stys = {};
             if (width) {
                 stys.width = toCssUnit(width);
@@ -6577,6 +6575,14 @@ var VxeScrollbarComponent = defineVxeComponent({
             }
             return stys;
         });
+        const computeXHeight = computed(() => {
+            const xOpts = computeXOpts.value;
+            return xOpts.height;
+        });
+        const computeYWidth = computed(() => {
+            const yOpts = computeYOpts.value;
+            return yOpts.width;
+        });
         const computeXVisible = computed(() => {
             const { visible } = props;
             const xOpts = computeXOpts.value;
@@ -7043,6 +7049,12 @@ var VxeScrollbarComponent = defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(computeYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeXHeight, () => {
+            reFlag.value++;
+        });
         watch(computeXVisible, () => {
             nextTick(() => {
                 reFlag.value++;
@@ -7134,7 +7146,7 @@ var VxeCardComponent = defineVxeComponent({
         },
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$4().card.useScrollbar
+            default: () => getDefaultConfig(getConfig$4().card.useScrollbar, getConfig$4().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -7861,8 +7873,9 @@ function createInternalData$l() {
         afterList: [],
         fullKeyMaps: {},
         rowMaps: {},
-        // 滚动条
         // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
         // isThumbDrag: false,
         thumbDragOffset: 0,
         yThumbTop: 0,
@@ -7925,7 +7938,7 @@ var VxeListComponent = defineVxeComponent({
         scrollY: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$4().list.useScrollbar
+            default: () => getDefaultConfig(getConfig$4().list.useScrollbar, getConfig$4().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -8012,11 +8025,8 @@ var VxeListComponent = defineVxeComponent({
         });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
-            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig$4().scrollbar.width);
-            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig$4().scrollbar.height);
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
             const stys = {};
             if (rowHeight) {
                 stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
@@ -8051,6 +8061,16 @@ var VxeListComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             return Object.assign({}, getConfig$4().scrollbar.yConfig, scrollbarOpts.yConfig);
         });
+        const computeScrollXHeight = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig$4().scrollbar.height);
+        });
+        const computeScrollYWidth = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig$4().scrollbar.width);
+        });
         const computeScrollXVisible = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -8072,15 +8092,11 @@ var VxeListComponent = defineVxeComponent({
             return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig$4().scrollbar.autoHide);
         });
         const computeScrollbarWrapperClss = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const { padding } = scrollbarOpts;
             const { yThumbHeight, xThumbWidth } = reactData;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             const scrollXVisible = computeScrollXVisible.value;
             const scrollYVisible = computeScrollYVisible.value;
-            const scrollXAutoHide = computeScrollXAutoHide.value;
-            const scrollYAutoHide = computeScrollYAutoHide.value;
             return domUtils$1.buildClass([
                 'vxe-scrollbar is--virtual',
                 `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
@@ -8088,9 +8104,6 @@ var VxeListComponent = defineVxeComponent({
                 `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
                 `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
             ], {
-                'is--padding': padding,
-                'ov-x--auto-hide': scrollXAutoHide,
-                'ov-y--auto-hide': scrollYAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -8116,6 +8129,10 @@ var VxeListComponent = defineVxeComponent({
             const keyField = computeKeyField.value;
             return getRowIdByField(row, keyField);
         };
+        const getParentElem = () => {
+            const el = refElem.value;
+            return el ? el.parentElement : null;
+        };
         const calcTableHeight = (key) => {
             const { parentHeight } = reactData;
             const val = props[key];
@@ -10162,6 +10179,12 @@ var VxeListComponent = defineVxeComponent({
         watch(computeRowHeight, () => {
             reFlag.value++;
         });
+        watch(computeScrollYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reFlag.value++;
+        });
         watch(computeScrollXVisible, () => {
             nextTick(() => {
                 reFlag.value++;
@@ -10221,20 +10244,32 @@ var VxeListComponent = defineVxeComponent({
             if (useKey && !keyField) {
                 errLog$j('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            if (useScrollbar || autoResize) {
-                const el = refElem.value;
+            const el = refElem.value;
+            if (useScrollbar) {
                 const viewInnerEl = refVirtualBody.value;
-                const resizeObserver = globalResize$1.create(() => {
+                const scrollObserver = globalResize$1.create(() => {
                     reFlag.value++;
                 });
                 if (el) {
-                    resizeObserver.observe(el);
-                    if (autoResize) {
-                        resizeObserver.observe(el.parentElement);
-                    }
+                    scrollObserver.observe(el);
                 }
                 if (viewInnerEl) {
-                    resizeObserver.observe(viewInnerEl);
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+            if (autoResize) {
+                const parentEl = getParentElem();
+                const resizeObserver = globalResize$1.create(() => {
+                    if (props.autoResize) {
+                        reFlag.value++;
+                    }
+                });
+                if (el) {
+                    resizeObserver.observe(el);
+                }
+                if (parentEl) {
+                    resizeObserver.observe(parentEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
@@ -10244,10 +10279,13 @@ var VxeListComponent = defineVxeComponent({
             });
         });
         onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
+            const { scrollObserver, resizeObserver } = internalData;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
             globalEvents$1.off($xeList, 'resize');
             XEUtils.assign(reactData, createReactData$m());
             XEUtils.assign(internalData, createInternalData$l());
@@ -25011,7 +25049,12 @@ var VxeDrawerComponent = defineVxeComponent({
             default: () => getConfig$4().drawer.size || getConfig$4().size
         },
         beforeHideMethod: Function,
-        slots: Object
+        slots: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefaultConfig(getConfig$4().drawer.useScrollbar, getConfig$4().useScrollbar)
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -25072,6 +25115,25 @@ var VxeDrawerComponent = defineVxeComponent({
             }
             return 'wl';
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().modal.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarProps = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: scrollbarOpts.className,
+                viewAttrs: scrollbarOpts.viewAttrs,
+                viewClassName: 'vxe-drawer--scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-drawer--scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {};
         const $xeDrawer = {
             xID,
@@ -25372,10 +25434,40 @@ var VxeDrawerComponent = defineVxeComponent({
             return renderEmptyElement$1($xeDrawer);
         };
         const renderBody = () => {
-            const { slots: propSlots = {}, content, useHtml } = props;
+            const { slots: propSlots = {}, content, useScrollbar, useHtml } = props;
+            const scrollbarProps = computeScrollbarProps.value;
             const defaultSlot = slots.default || propSlots.default;
             const leftSlot = slots.left || propSlots.left;
             const rightSlot = slots.right || propSlots.right;
+            const contVNs = [];
+            if (useHtml && !defaultSlot) {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbar, Object.assign({ key: 'shc', class: 'vxe-drawer--scrollbar-content' }, scrollbarProps), {
+                        default() {
+                            return [
+                                h('div', {
+                                    class: 'vxe-drawer--scrollbar-content-html',
+                                    innerHTML: getFuncText(content)
+                                })
+                            ];
+                        }
+                    })
+                    : h('div', {
+                        key: 'hc',
+                        class: 'vxe-drawer--content',
+                        innerHTML: getFuncText(content)
+                    }));
+            }
+            else {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbar, Object.assign({ key: 'sdc', class: 'vxe-drawer--scrollbar-content' }, scrollbarProps), {
+                        default: () => defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer })) : getFuncText(content)
+                    })
+                    : h('div', {
+                        key: 'dc',
+                        class: 'vxe-drawer--content'
+                    }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer })) : getFuncText(content)));
+            }
             return h('div', {
                 class: 'vxe-drawer--body'
             }, [
@@ -25386,18 +25478,7 @@ var VxeDrawerComponent = defineVxeComponent({
                     : renderEmptyElement$1($xeDrawer),
                 h('div', {
                     class: 'vxe-drawer--body-default'
-                }, [
-                    useHtml && !defaultSlot
-                        ? h('div', {
-                            key: 'hc',
-                            class: 'vxe-drawer--content',
-                            innerHTML: getFuncText(content)
-                        })
-                        : h('div', {
-                            key: 'dc',
-                            class: 'vxe-drawer--content'
-                        }, defaultSlot ? getSlotVNs(defaultSlot({ $drawer: $xeDrawer })) : getFuncText(content))
-                ]),
+                }, contVNs),
                 rightSlot
                     ? h('div', {
                         class: 'vxe-drawer--body-right'
@@ -29897,7 +29978,7 @@ var VxeLayoutAsideComponent = defineVxeComponent({
         collapseConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$4().layoutAside.useScrollbar
+            default: () => getDefaultConfig(getConfig$4().layoutAside.useScrollbar, getConfig$4().useScrollbar)
         },
         scrollbarConfig: Object,
         size: {
@@ -30036,7 +30117,7 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         backtopConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$4().layoutBody.useScrollbar
+            default: () => getDefaultConfig(getConfig$4().layoutBody.useScrollbar, getConfig$4().useScrollbar)
         },
         scrollbarConfig: Object,
         size: {
@@ -30550,7 +30631,7 @@ var VxeMenuComponent = defineVxeComponent({
         menuConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$1().menu.useScrollbar
+            default: () => getDefaultConfig(getConfig$1().menu.useScrollbar, getConfig$1().useScrollbar)
         },
         scrollbarConfig: Object,
         appendTo: {
@@ -31452,6 +31533,11 @@ var VxeModalComponent = defineVxeComponent({
         },
         beforeHideMethod: Function,
         slots: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefaultConfig(getConfig$4().modal.useScrollbar, getConfig$4().useScrollbar)
+        },
+        scrollbarConfig: Object,
         /**
          * 已废弃
          * @deprecated
@@ -31525,6 +31611,25 @@ var VxeModalComponent = defineVxeComponent({
         const computeZoomOpts = computed(() => {
             return Object.assign({}, getConfig$4().modal.zoomConfig, props.zoomConfig);
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().modal.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarProps = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: scrollbarOpts.className,
+                viewAttrs: scrollbarOpts.viewAttrs,
+                viewClassName: 'vxe-modal--scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-modal--scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {
             computeSize,
             computeZoomOpts
@@ -32543,9 +32648,10 @@ var VxeModalComponent = defineVxeComponent({
             return renderEmptyElement$1($xeModal);
         };
         const renderBody = () => {
-            const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props;
+            const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props;
             const content = props.content || message;
             const isMsg = computeIsMsg.value;
+            const scrollbarProps = computeScrollbarProps.value;
             const defaultSlot = slots.default || propSlots.default;
             const leftSlot = slots.left || propSlots.left;
             const rightSlot = slots.right || propSlots.right;
@@ -32559,16 +32665,34 @@ var VxeModalComponent = defineVxeComponent({
                     })
                 ]));
             }
-            contVNs.push(useHtml && !defaultSlot
-                ? h('div', {
-                    key: 'hc',
-                    class: 'vxe-modal--content',
-                    innerHTML: getFuncText(content)
-                })
-                : h('div', {
-                    key: 'dc',
-                    class: 'vxe-modal--content'
-                }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)));
+            if (useHtml && !defaultSlot) {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbar, Object.assign({ key: 'shc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
+                        default() {
+                            return [
+                                h('div', {
+                                    class: 'vxe-modal--scrollbar-content-html',
+                                    innerHTML: getFuncText(content)
+                                })
+                            ];
+                        }
+                    })
+                    : h('div', {
+                        key: 'hc',
+                        class: 'vxe-modal--content',
+                        innerHTML: getFuncText(content)
+                    }));
+            }
+            else {
+                contVNs.push(useScrollbar
+                    ? h(VxeScrollbar, Object.assign({ key: 'sdc', class: 'vxe-modal--scrollbar-content' }, scrollbarProps), {
+                        default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
+                    })
+                    : h('div', {
+                        key: 'dc',
+                        class: 'vxe-modal--content'
+                    }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)));
+            }
             return h('div', {
                 class: 'vxe-modal--body'
             }, [
@@ -41390,7 +41514,7 @@ var VxeTabsComponent = defineVxeComponent({
         },
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig$4().tabs.useScrollbar
+            default: () => getDefaultConfig(getConfig$4().tabs.useScrollbar, getConfig$4().useScrollbar)
         },
         scrollbarConfig: Object,
         // 已废弃
@@ -43623,8 +43747,9 @@ function createInternalData$2() {
         indeterminateNodeMaps: {},
         treeExpandedMaps: {},
         treeExpandLazyLoadedMaps: {},
-        // 滚动条
         // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
         // isThumbDrag: false,
         thumbDragOffset: 0,
         yThumbTop: 0,
@@ -43780,7 +43905,7 @@ var VxeTreeComponent = defineVxeComponent({
         virtualYConfig: Object,
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig().tree.useScrollbar
+            default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object
     },
@@ -43890,11 +44015,8 @@ var VxeTreeComponent = defineVxeComponent({
             return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
         });
         const computeWrapperStyles = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
-            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
-            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
             const stys = {};
             if (barWidth || barHeight) {
                 stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
@@ -43947,6 +44069,16 @@ var VxeTreeComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
         });
+        const computeScrollXHeight = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+        });
+        const computeScrollYWidth = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+        });
         const computeScrollXVisible = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -43968,15 +44100,11 @@ var VxeTreeComponent = defineVxeComponent({
             return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
         });
         const computeScrollbarWrapperClss = computed(() => {
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const { padding } = scrollbarOpts;
             const { yThumbHeight, xThumbWidth } = reactData;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             const scrollXVisible = computeScrollXVisible.value;
             const scrollYVisible = computeScrollYVisible.value;
-            const scrollXAutoHide = computeScrollXAutoHide.value;
-            const scrollYAutoHide = computeScrollYAutoHide.value;
             return domUtils$1.buildClass([
                 'vxe-scrollbar is--virtual',
                 `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
@@ -43984,9 +44112,6 @@ var VxeTreeComponent = defineVxeComponent({
                 `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
                 `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
             ], {
-                'is--padding': padding,
-                'ov-x--auto-hide': scrollXAutoHide,
-                'ov-y--auto-hide': scrollYAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -47238,6 +47363,12 @@ var VxeTreeComponent = defineVxeComponent({
         watch(() => props.useScrollbar, () => {
             reFlag.value++;
         });
+        watch(computeScrollYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reFlag.value++;
+        });
         watch(computeScrollXVisible, () => {
             nextTick(() => {
                 reFlag.value++;
@@ -47275,23 +47406,32 @@ var VxeTreeComponent = defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog$2('vxe.error.reqComp', ['vxe-context-menu']);
             }
+            const el = refElem.value;
             if (useScrollbar || autoResize) {
-                const el = refElem.value;
                 const viewInnerEl = refVirtualBody.value;
+                const scrollObserver = globalResize$1.create(() => {
+                    updateScrollbar();
+                });
+                if (el) {
+                    scrollObserver.observe(el);
+                }
+                if (viewInnerEl) {
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+            if (autoResize) {
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize$1.create(() => {
-                    reFlag.value++;
+                    if (props.autoResize) {
+                        reFlag.value++;
+                    }
                 });
                 if (el) {
                     resizeObserver.observe(el);
-                    if (autoResize) {
-                        if (parentEl) {
-                            resizeObserver.observe(parentEl);
-                        }
-                    }
                 }
-                if (viewInnerEl) {
-                    resizeObserver.observe(viewInnerEl);
+                if (parentEl) {
+                    resizeObserver.observe(parentEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
@@ -47301,10 +47441,13 @@ var VxeTreeComponent = defineVxeComponent({
             });
         });
         onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
+            const { scrollObserver, resizeObserver } = internalData;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
             globalEvents$1.off($xeTree, 'resize');
             XEUtils.assign(reactData, createReactData$2());
             XEUtils.assign(internalData, createInternalData$2());