vxe-pc-ui 4.20.0 → 4.20.2

package/dist/all.esm.js

@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.20.0"}`;
+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.0";
+const version = "4.20.2";
 VxeUI.uiVersion = version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -2694,6 +2694,9 @@ function enModelValue(nodeid) {
 function deModelValue(nodeid) {
     return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid;
 }
+function getDefaultConfig(val1, def1) {
+    return XEUtils.eqNull(val1) ? def1 : val1;
+}
 
 function createReactData$p() {
     return {
@@ -6479,6 +6482,7 @@ var VxeScrollbarComponent = defineVxeComponent({
     name: 'VxeScrollbar',
     props: {
         id: [String, Number],
+        viewId: [String, Number],
         width: [String, Number],
         height: [String, Number],
         minWidth: [String, Number],
@@ -6494,6 +6498,14 @@ var VxeScrollbarComponent = defineVxeComponent({
             type: Boolean,
             default: () => getConfig$2().scrollbar.padding
         },
+        autoHide: {
+            type: Boolean,
+            default: () => getConfig$2().scrollbar.autoHide
+        },
+        visible: {
+            type: Boolean,
+            default: () => getConfig$2().scrollbar.visible
+        },
         xConfig: Object,
         yConfig: Object,
         className: {
@@ -6536,8 +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 = computeYWidth.value;
+            const barHeight = computeXHeight.value;
             const stys = {};
             if (width) {
                 stys.width = toCssUnit(width);
@@ -6557,33 +6569,61 @@ var VxeScrollbarComponent = defineVxeComponent({
             if (maxHeight) {
                 stys.maxHeight = toCssUnit(maxHeight);
             }
-            if (yOpts.width) {
-                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
-            }
-            if (xOpts.height) {
-                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height);
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
             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;
+            return getDefaultConfig(xOpts.visible, visible);
+        });
+        const computeYVisible = computed(() => {
+            const { visible } = props;
+            const yOpts = computeYOpts.value;
+            return getDefaultConfig(yOpts.visible, visible);
+        });
+        const computeXAutoHide = computed(() => {
+            const { autoHide } = props;
+            const xOpts = computeXOpts.value;
+            return getDefaultConfig(xOpts.autoHide, autoHide);
+        });
+        const computeYAutoHide = computed(() => {
+            const { autoHide } = props;
+            const yOpts = computeYOpts.value;
+            return getDefaultConfig(yOpts.autoHide, autoHide);
+        });
         const computeWrapperClss = computed(() => {
             const { native, className, padding } = props;
             const { yThumbHeight, xThumbWidth } = reactData;
-            const xOpts = computeXOpts.value;
-            const yOpts = computeYOpts.value;
             const xToTop = computeXToTop.value;
             const yToLeft = computeYToLeft.value;
+            const xVisible = computeXVisible.value;
+            const yVisible = computeYVisible.value;
+            const xAutoHide = computeXAutoHide.value;
+            const yAutoHide = computeYAutoHide.value;
             return domUtils.buildClass([
                 'vxe-scrollbar',
-                `ov-x--${xOpts.visible || 'visible'}`,
-                `ov-y--${yOpts.visible || 'visible'}`,
+                `ov-x--${xVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${yVisible === false ? 'hidden' : 'visible'}`,
                 `sx-pos--${xToTop ? 'top' : 'bottom'}`,
                 `sy-pos--${yToLeft ? 'left' : 'right'}`,
                 native ? 'is--native' : 'is--virtual',
                 className
             ], {
                 'is--padding': padding,
-                'ov-x--auto-hide': xOpts.autoHide,
-                'ov-y--auto-hide': yOpts.autoHide,
+                'ov-x--auto-hide': xAutoHide,
+                'ov-y--auto-hide': yAutoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -6923,13 +6963,13 @@ var VxeScrollbarComponent = defineVxeComponent({
         const scrollbarPrivateMethods = {};
         Object.assign($xeScrollbar, scrollbarMethods, scrollbarPrivateMethods);
         const renderVN = () => {
-            const { id, native, loading, viewAttrs } = props;
+            const { id, native, loading, viewId, viewAttrs } = props;
             const wrapperStyle = computeWrapperStyle.value;
             const wrapperClss = computeWrapperClss.value;
             const viewClss = computeViewClss.value;
             const viewInnerClss = computeViewInnerClss.value;
-            const xOpts = computeXOpts.value;
-            const yOpts = computeYOpts.value;
+            const xVisible = computeXVisible.value;
+            const yVisible = computeYVisible.value;
             const defaultSlot = slots.default;
             return h('div', {
                 ref: refElem,
@@ -6937,14 +6977,14 @@ var VxeScrollbarComponent = defineVxeComponent({
                 class: wrapperClss,
                 style: wrapperStyle
             }, [
-                h('div', Object.assign({ ref: refViewElem, class: viewClss, onScroll: scrollEvent }, viewAttrs), [
+                h('div', Object.assign({ ref: refViewElem, class: viewClss, onScroll: scrollEvent, id: viewId || null }, viewAttrs), [
                     h('div', {
                         key: 'vi',
                         ref: refViewInnerElem,
                         class: viewInnerClss
                     }, defaultSlot ? defaultSlot({}) : [])
                 ]),
-                native || xOpts.visible === 'hidden'
+                native || xVisible === false
                     ? renderEmptyElement($xeScrollbar)
                     : h('div', {
                         ref: refTrackXElem,
@@ -6961,7 +7001,7 @@ var VxeScrollbarComponent = defineVxeComponent({
                             onLostpointercapture: cleatPointerThumbEvent
                         })
                     ]),
-                native || yOpts.visible === 'hidden'
+                native || yVisible === false
                     ? renderEmptyElement($xeScrollbar)
                     : h('div', {
                         ref: refTrackYElem,
@@ -7009,6 +7049,22 @@ var VxeScrollbarComponent = defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(computeYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeXHeight, () => {
+            reFlag.value++;
+        });
+        watch(computeXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeYVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
         watch(reFlag, () => {
             $xeScrollbar.recalculate().then(() => {
                 $xeScrollbar.recalculate();
@@ -7090,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
     },
@@ -7118,6 +7174,19 @@ var VxeCardComponent = defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig$4().card.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarProps = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            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
+            };
+        });
         const computeMaps = {
             computeSize
         };
@@ -7149,6 +7218,7 @@ var VxeCardComponent = defineVxeComponent({
             const vSize = computeSize.value;
             const cardStyle = computeCardStyle.value;
             const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarProps = computeScrollbarProps.value;
             const { viewClassName, viewInnerClassName } = scrollbarOpts;
             return h('div', {
                 ref: refElem,
@@ -7183,7 +7253,7 @@ var VxeCardComponent = defineVxeComponent({
                 }, [
                     leftSlot
                         ? (useScrollbar
-                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-left' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-left-view', viewInnerClassName: 'vxe-card--body-scrollbar-left-inner' }), {
+                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-left' }, scrollbarProps), { viewClassName: 'vxe-card--body-scrollbar-left-view', viewInnerClassName: 'vxe-card--body-scrollbar-left-inner' }), {
                                 default: () => getSlotVNs(leftSlot({}))
                             })
                             : h('div', {
@@ -7191,7 +7261,7 @@ var VxeCardComponent = defineVxeComponent({
                             }, getSlotVNs(leftSlot({}))))
                         : renderEmptyElement$1($xeCard),
                     useScrollbar
-                        ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-content' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
+                        ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-content' }, scrollbarProps), { viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
                             default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
                         })
                         : h('div', {
@@ -7199,7 +7269,7 @@ var VxeCardComponent = defineVxeComponent({
                         }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
                     rightSlot
                         ? (useScrollbar
-                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-right' }, scrollbarOpts), { viewClassName: 'vxe-card--body-scrollbar-right-view', viewInnerClassName: 'vxe-card--body-scrollbar-right-inner' }), {
+                            ? h(VxeScrollbar, Object.assign(Object.assign({ class: 'vxe-card--body-scrollbar-right' }, scrollbarProps), { viewClassName: 'vxe-card--body-scrollbar-right-view', viewInnerClassName: 'vxe-card--body-scrollbar-right-inner' }), {
                                 default: () => getSlotVNs(rightSlot({}))
                             })
                             : h('div', {
@@ -7803,8 +7873,9 @@ function createInternalData$l() {
         afterList: [],
         fullKeyMaps: {},
         rowMaps: {},
-        // 滚动条
         // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
         // isThumbDrag: false,
         thumbDragOffset: 0,
         yThumbTop: 0,
@@ -7867,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
     },
@@ -7902,7 +7973,6 @@ var VxeListComponent = defineVxeComponent({
         const refFooterElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
-        const refViewInnerElem = ref();
         const refTrackXElem = ref();
         const refTrackYElem = ref();
         const refThumbXElem = ref();
@@ -7955,17 +8025,15 @@ var VxeListComponent = defineVxeComponent({
         });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
             const stys = {};
             if (rowHeight) {
                 stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
             }
-            if (scrollbarYOpts.width) {
-                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
-            }
-            if (scrollbarXOpts.height) {
-                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
             }
             return stys;
         });
@@ -7993,24 +8061,49 @@ var VxeListComponent = defineVxeComponent({
             const scrollbarOpts = computeScrollbarOpts.value;
             return Object.assign({}, getConfig$4().scrollbar.yConfig, scrollbarOpts.yConfig);
         });
-        const computeScrollbarWrapperClss = computed(() => {
+        const computeScrollXHeight = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { padding } = scrollbarOpts;
-            const { yThumbHeight, xThumbWidth } = reactData;
             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;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollYVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
             const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollXAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig$4().scrollbar.autoHide);
+        });
+        const computeScrollYAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig$4().scrollbar.autoHide);
+        });
+        const computeScrollbarWrapperClss = computed(() => {
+            const { yThumbHeight, xThumbWidth } = reactData;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
             return domUtils$1.buildClass([
                 'vxe-scrollbar is--virtual',
-                `ov-x--${scrollbarXOpts.visible || 'visible'}`,
-                `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
                 `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
                 `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
             ], {
-                'is--padding': padding,
-                'ov-x--auto-hide': scrollbarXOpts.autoHide,
-                'ov-y--auto-hide': scrollbarYOpts.autoHide,
                 'overflow-y': yThumbHeight,
                 'overflow-x': xThumbWidth
             });
@@ -8036,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];
@@ -9889,7 +9986,7 @@ var VxeListComponent = defineVxeComponent({
         };
         const renderVN = () => {
             const { showCheckbox, className, loading, useScrollbar } = props;
-            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
+            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -9904,22 +10001,38 @@ var VxeListComponent = defineVxeComponent({
             const rowOpts = computeRowOpts.value;
             const { isHover, padding } = rowOpts;
             const isDrag = computeIsDrag.value;
-            const scrollbarXOpts = computeScrollbarXOpts.value;
-            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXAutoHide = computeScrollXAutoHide.value;
+            const scrollYAutoHide = computeScrollYAutoHide.value;
             const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
             const showDefChekboxHead = showCheckbox && showHeader !== false;
             const leOns = {};
             if (isCrossListDrag && !rowList.length) {
                 leOns.onDragover = $xeList.handleCrossListRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
+            return h('div', Object.assign({ ref: refElem, class: [
+                    'vxe-list',
+                    useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                    useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                    useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                    useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                    className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '',
+                    {
                         [`size--${vSize}`]: vSize,
                         'is--virtual-scrollbar': useScrollbar,
-                        'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-                        'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
+                        'ov-padding': useScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'overflow-y': yThumbHeight,
+                        'overflow-x': xThumbWidth,
                         'is--drag': isDrag,
                         'is--loading': loading
-                    }], style: wrapperStyles }, leOns), [
+                    }
+                ], style: wrapperStyles }, leOns), [
                 headerSlot || showDefChekboxHead
                     ? h('div', {
                         ref: refHeaderElem,
@@ -9976,15 +10089,7 @@ var VxeListComponent = defineVxeComponent({
                         style: {
                             marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
                         }
-                    }, useScrollbar
-                        ? (defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
-                        : [
-                            h('div', {
-                                key: 'vi',
-                                ref: refViewInnerElem,
-                                class: 'vxe-scrollbar--view-inner'
-                            }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
-                        ])
+                    }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
                 ]),
                 footerSlot
                     ? h('div', {
@@ -9999,7 +10104,7 @@ var VxeListComponent = defineVxeComponent({
                     ? h('div', {
                         class: scrollbarWrapperClss
                     }, [
-                        scrollbarXOpts.visible === 'hidden'
+                        scrollXVisible === false
                             ? renderEmptyElement$1($xeList)
                             : h('div', {
                                 ref: refTrackXElem,
@@ -10016,7 +10121,7 @@ var VxeListComponent = defineVxeComponent({
                                     onLostpointercapture: cleatPointerThumbEvent
                                 })
                             ]),
-                        scrollbarYOpts.visible === 'hidden'
+                        scrollYVisible === false
                             ? renderEmptyElement$1($xeList)
                             : h('div', {
                                 ref: refTrackYElem,
@@ -10068,11 +10173,30 @@ var VxeListComponent = defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(() => props.useScrollbar, () => {
+            reFlag.value++;
+        });
         watch(computeRowHeight, () => {
             reFlag.value++;
         });
-        watch(reFlag, () => {
+        watch(computeScrollYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeScrollYVisible, () => {
             nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(reFlag, () => {
+            recalculate().then(() => {
                 recalculate();
             });
         });
@@ -10120,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 viewInnerEl = refViewInnerElem.value;
-                const resizeObserver = globalResize$1.create(() => {
+            const el = refElem.value;
+            if (useScrollbar) {
+                const viewInnerEl = refVirtualBody.value;
+                const scrollObserver = globalResize$1.create(() => {
                     reFlag.value++;
                 });
-                resizeObserver.observe(el);
-                if (autoResize) {
-                    if (el) {
-                        resizeObserver.observe(el.parentElement);
-                    }
+                if (el) {
+                    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;
             }
@@ -10143,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());
@@ -24910,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',
@@ -24971,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,
@@ -25271,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'
             }, [
@@ -25285,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'
@@ -29796,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: {
@@ -29857,7 +30039,7 @@ var VxeLayoutAsideComponent = defineVxeComponent({
             const vSize = computeSize.value;
             const collapseOpts = computeCollapseOpts.value;
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { native, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts;
+            const { className, viewClassName, viewInnerClassName } = scrollbarOpts;
             const defaultSlot = slots.default;
             return h('aside', {
                 ref: refElem,
@@ -29872,13 +30054,16 @@ var VxeLayoutAsideComponent = defineVxeComponent({
             }, [
                 useScrollbar
                     ? h(VxeScrollbar, {
-                        native,
+                        width: scrollbarOpts.width,
+                        height: scrollbarOpts.height,
+                        autoHide: scrollbarOpts.autoHide,
+                        visible: scrollbarOpts.visible,
                         xConfig: {
-                            visible: 'hidden'
+                            visible: false
                         },
-                        yConfig,
+                        yConfig: scrollbarOpts.yConfig,
                         className: 'vxe-layout-aside--scrollbar' + (className ? (' ' + className) : ''),
-                        viewAttrs,
+                        viewAttrs: scrollbarOpts.viewAttrs,
                         viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
                         viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
                     }, {
@@ -29932,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: {
@@ -29960,6 +30145,23 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig$4().layoutBody.scrollbarConfig, props.scrollbarConfig);
         });
+        const computeScrollbarProps = computed(() => {
+            const { showBacktop } = props;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const { className, viewClassName, viewInnerClassName } = scrollbarOpts;
+            return {
+                width: scrollbarOpts.width,
+                height: scrollbarOpts.height,
+                autoHide: scrollbarOpts.autoHide,
+                visible: scrollbarOpts.visible,
+                xConfig: scrollbarOpts.xConfig,
+                yConfig: scrollbarOpts.yConfig,
+                className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
+                viewAttrs: Object.assign(Object.assign({}, scrollbarOpts.viewAttrs), { id: showBacktop ? (backtopId || null) : null }),
+                viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {
             computeSize
         };
@@ -29983,8 +30185,7 @@ var VxeLayoutBodyComponent = defineVxeComponent({
         const renderVN = () => {
             const { loading, padding, showBacktop, useScrollbar } = props;
             const backtopOpts = computeBacktopOpts.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const { native, xConfig, yConfig, className, viewAttrs, viewClassName, viewInnerClassName } = scrollbarOpts;
+            const scrollbarProps = computeScrollbarProps.value;
             const vSize = computeSize.value;
             const defaultSlot = slots.default;
             const backtopSlot = slots.backtop;
@@ -30009,15 +30210,7 @@ var VxeLayoutBodyComponent = defineVxeComponent({
                     }]
             }, [
                 useScrollbar
-                    ? h(VxeScrollbar, {
-                        native,
-                        xConfig,
-                        yConfig,
-                        className: 'vxe-layout-body--scrollbar' + (className ? (' ' + className) : ''),
-                        viewAttrs: Object.assign(Object.assign({}, viewAttrs), { id: showBacktop ? (backtopId || null) : null }),
-                        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? (' ' + viewClassName) : ''),
-                        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? (' ' + viewInnerClassName) : '')
-                    }, {
+                    ? h(VxeScrollbar, scrollbarProps, {
                         default: () => defaultSlot ? defaultSlot({}) : []
                     })
                     : h('div', {
@@ -30438,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: {
@@ -31340,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
@@ -31413,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
@@ -32431,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;
@@ -32447,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'
             }, [
@@ -41278,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,
         // 已废弃
@@ -41379,6 +41615,22 @@ var VxeTabsComponent = defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig$4().tabs.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-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+                viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            };
+        });
         const computeMaps = {};
         const $xeTabs = {
             xID,
@@ -41958,13 +42210,12 @@ var VxeTabsComponent = defineVxeComponent({
             const { initNames, activeName } = reactData;
             const { name, slots } = item;
             const defaultSlot = slots ? slots.default : null;
-            const scrollbarOpts = computeScrollbarOpts.value;
-            const { viewClassName, viewInnerClassName } = scrollbarOpts;
+            const scrollbarProps = computeScrollbarProps.value;
             if (name && initNames.includes(name)) {
                 return useScrollbar
-                    ? h(VxeScrollbar, Object.assign(Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
+                    ? h(VxeScrollbar, Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
                                 'is--visible': activeName === name
-                            }] }, scrollbarOpts), { viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''), viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '') }), {
+                            }] }, scrollbarProps), {
                         default: () => defaultSlot ? callSlot(defaultSlot, { name }) : []
                     })
                     : h('div', {
@@ -43456,6 +43707,34 @@ const { menus, getConfig, getI18n, getIcon } = VxeUI;
 function getNodeUniqueId() {
     return XEUtils.uniqueId('node_');
 }
+function createReactData$2() {
+    return {
+        parentHeight: 0,
+        customHeight: 0,
+        customMinHeight: 0,
+        customMaxHeight: 0,
+        currentNode: null,
+        scrollYLoad: false,
+        bodyHeight: 0,
+        topSpaceHeight: 0,
+        selectRadioKey: null,
+        treeList: [],
+        updateExpandedFlag: 1,
+        updateCheckboxFlag: 1,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
+        insertNodeFlag: 1,
+        removeNodeFlag: 1,
+        dragNode: null,
+        dragTipText: '',
+        isCrossDragNode: false,
+        tooltipStore: {
+            visible: false,
+            node: null
+        }
+    };
+}
 function createInternalData$2() {
     return {
         // initialized: false,
@@ -43468,8 +43747,15 @@ function createInternalData$2() {
         indeterminateNodeMaps: {},
         treeExpandedMaps: {},
         treeExpandLazyLoadedMaps: {},
-        lastScrollLeft: 0,
+        // resizeObserver: undefined,
+        // 滚动条
+        // scrollObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         scrollYStore: {
             startIndex: 0,
             endIndex: 0,
@@ -43486,31 +43772,6 @@ function createInternalData$2() {
         // hpTimeout: undefined
     };
 }
-function createReactData$2() {
-    return {
-        parentHeight: 0,
-        customHeight: 0,
-        customMinHeight: 0,
-        customMaxHeight: 0,
-        currentNode: null,
-        scrollYLoad: false,
-        bodyHeight: 0,
-        topSpaceHeight: 0,
-        selectRadioKey: null,
-        treeList: [],
-        updateExpandedFlag: 1,
-        updateCheckboxFlag: 1,
-        insertNodeFlag: 1,
-        removeNodeFlag: 1,
-        dragNode: null,
-        dragTipText: '',
-        isCrossDragNode: false,
-        tooltipStore: {
-            visible: false,
-            node: null
-        }
-    };
-}
 let crossTreeDragNodeObj = null;
 var VxeTreeComponent = defineVxeComponent({
     name: 'VxeTree',
@@ -43641,7 +43902,12 @@ var VxeTreeComponent = defineVxeComponent({
             type: String,
             default: () => getConfig().tree.size || getConfig().size
         },
-        virtualYConfig: Object
+        virtualYConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -43673,6 +43939,10 @@ var VxeTreeComponent = defineVxeComponent({
         const refFooterWrapperElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
         const refDragNodeLineElem = ref();
         const refDragTipElem = ref();
         const refTooltip = ref();
@@ -43744,6 +44014,16 @@ var VxeTreeComponent = defineVxeComponent({
         const computeMenuOpts = computed(() => {
             return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
         });
+        const computeWrapperStyles = computed(() => {
+            const barWidth = computeScrollYWidth.value;
+            const barHeight = computeScrollXHeight.value;
+            const stys = {};
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
+            }
+            return stys;
+        });
         const computeTreeStyle = computed(() => {
             const { indent } = props;
             const { customHeight, customMinHeight, customMaxHeight } = reactData;
@@ -43776,6 +44056,74 @@ var VxeTreeComponent = defineVxeComponent({
         const computeFilterOpts = computed(() => {
             return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarXOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+                visible: false
+            });
+        });
+        const computeScrollbarYOpts = computed(() => {
+            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;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollYVisible = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        });
+        const computeScrollXAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        });
+        const computeScrollYAutoHide = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        });
+        const computeScrollbarWrapperClss = computed(() => {
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            return domUtils$1.buildClass([
+                'vxe-scrollbar is--virtual',
+                `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+                `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+                `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+            ], {
+                'overflow-y': yThumbHeight,
+                'overflow-x': xThumbWidth
+            });
+        });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.position === 'top';
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.position === 'left';
+        });
         const computeMaps = {
             computeKeyField,
             computeParentField,
@@ -44293,6 +44641,10 @@ var VxeTreeComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
@@ -44314,6 +44666,7 @@ var VxeTreeComponent = defineVxeComponent({
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
+                updateScrollbar();
                 updateHeight();
                 return computeScrollLoad().then(() => {
                     updateHeight();
@@ -44347,6 +44700,7 @@ var VxeTreeComponent = defineVxeComponent({
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
+            updateThumbOffset();
             internalData.lastScrollTop = scrollTop;
             internalData.lastScrollLeft = scrollLeft;
             if (reactData.scrollYLoad) {
@@ -44891,13 +45245,6 @@ var VxeTreeComponent = defineVxeComponent({
             emitRadioMode(value);
             dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
         };
-        const handleGlobalResizeEvent = () => {
-            const el = refElem.value;
-            if (!el || !el.clientWidth) {
-                return;
-            }
-            recalculate();
-        };
         const insertTreeNode = (newRecords, isAppend) => {
             const { treeFullData, nodeMaps } = internalData;
             const keyField = computeKeyField.value;
@@ -46331,6 +46678,162 @@ var VxeTreeComponent = defineVxeComponent({
                 hideDropTip();
             }
         };
+        const updateThumbSize = () => {
+            const viewEl = refVirtualWrapper.value;
+            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 viewEl = refVirtualWrapper.value;
+            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 trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = refVirtualWrapper.value;
+            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 trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = refVirtualWrapper.value;
+            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 thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = refVirtualWrapper.value;
+            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 { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = refVirtualWrapper.value;
+                if (!viewEl) {
+                    return;
+                }
+                const { xThumbWidth } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+            }
+        };
+        const cleatPointerThumbEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        };
+        const pointerdownThumbYEvent = (evnt) => {
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = refVirtualWrapper.value;
+            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 { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = refVirtualWrapper.value;
+                if (!viewEl) {
+                    return;
+                }
+                const { yThumbHeight } = reactData;
+                const thumbEl = evnt.currentTarget;
+                const trackEl = thumbEl.parentElement;
+                const trackRect = trackEl.getBoundingClientRect();
+                // 更新偏移
+                viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+            }
+        };
         Object.assign($xeTree, treeMethods, treePrivateMethods);
         const renderDragIcon = (node, nodeid) => {
             const { drag, transform } = props;
@@ -46640,13 +47143,14 @@ var VxeTreeComponent = defineVxeComponent({
             return renderEmptyElement$1($xeTree);
         };
         const renderVN = () => {
-            const { loading, trigger, showLine } = props;
-            const { bodyHeight, topSpaceHeight, treeList, tooltipStore } = reactData;
+            const { loading, trigger, showLine, useScrollbar } = props;
+            const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData;
             const vSize = computeSize.value;
             const radioOpts = computeRadioOpts.value;
             const checkboxOpts = computeCheckboxOpts.value;
             const loadingOpts = computeLoadingOpts.value;
             const isNodeHover = computeIsNodeHover.value;
+            const wrapperStyles = computeWrapperStyles.value;
             const treeStyle = computeTreeStyle.value;
             const dragOpts = computeDragOpts.value;
             const tooltipOpts = computeTooltipOpts.value;
@@ -46654,19 +47158,40 @@ var VxeTreeComponent = defineVxeComponent({
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const tooltipSlot = slots.tooltip;
+            const scrollbarOpts = computeScrollbarOpts.value;
+            const scrollXVisible = computeScrollXVisible.value;
+            const scrollYVisible = computeScrollYVisible.value;
+            const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const scrollXAutoHide = computeScrollXAutoHide.value;
+            const scrollYAutoHide = computeScrollYAutoHide.value;
+            const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
             const teOns = {};
             if (dragOpts.isCrossTreeDrag && !treeList.length) {
                 teOns.onDragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-tree', {
+            return h('div', Object.assign({ ref: refElem, class: [
+                    'vxe-tree',
+                    useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '',
+                    useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '',
+                    useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '',
+                    useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '',
+                    {
                         [`size--${vSize}`]: vSize,
                         'show--line': showLine,
+                        'is--virtual-scrollbar': useScrollbar,
+                        'ov-padding': useScrollbar && scrollbarOpts.padding,
+                        'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+                        'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+                        'overflow-y': yThumbHeight,
+                        'overflow-x': xThumbWidth,
                         'checkbox--highlight': checkboxOpts.highlight,
                         'radio--highlight': radioOpts.highlight,
                         'node--hover': isNodeHover,
                         'node--trigger': trigger === 'node',
                         'is--loading': loading
-                    }] }, teOns), [
+                    }
+                ], style: wrapperStyles }, teOns), [
                 headerSlot
                     ? h('div', {
                         ref: refHeaderWrapperElem,
@@ -46699,6 +47224,49 @@ var VxeTreeComponent = defineVxeComponent({
                         class: 'vxe-tree--footer-wrapper'
                     }, footerSlot({ $tree: $xeTree }))
                     : renderEmptyElement$1($xeTree),
+                /**
+                 * 滚动条
+                 */
+                useScrollbar
+                    ? h('div', {
+                        class: scrollbarWrapperClss
+                    }, [
+                        scrollXVisible === false
+                            ? renderEmptyElement$1($xeTree)
+                            : h('div', {
+                                ref: refTrackXElem,
+                                class: 'vxe-scrollbar--track-x',
+                                onClick: clickTrackXEvent
+                            }, [
+                                h('div', {
+                                    ref: refThumbXElem,
+                                    class: 'vxe-scrollbar--thumb-x',
+                                    onPointerdown: pointerdownThumbXEvent,
+                                    onPointermove: pointermoveThumbXEvent,
+                                    onPointerup: cleatPointerThumbEvent,
+                                    onPointercancel: cleatPointerThumbEvent,
+                                    onLostpointercapture: cleatPointerThumbEvent
+                                })
+                            ]),
+                        scrollYVisible === false
+                            ? renderEmptyElement$1($xeTree)
+                            : h('div', {
+                                ref: refTrackYElem,
+                                class: 'vxe-scrollbar--track-y',
+                                onClick: clickTrackYEvent
+                            }, [
+                                h('div', {
+                                    ref: refThumbYElem,
+                                    class: 'vxe-scrollbar--thumb-y',
+                                    onPointerdown: pointerdownThumbYEvent,
+                                    onPointermove: pointermoveThumbYEvent,
+                                    onPointerup: cleatPointerThumbEvent,
+                                    onPointercancel: cleatPointerThumbEvent,
+                                    onLostpointercapture: cleatPointerThumbEvent
+                                })
+                            ])
+                    ])
+                    : renderEmptyElement$1($xeTree),
                 /**
                  * 拖拽提示
                  */
@@ -46782,21 +47350,42 @@ var VxeTreeComponent = defineVxeComponent({
         watch(() => props.filterValue, () => {
             triggerSearchEvent(new Event('filter'));
         });
-        const hFlag = ref(0);
+        const reFlag = ref(0);
         watch(() => props.height, () => {
-            hFlag.value++;
+            reFlag.value++;
         });
         watch(() => props.minHeight, () => {
-            hFlag.value++;
+            reFlag.value++;
         });
         watch(() => props.maxHeight, () => {
-            hFlag.value++;
+            reFlag.value++;
         });
-        watch(hFlag, () => {
-            recalculate();
+        watch(() => props.useScrollbar, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollYWidth, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXHeight, () => {
+            reFlag.value++;
+        });
+        watch(computeScrollXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeScrollYVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(reFlag, () => {
+            recalculate().then(() => {
+                recalculate();
+            });
         });
         onMounted(() => {
-            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod } = props;
+            const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props;
             const dragOpts = computeDragOpts.value;
             if (!showOverflow) {
                 errLog$2('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -46817,12 +47406,25 @@ var VxeTreeComponent = defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog$2('vxe.error.reqComp', ['vxe-context-menu']);
             }
-            if (props.autoResize) {
-                const el = refElem.value;
+            const el = refElem.value;
+            if (useScrollbar || autoResize) {
+                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(() => {
                     if (props.autoResize) {
-                        recalculate();
+                        reFlag.value++;
                     }
                 });
                 if (el) {
@@ -46833,14 +47435,19 @@ var VxeTreeComponent = defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            recalculate();
-            globalEvents$1.on($xeTree, 'resize', handleGlobalResizeEvent);
+            reFlag.value++;
+            globalEvents$1.on($xeTree, 'resize', () => {
+                reFlag.value++;
+            });
         });
         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());