vxe-pc-ui 3.20.0 → 3.20.2

package/es/tree/src/tree.js

@@ -1,13 +1,14 @@
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
-import { VxeUI, createEvent, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui';
+import { VxeUI, domUtils, createEvent, globalEvents, globalResize, renderEmptyElement, globalMixins } from '../../ui';
 import { calcTreeLine, getItemCacheObj } from './util';
 import { createComponentLog } from '../../ui/src/log';
 import { getSlotVNs } from '../../ui/src/vn';
 import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store';
 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');
@@ -498,6 +499,34 @@ function insertTreeNode($xeTree, newRecords, isAppend) {
         nodeMaps[nodeid] = itemRest;
     });
 }
+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,
@@ -510,8 +539,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,
@@ -528,31 +564,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
-        }
-    };
-}
 export default {
     name: 'VxeTree',
     mixins: [
@@ -685,7 +696,12 @@ export default {
             type: String,
             default: () => getConfig().tree.size || getConfig().size
         },
-        virtualYConfig: Object
+        virtualYConfig: Object,
+        useScrollbar: {
+            type: Boolean,
+            default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+        },
+        scrollbarConfig: Object
     },
     provide() {
         const $xeTree = this;
@@ -697,7 +713,7 @@ export default {
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
         return Object.assign(Object.assign({}, {}), { xID,
-            reactData, crossTreeDragNodeInfo: crossTreeDragNodeGlobal, hFlag: 0, dataFlag: 0 });
+            reactData, crossTreeDragNodeInfo: crossTreeDragNodeGlobal, reFlag: 0, dataFlag: 0 });
     },
     computed: Object.assign(Object.assign({}, {}), { computeTitleField() {
             const $xeTree = this;
@@ -795,6 +811,17 @@ export default {
             const props = $xeTree;
             return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
         },
+        computeWrapperStyles() {
+            const $xeTree = this;
+            const barWidth = $xeTree.computeScrollYWidth;
+            const barHeight = $xeTree.computeScrollXHeight;
+            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;
+        },
         computeTreeStyle() {
             const $xeTree = this;
             const props = $xeTree;
@@ -831,6 +858,88 @@ export default {
             const $xeTree = this;
             const props = $xeTree;
             return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
+        },
+        computeScrollbarOpts() {
+            const $xeTree = this;
+            const props = $xeTree;
+            return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+        },
+        computeScrollbarXOpts() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+                visible: false
+            });
+        },
+        computeScrollbarYOpts() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+        },
+        computeScrollXHeight() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+        },
+        computeScrollYWidth() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+        },
+        computeScrollXVisible() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollYVisible() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollXAutoHide() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
+        computeScrollYAutoHide() {
+            const $xeTree = this;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+        },
+        computeScrollbarWrapperClss() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const { yThumbHeight, xThumbWidth } = reactData;
+            const scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+            const scrollXVisible = $xeTree.computeScrollXVisible;
+            const scrollYVisible = $xeTree.computeScrollYVisible;
+            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
+            });
+        },
+        computeScrollbarXToTop() {
+            const $xeTree = this;
+            const scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+            return scrollbarXOpts.position === 'top';
+        },
+        computeScrollbarYToLeft() {
+            const $xeTree = this;
+            const scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+            return scrollbarYOpts.position === 'left';
         } }),
     methods: {
         //
@@ -1455,6 +1564,11 @@ export default {
                 }
             });
         },
+        updateScrollbar() {
+            const $xeTree = this;
+            $xeTree.updateThumbSize();
+            $xeTree.updateThumbOffset();
+        },
         /**
          * 重新计算列表
          */
@@ -1479,6 +1593,7 @@ export default {
                     const parentPaddingSize = getPaddingTopBottomSize(parentEl);
                     reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
                 }
