vxe-pc-ui 4.20.0 → 4.20.2

package/es/tabs/src/tabs.js

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp';
 import { createEvent, getConfig, getIcon, globalEvents, permission, useSize, renderEmptyElement } from '../../ui';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom';
-import { isEnableConf } from '../../ui/src/utils';
+import { getDefaultConfig, isEnableConf } from '../../ui/src/utils';
 import { createComponentLog } from '../../ui/src/log';
 import XEUtils from 'xe-utils';
 import VxeLoadingComponent from '../../loading';
@@ -50,7 +50,7 @@ export default defineVxeComponent({
         },
         useScrollbar: {
             type: Boolean,
-            default: () => getConfig().tabs.useScrollbar
+            default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
         },
         scrollbarConfig: Object,
         // 已废弃
@@ -151,6 +151,22 @@ export default defineVxeComponent({
         const computeScrollbarOpts = computed(() => {
             return Object.assign({}, getConfig().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,
@@ -730,13 +746,12 @@ export default 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(VxeScrollbarComponent, Object.assign(Object.assign({ key: `${name}`, class: ['vxe-tabs-pane--scrollbar-item', {
+                    ? h(VxeScrollbarComponent, 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', {

package/es/tree/src/tree.js

@@ -1,14 +1,15 @@
 import { ref, h, reactive, computed, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
-import { VxeUI, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
+import { VxeUI, domUtils, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui';
 import { calcTreeLine, getItemCacheObj } from './util';
 import { createComponentLog } from '../../ui/src/log';
 import { getCrossTreeDragNodeInfo } from './store';
 import XEUtils from 'xe-utils';
 import { getSlotVNs } from '../../ui/src/vn';
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom';
-import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils';
+import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils';
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime';
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util';
 import VxeLoadingComponent from '../../loading';
 import VxeTooltipComponent from '../../tooltip';
 const { warnLog, errLog } = createComponentLog('tree');
@@ -19,6 +20,34 @@ const { menus, getConfig, getI18n, getIcon } = VxeUI;
 function getNodeUniqueId() {
     return XEUtils.uniqueId('node_');
 }
+function createReactData() {
+    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() {
     return {
         // initialized: false,
@@ -31,8 +60,15 @@ function createInternalData() {
         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,
@@ -49,31 +85,6 @@ function createInternalData() {
         // hpTimeout: undefined
     };
 }
-function createReactData() {
-    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;
 export default defineVxeComponent({
     name: 'VxeTree',
@@ -204,7 +215,12 @@ export default 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',
@@ -236,6 +252,10 @@ export default 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();
@@ -307,6 +327,16 @@ export default 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;
@@ -339,6 +369,74 @@ export default 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.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,
@@ -856,6 +954,10 @@ export default defineVxeComponent({
                 }
             });
         };
+        const updateScrollbar = () => {
+            updateThumbSize();
+            updateThumbOffset();
+        };
         /**
          * 重新计算列表
          */
@@ -877,6 +979,7 @@ export default defineVxeComponent({
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
+                updateScrollbar();
                 updateHeight();
                 return computeScrollLoad().then(() => {
                     updateHeight();
@@ -910,6 +1013,7 @@ export default 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) {
@@ -1457,13 +1561,6 @@ export default 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;
@@ -2899,6 +2996,162 @@ export default 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;
@@ -3208,13 +3461,14 @@ export default defineVxeComponent({
             return renderEmptyElement($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;
@@ -3222,19 +3476,40 @@ export default 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,
@@ -3267,6 +3542,49 @@ export default defineVxeComponent({
                         class: 'vxe-tree--footer-wrapper'
                     }, footerSlot({ $tree: $xeTree }))
                     : renderEmptyElement($xeTree),
+                /**
+                 * 滚动条
+                 */
+                useScrollbar
+                    ? h('div', {
+                        class: scrollbarWrapperClss
+                    }, [
+                        scrollXVisible === false
+                            ? renderEmptyElement($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($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($xeTree),
                 /**
                  * 拖拽提示
                  */
@@ -3350,21 +3668,42 @@ export default 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('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -3385,12 +3724,25 @@ export default defineVxeComponent({
             if (menuConfig && !VxeUIContextMenu) {
                 errLog('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.create(() => {
+                    updateScrollbar();
+                });
+                if (el) {
+                    scrollObserver.observe(el);
+                }
+                if (viewInnerEl) {
+                    scrollObserver.observe(viewInnerEl);
+                }
+                internalData.scrollObserver = scrollObserver;
+            }
+            if (autoResize) {
                 const parentEl = getParentElem();
                 const resizeObserver = globalResize.create(() => {
                     if (props.autoResize) {
-                        recalculate();
+                        reFlag.value++;
                     }
                 });
                 if (el) {
@@ -3401,14 +3753,19 @@ export default defineVxeComponent({
                 }
                 internalData.resizeObserver = resizeObserver;
             }
-            recalculate();
-            globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+            reFlag.value++;
+            globalEvents.on($xeTree, 'resize', () => {
+                reFlag.value++;
+            });
         });
         onBeforeUnmount(() => {
-            const { resizeObserver } = internalData;
+            const { scrollObserver, resizeObserver } = internalData;
             if (resizeObserver) {
                 resizeObserver.disconnect();
             }
+            if (scrollObserver) {
+                scrollObserver.disconnect();
+            }
             globalEvents.off($xeTree, 'resize');
             XEUtils.assign(reactData, createReactData());
             XEUtils.assign(internalData, createInternalData());