vxe-pc-ui 4.19.8 → 4.20.1

package/dist/all.esm.js

@@ -1,5 +1,5 @@
 import * as core from '@vxe-ui/core';
-import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$4, createEvent as createEvent$1, getIcon as getIcon$2, renderEmptyElement as renderEmptyElement$1, useSize, globalEvents as globalEvents$1, usePermission, permission, renderer, getI18n as getI18n$2, globalResize as globalResize$1, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
+import { VxeUI, setConfig as setConfig$1, setIcon, getConfig as getConfig$4, createEvent as createEvent$1, getIcon as getIcon$2, renderEmptyElement as renderEmptyElement$1, useSize, globalEvents as globalEvents$1, usePermission, permission, renderer, getI18n as getI18n$2, domUtils as domUtils$1, globalResize as globalResize$1, menus as menus$3, GLOBAL_EVENT_KEYS, getSlotVNs as getSlotVNs$1, commands, formats, getComponent, validators } from '@vxe-ui/core';
 export * from '@vxe-ui/core';
 import { defineComponent, ref, reactive, h, createCommentVNode, createApp, inject, computed, watch, onMounted, onUnmounted, provide, nextTick, onBeforeUnmount, resolveComponent, Teleport, onActivated, onDeactivated, TransitionGroup } from 'vue';
 import XEUtils from 'xe-utils';
@@ -101,7 +101,7 @@ function checkDynamic() {
 }
 
 const { log } = VxeUI;
-const uiVersion = `ui v${"4.19.8"}`;
+const uiVersion = `ui v${"4.20.1"}`;
 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.19.8";