+                $xeTree.updateScrollbar();
                 $xeTree.updateHeight();
                 return $xeTree.computeScrollLoad().then(() => {
                     $xeTree.updateHeight();
@@ -1523,6 +1638,7 @@ export default {
             const scrollLeft = scrollBodyElem.scrollLeft;
             const isX = scrollLeft !== internalData.lastScrollLeft;
             const isY = scrollTop !== internalData.lastScrollTop;
+            $xeTree.updateThumbOffset();
             internalData.lastScrollTop = scrollTop;
             internalData.lastScrollLeft = scrollLeft;
             if (reactData.scrollYLoad) {
@@ -2397,14 +2513,6 @@ export default {
             $xeTree.emitRadioMode(value);
             $xeTree.dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt);
         },
-        handleGlobalResizeEvent() {
-            const $xeTree = this;
-            const el = $xeTree.$refs.refElem;
-            if (!el || !el.clientWidth) {
-                return;
-            }
-            $xeTree.recalculate();
-        },
         reloadData(data) {
             const $xeTree = this;
             return $xeTree.loadData(data || []);
@@ -3165,6 +3273,186 @@ export default {
                 }, evnt);
             }
         },
+        // 滚动条
+        updateThumbSize() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const trackXEl = $xeTree.$refs.refTrackXElem;
+            const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+            const thumbXElem = $xeTree.$refs.refThumbXElem;
+            if (thumbXElem) {
+                thumbXElem.style.width = xThumbWidth + 'px';
+            }
+            reactData.xThumbWidth = xThumbWidth;
+            const trackYEl = $xeTree.$refs.refTrackYElem;
+            const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+            const thumbYElem = $xeTree.$refs.refThumbYElem;
+            if (thumbYElem) {
+                thumbYElem.style.height = yThumbHeight + 'px';
+            }
+            reactData.yThumbHeight = yThumbHeight;
+        },
+        updateThumbOffset() {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            if (!viewEl) {
+                return;
+            }
+            if (!viewEl.clientHeight || !viewEl.clientHeight) {
+                return;
+            }
+            const { xThumbWidth, yThumbHeight } = reactData;
+            const trackXEl = $xeTree.$refs.refTrackXElem;
+            const thumbXElem = $xeTree.$refs.refThumbXElem;
+            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 = $xeTree.$refs.refTrackYElem;
+            const thumbYElem = $xeTree.$refs.refThumbYElem;
+            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)`;
+            }
+        },
+        clickTrackXEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            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'
+            });
+        },
+        clickTrackYEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const trackEl = evnt.currentTarget;
+            if (trackEl !== evnt.target) {
+                return;
+            }
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            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'
+            });
+        },
+        pointerdownThumbXEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            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;
+        },
+        pointermoveThumbXEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeTree.$refs.refVirtualWrapper;
+                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);
+            }
+        },
+        cleatPointerThumbEvent(evnt) {
+            const $xeTree = this;
+            const internalData = $xeTree.internalData;
+            const thumbEl = evnt.currentTarget;
+            thumbEl.releasePointerCapture(evnt.pointerId);
+            internalData.isThumbDrag = false;
+        },
+        pointerdownThumbYEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const thumbEl = evnt.currentTarget;
+            internalData.isThumbDrag = true;
+            thumbEl.setPointerCapture(evnt.pointerId);
+            const viewEl = $xeTree.$refs.refVirtualWrapper;
+            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;
+        },
+        pointermoveThumbYEvent(evnt) {
+            const $xeTree = this;
+            const reactData = $xeTree.reactData;
+            const internalData = $xeTree.internalData;
+            const thumbEl = evnt.currentTarget;
+            if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+                return;
+            }
+            const { isThumbDrag, thumbDragOffset } = internalData;
+            if (isThumbDrag) {
+                const viewEl = $xeTree.$refs.refVirtualWrapper;
+                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);
+            }
+        },
         //
         // Render
         //
@@ -3505,13 +3793,14 @@ export default {
             const props = $xeTree;
             const slots = $xeTree.$scopedSlots;
             const reactData = $xeTree.reactData;
-            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 = $xeTree.computeSize;
             const radioOpts = $xeTree.computeRadioOpts;
             const checkboxOpts = $xeTree.computeCheckboxOpts;
             const loadingOpts = $xeTree.computeLoadingOpts;
             const isNodeHover = $xeTree.computeIsNodeHover;
+            const wrapperStyles = $xeTree.computeWrapperStyles;
             const treeStyle = $xeTree.computeTreeStyle;
             const dragOpts = $xeTree.computeDragOpts;
             const tooltipOpts = $xeTree.computeTooltipOpts;
@@ -3519,21 +3808,43 @@ export default {
             const headerSlot = slots.header;
             const footerSlot = slots.footer;
             const tooltipSlot = slots.tooltip;
+            const scrollbarOpts = $xeTree.computeScrollbarOpts;
+            const scrollXVisible = $xeTree.computeScrollXVisible;
+            const scrollYVisible = $xeTree.computeScrollYVisible;
+            const scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+            const scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+            const scrollXAutoHide = $xeTree.computeScrollXAutoHide;
+            const scrollYAutoHide = $xeTree.computeScrollYAutoHide;
+            const scrollbarWrapperClss = $xeTree.computeScrollbarWrapperClss;
             const teOns = {};
             if (dragOpts.isCrossTreeDrag && !treeList.length) {
                 teOns.dragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
             }
             return h('div', {
                 ref: 'refElem',
-                class: ['vxe-tree', {
+                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
-                    }],
+                    }
+                ],
+                style: wrapperStyles,
                 on: teOns
             }, [
                 headerSlot
@@ -3570,6 +3881,57 @@ export default {
                         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',
+                                on: {
+                                    click: $xeTree.clickTrackXEvent
+                                }
+                            }, [
+                                h('div', {
+                                    ref: 'refThumbXElem',
+                                    class: 'vxe-scrollbar--thumb-x',
+                                    on: {
+                                        pointerdown: $xeTree.pointerdownThumbXEvent,
+                                        pointermove: $xeTree.pointermoveThumbXEvent,
+                                        pointerup: $xeTree.cleatPointerThumbEvent,
+                                        pointercancel: $xeTree.cleatPointerThumbEvent,
+                                        lostpointercapture: $xeTree.cleatPointerThumbEvent
+                                    }
+                                })
+                            ]),
+                        scrollYVisible === false
+                            ? renderEmptyElement($xeTree)
+                            : h('div', {
+                                ref: 'refTrackYElem',
+                                class: 'vxe-scrollbar--track-y',
+                                on: {
+                                    click: $xeTree.clickTrackYEvent
+                                }
+                            }, [
+                                h('div', {
+                                    ref: 'refThumbYElem',
+                                    class: 'vxe-scrollbar--thumb-y',
+                                    on: {
+                                        pointerdown: $xeTree.pointerdownThumbYEvent,
+                                        pointermove: $xeTree.pointermoveThumbYEvent,
+                                        pointerup: $xeTree.cleatPointerThumbEvent,
+                                        pointercancel: $xeTree.cleatPointerThumbEvent,
+                                        lostpointercapture: $xeTree.cleatPointerThumbEvent
+                                    }
+                                })
+                            ])
+                    ])
+                    : renderEmptyElement($xeTree),
                 /**
                  * 拖拽提示
                  */
@@ -3659,19 +4021,45 @@ export default {
         },
         height() {
             const $xeTree = this;
-            $xeTree.hFlag++;
+            $xeTree.reFlag++;
         },
         minHeight() {
             const $xeTree = this;
-            $xeTree.hFlag++;
+            $xeTree.reFlag++;
         },
         maxHeight() {
             const $xeTree = this;
-            $xeTree.hFlag++;
+            $xeTree.reFlag++;
+        },
+        useScrollbar() {
+            const $xeTree = this;
+            $xeTree.reFlag++;
+        },
+        computeScrollYWidth() {
+            const $xeTree = this;
+            $xeTree.reFlag++;
         },
-        hFlag() {
+        computeScrollXHeight() {
             const $xeTree = this;
-            $xeTree.recalculate();
+            $xeTree.reFlag++;
+        },
+        computeScrollXVisible() {
+            const $xeTree = this;
+            $xeTree.$nextTick(() => {
+                $xeTree.reFlag++;
+            });
+        },
+        computeScrollYVisible() {
+            const $xeTree = this;
+            $xeTree.$nextTick(() => {
+                $xeTree.reFlag++;
+            });
+        },
+        reFlag() {
+            const $xeTree = this;
+            $xeTree.recalculate().then(() => {
+                $xeTree.recalculate();
+            });
         }
     },
     created() {
@@ -3686,7 +4074,7 @@ export default {
         const $xeTree = this;
         const props = $xeTree;
         const internalData = $xeTree.internalData;
-        const { transform, drag, menuConfig, showOverflow, lazy, loadMethod } = props;
+        const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props;
         const dragOpts = $xeTree.computeDragOpts;
         if (!showOverflow) {
             errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -3707,12 +4095,25 @@ export default {
         if (menuConfig && !VxeUIContextMenu) {
             errLog('vxe.error.reqComp', ['vxe-context-menu']);
         }
-        if (props.autoResize) {
-            const el = $xeTree.$refs.refElem;
+        const el = $xeTree.$refs.refElem;
+        if (useScrollbar) {
+            const viewInnerEl = $xeTree.$refs.refVirtualBody;
+            const scrollObserver = globalResize.create(() => {
+                $xeTree.updateScrollbar();
+            });
+            if (el) {
+                scrollObserver.observe(el);
+            }
+            if (viewInnerEl) {
+                scrollObserver.observe(viewInnerEl);
+            }
+            internalData.scrollObserver = scrollObserver;
+        }
+        if (autoResize) {
             const parentEl = $xeTree.getParentElem();
             const resizeObserver = globalResize.create(() => {
                 if (props.autoResize) {
-                    $xeTree.recalculate();
+                    $xeTree.reFlag++;
                 }
             });
             if (el) {
@@ -3723,17 +4124,22 @@ export default {
             }
             internalData.resizeObserver = resizeObserver;
         }
-        $xeTree.recalculate();
-        globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent);
+        $xeTree.reFlag++;
+        globalEvents.on($xeTree, 'resize', () => {
+            $xeTree.reFlag++;
+        });
     },
     beforeDestroy() {
         const $xeTree = this;
         const reactData = $xeTree.reactData;
         const internalData = $xeTree.internalData;
-        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());