+const version = "4.20.1";
 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: {
@@ -6538,6 +6550,8 @@ var VxeScrollbarComponent = defineVxeComponent({
             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 stys = {};
             if (width) {
                 stys.width = toCssUnit(width);
@@ -6557,33 +6571,53 @@ 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 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 +6957,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 +6971,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 +6995,7 @@ var VxeScrollbarComponent = defineVxeComponent({
                             onLostpointercapture: cleatPointerThumbEvent
                         })
                     ]),
-                native || yOpts.visible === 'hidden'
+                native || yVisible === false
                     ? renderEmptyElement($xeScrollbar)
                     : h('div', {
                         ref: refTrackYElem,
@@ -7009,6 +7043,16 @@ var VxeScrollbarComponent = defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(computeXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeYVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
         watch(reFlag, () => {
             $xeScrollbar.recalculate().then(() => {
                 $xeScrollbar.recalculate();
@@ -7118,6 +7162,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 +7206,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 +7241,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 +7249,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 +7257,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', {
@@ -7787,6 +7845,9 @@ function createReactData$m() {
         updateCheckboxFlag: 1,
         isAllChecked: false,
         isAllIndeterminate: false,
+        // 滚动条
+        yThumbHeight: 0,
+        xThumbWidth: 0,
         insertRowFlag: 1,
         removeRowFlag: 1,
         dragRow: null,
@@ -7796,13 +7857,18 @@ function createReactData$m() {
 }
 function createInternalData$l() {
     return {
-        resizeObserver: undefined,
         fullData: [],
         afterList: [],
         fullKeyMaps: {},
         rowMaps: {},
-        lastScrollLeft: 0,
+        // 滚动条
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         scrollYStore: {
             startIndex: 0,
             endIndex: 0,
@@ -7856,7 +7922,12 @@ var VxeListComponent = defineVxeComponent({
         dragConfig: Object,
         menuConfig: Object,
         virtualYConfig: Object,
-        scrollY: Object
+        scrollY: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig$4().list.useScrollbar
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:checkRowKey',
@@ -7889,6 +7960,10 @@ var VxeListComponent = defineVxeComponent({
         const refFooterElem = ref();
         const refVirtualWrapper = ref();
         const refVirtualBody = ref();
+        const refTrackXElem = ref();
+        const refTrackYElem = ref();
+        const refThumbXElem = ref();
+        const refThumbYElem = ref();
         const refDragRowLineElem = ref();
         const refDragTipElem = ref();
         const refMaps = {
@@ -7937,11 +8012,20 @@ var VxeListComponent = defineVxeComponent({
         });
         const computeWrapperStyles = computed(() => {
             const rowHeight = computeRowHeight.value;
-            const style = {};
+            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 stys = {};
             if (rowHeight) {
-                style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
+                stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
             }
-            return style;
+            if (barWidth || barHeight) {
+                stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+                stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
+            }
+            return stys;
         });
         const computeVirtualStyles = computed(() => {
             const { height, maxHeight } = props;
@@ -7956,6 +8040,69 @@ var VxeListComponent = defineVxeComponent({
             }
             return style;
         });
+        const computeScrollbarOpts = computed(() => {
+            return Object.assign({}, getConfig$4().list.scrollbarConfig, props.scrollbarConfig);
+        });
+        const computeScrollbarXOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig$4().scrollbar.xConfig, scrollbarOpts.xConfig);
+        });
+        const computeScrollbarYOpts = computed(() => {
+            const scrollbarOpts = computeScrollbarOpts.value;
+            return Object.assign({}, getConfig$4().scrollbar.yConfig, scrollbarOpts.yConfig);
+        });
+        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 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'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+                `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
+            });
+        });
+        const computeScrollbarXToTop = computed(() => {
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            return scrollbarXOpts.position === 'top';
+        });
+        const computeScrollbarYToLeft = computed(() => {
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            return scrollbarYOpts.position === 'left';
+        });
         const dispatchEvent = (type, params, evnt) => {
             emit(type, createEvent$1(evnt, { $list: $xeList }, params));
         };
@@ -8112,6 +8259,7 @@ var VxeListComponent = defineVxeComponent({
          */
         const refreshScroll = () => {
             const { lastScrollLeft, lastScrollTop } = internalData;
+            updateScrollbar();
             return clearScroll().then(() => {
                 if (lastScrollLeft || lastScrollTop) {
                     internalData.lastScrollLeft = 0;
@@ -8120,6 +8268,10 @@ var VxeListComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
@@ -8137,6 +8289,7 @@ var VxeListComponent = defineVxeComponent({
                     parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight));
                 }
                 reactData.parentHeight = parentHeight;
+                updateScrollbar();
                 updateHeight();
                 if (el.clientWidth && el.clientHeight) {
                     return computeScrollLoad();
@@ -8166,6 +8319,7 @@ var VxeListComponent = 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) {
@@ -9462,6 +9616,162 @@ var VxeListComponent = 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($xeList, listMethods, listPrivateMethods);
         const renderDragTip = () => {
             const { dragRow, dragTipText } = reactData;
@@ -9658,8 +9968,8 @@ var VxeListComponent = defineVxeComponent({
                     }], rowid: hasKey && keyField ? rowid : undefined }, rowOns), ctVNs);
         };
         const renderVN = () => {
-            const { showCheckbox, className, loading } = props;
-            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData;
+            const { showCheckbox, className, loading, useScrollbar } = props;
+            const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate, xThumbWidth, yThumbHeight } = reactData;
             const defaultSlot = slots.default;
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
@@ -9674,16 +9984,38 @@ var VxeListComponent = defineVxeComponent({
             const rowOpts = computeRowOpts.value;
             const { isHover, padding } = rowOpts;
             const isDrag = computeIsDrag.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-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,
@@ -9748,6 +10080,49 @@ var VxeListComponent = defineVxeComponent({
                         class: 'vxe-list--footer-wrapper'
                     }, footerSlot({ items: rowList, $list: $xeList }))
                     : renderEmptyElement$1($xeList),
+                /**
+                 * 滚动条
+                 */
+                useScrollbar
+                    ? h('div', {
+                        class: scrollbarWrapperClss
+                    }, [
+                        scrollXVisible === false
+                            ? renderEmptyElement$1($xeList)
+                            : 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($xeList)
+                            : 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($xeList),
                 /**
                  * 拖拽提示
                  */
@@ -9781,11 +10156,24 @@ var VxeListComponent = defineVxeComponent({
         watch(() => props.syncResize, () => {
             reFlag.value++;
         });
+        watch(() => props.useScrollbar, () => {
+            reFlag.value++;
+        });
         watch(computeRowHeight, () => {
             reFlag.value++;
         });
-        watch(reFlag, () => {
+        watch(computeScrollXVisible, () => {
+            nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(computeScrollYVisible, () => {
             nextTick(() => {
+                reFlag.value++;
+            });
+        });
+        watch(reFlag, () => {
+            recalculate().then(() => {
                 recalculate();
             });
         });
@@ -9803,13 +10191,15 @@ var VxeListComponent = defineVxeComponent({
             updateCheckboxModeValue();
         });
         onActivated(() => {
-            recalculate().then(() => refreshScroll());
+            recalculate().then(() => {
+                refreshScroll();
+            });
         });
         nextTick(() => {
             loadData(props.data || []);
         });
         onMounted(() => {
-            const { showSeq, showRadio, showCheckbox } = props;
+            const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props;
             const rowOpts = computeRowOpts.value;
             const { useKey } = rowOpts;
             const isDrag = computeIsDrag.value;
@@ -9831,17 +10221,27 @@ var VxeListComponent = defineVxeComponent({
             if (useKey && !keyField) {
                 errLog$j('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
             }
-            if (props.autoResize) {
+            if (useScrollbar || autoResize) {
                 const el = refElem.value;
-                const resizeObserver = globalResize$1.create(() => recalculate());
-                resizeObserver.observe(el);
+                const viewInnerEl = refVirtualBody.value;
+                const resizeObserver = globalResize$1.create(() => {
+                    reFlag.value++;
+                });
                 if (el) {
-                    resizeObserver.observe(el.parentElement);
+                    resizeObserver.observe(el);
+                    if (autoResize) {
+                        resizeObserver.observe(el.parentElement);
+                    }
+                }
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            recalculate();
-            globalEvents$1.on($xeList, 'resize', recalculate);
+            reFlag.value++;
+            globalEvents$1.on($xeList, 'resize', () => {
+                reFlag.value++;
+            });
         });
         onBeforeUnmount(() => {
             const { resizeObserver } = internalData;
@@ -29558,7 +29958,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,
@@ -29573,13 +29973,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) : '')
                     }, {
@@ -29661,6 +30064,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
         };
@@ -29684,8 +30104,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;
@@ -29710,15 +30129,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', {
@@ -41080,6 +41491,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,
@@ -41659,13 +42086,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', {
@@ -43157,6 +43583,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,
@@ -43169,8 +43623,14 @@ function createInternalData$2() {
         indeterminateNodeMaps: {},
         treeExpandedMaps: {},
         treeExpandLazyLoadedMaps: {},
-        lastScrollLeft: 0,
+        // 滚动条
+        // resizeObserver: undefined,
+        // isThumbDrag: false,
+        thumbDragOffset: 0,
+        yThumbTop: 0,
+        xThumbLeft: 0,
         lastScrollTop: 0,
+        lastScrollLeft: 0,
         scrollYStore: {
             startIndex: 0,
             endIndex: 0,
@@ -43187,31 +43647,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',
@@ -43342,7 +43777,12 @@ var VxeTreeComponent = defineVxeComponent({
             type: String,
             default: () => getConfig().tree.size || getConfig().size
         },
-        virtualYConfig: Object
+        virtualYConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getConfig().tree.useScrollbar
+        },
+        scrollbarConfig: Object
     },
     emits: [
         'update:modelValue',
@@ -43374,6 +43814,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();
@@ -43445,6 +43889,19 @@ var VxeTreeComponent = defineVxeComponent({
         const computeMenuOpts = computed(() => {
             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 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;
@@ -43477,6 +43934,71 @@ 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 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 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'}`,
+                `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+                `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
+            });
+        });
+        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,
@@ -43994,6 +44516,10 @@ var VxeTreeComponent = defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
@@ -44015,6 +44541,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();
@@ -44048,6 +44575,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) {
@@ -44592,13 +45120,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;
@@ -46032,6 +46553,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;
@@ -46341,13 +47018,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;
@@ -46355,19 +47033,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,
@@ -46400,6 +47099,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),
                 /**
                  * 拖拽提示
                  */
@@ -46483,21 +47225,36 @@ 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(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']);
@@ -46518,24 +47275,30 @@ var VxeTreeComponent = defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog$2('vxe.error.reqComp', ['vxe-context-menu']);
             }
-            if (props.autoResize) {
+            if (useScrollbar || autoResize) {
                 const el = refElem.value;
+                const viewInnerEl = refVirtualBody.value;
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize$1.create(() => {
-                    if (props.autoResize) {
-                        recalculate();
-                    }
+                    reFlag.value++;
                 });
                 if (el) {
                     resizeObserver.observe(el);
+                    if (autoResize) {
+                        if (parentEl) {
+                            resizeObserver.observe(parentEl);
+                        }
+                    }
                 }
-                if (parentEl) {
-                    resizeObserver.observe(parentEl);
+                if (viewInnerEl) {
+                    resizeObserver.observe(viewInnerEl);
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            recalculate();
-            globalEvents$1.on($xeTree, 'resize', handleGlobalResizeEvent);
+            reFlag.value++;
+            globalEvents$1.on($xeTree, 'resize', () => {
+                reFlag.value++;
+            });
         });
         onBeforeUnmount(() => {
             const { resizeObserver } = internalData;