vxe-pc-ui 4.20.0 → 4.20.2

package/lib/tree/src/tree.js

@@ -15,6 +15,7 @@ var _vn = require("../../ui/src/vn");
 var _dom = require("../../ui/src/dom");
 var _utils = require("../../ui/src/utils");
 var _anime = require("../../ui/src/anime");
+var _util2 = require("../../scrollbar/src/util");
 var _loading = _interopRequireDefault(require("../../loading"));
 var _tooltip = _interopRequireDefault(require("../../tooltip"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -34,6 +35,34 @@ const {
 function getNodeUniqueId() {
   return _xeUtils.default.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,
@@ -46,8 +75,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,
@@ -64,31 +100,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;
 var _default = exports.default = (0, _comp.defineVxeComponent)({
   name: 'VxeTree',
@@ -219,7 +230,12 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       type: String,
       default: () => getConfig().tree.size || getConfig().size
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-remove-dragend', 'node-insert-dragend', 'node-expand', 'node-menu', 'menu-click'],
   setup(props, context) {
@@ -236,6 +252,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const refFooterWrapperElem = (0, _vue.ref)();
     const refVirtualWrapper = (0, _vue.ref)();
     const refVirtualBody = (0, _vue.ref)();
+    const refTrackXElem = (0, _vue.ref)();
+    const refTrackYElem = (0, _vue.ref)();
+    const refThumbXElem = (0, _vue.ref)();
+    const refThumbYElem = (0, _vue.ref)();
     const refDragNodeLineElem = (0, _vue.ref)();
     const refDragTipElem = (0, _vue.ref)();
     const refTooltip = (0, _vue.ref)();
@@ -315,6 +335,16 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeMenuOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
     });
+    const computeWrapperStyles = (0, _vue.computed)(() => {
+      const barWidth = computeScrollYWidth.value;
+      const barHeight = computeScrollXHeight.value;
+      const stys = {};
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(barHeight || barWidth);
+      }
+      return stys;
+    });
     const computeTreeStyle = (0, _vue.computed)(() => {
       const {
         indent
@@ -358,6 +388,71 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     const computeFilterOpts = (0, _vue.computed)(() => {
       return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
     });
+    const computeScrollbarOpts = (0, _vue.computed)(() => {
+      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    });
+    const computeScrollbarYOpts = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollXHeight = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+    });
+    const computeScrollYWidth = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+    });
+    const computeScrollXVisible = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0, _vue.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollbarWrapperClss = (0, _vue.computed)(() => {
+      const {
+        yThumbHeight,
+        xThumbWidth
+      } = reactData;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      return _ui.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 = (0, _vue.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0, _vue.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const computeMaps = {
       computeKeyField,
       computeParentField,
@@ -952,6 +1047,10 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
       });
     };
+    const updateScrollbar = () => {
+      updateThumbSize();
+      updateThumbOffset();
+    };
     /**
      * 重新计算列表
      */
@@ -977,6 +1076,7 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
           const parentPaddingSize = (0, _dom.getPaddingTopBottomSize)(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
+        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
@@ -1018,6 +1118,7 @@ var _default = exports.default = (0, _comp.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) {
@@ -1693,13 +1794,6 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         checked: isChecked
       }, evnt);
     };
-    const handleGlobalResizeEvent = () => {
-      const el = refElem.value;
-      if (!el || !el.clientWidth) {
-        return;
-      }
-      recalculate();
-    };
     const insertTreeNode = (newRecords, isAppend) => {
       const {
         treeFullData,
@@ -3362,6 +3456,183 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         hideDropTip();
       }
     };
+    const updateThumbSize = () => {
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const trackXEl = refTrackXElem.value;
+      const xThumbWidth = trackXEl ? (0, _util2.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 ? (0, _util2.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 ? (0, _util2.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 ? (0, _util2.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: (0, _util2.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: (0, _util2.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 = (0, _util2.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 = (0, _util2.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 = (0, _util2.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 = (0, _util2.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
     Object.assign($xeTree, treeMethods, treePrivateMethods);
     const renderDragIcon = (node, nodeid) => {
       const {
@@ -3704,19 +3975,23 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       const {
         loading,
         trigger,
-        showLine
+        showLine,
+        useScrollbar
       } = props;
       const {
         bodyHeight,
         topSpaceHeight,
         treeList,
-        tooltipStore
+        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;
@@ -3724,21 +3999,36 @@ var _default = exports.default = (0, _comp.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 (0, _vue.h)('div', Object.assign({
         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
       }, teOns), [headerSlot ? (0, _vue.h)('div', {
         ref: refHeaderWrapperElem,
         class: 'vxe-tree--header-wrapper'
@@ -3766,6 +4056,36 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
       }, footerSlot({
         $tree: $xeTree
       })) : (0, _ui.renderEmptyElement)($xeTree),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? (0, _vue.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? (0, _ui.renderEmptyElement)($xeTree) : (0, _vue.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollYVisible === false ? (0, _ui.renderEmptyElement)($xeTree) : (0, _vue.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0, _vue.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : (0, _ui.renderEmptyElement)($xeTree),
       /**
        * 拖拽提示
        */
@@ -3849,18 +4169,39 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
     (0, _vue.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    const hFlag = (0, _vue.ref)(0);
+    const reFlag = (0, _vue.ref)(0);
     (0, _vue.watch)(() => props.height, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0, _vue.watch)(() => props.minHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0, _vue.watch)(() => props.maxHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
-    (0, _vue.watch)(hFlag, () => {
-      recalculate();
+    (0, _vue.watch)(() => props.useScrollbar, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollYWidth, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollXHeight, () => {
+      reFlag.value++;
+    });
+    (0, _vue.watch)(computeScrollXVisible, () => {
+      (0, _vue.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0, _vue.watch)(computeScrollYVisible, () => {
+      (0, _vue.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0, _vue.watch)(reFlag, () => {
+      recalculate().then(() => {
+        recalculate();
+      });
     });
     (0, _vue.onMounted)(() => {
       const {
@@ -3869,7 +4210,9 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         menuConfig,
         showOverflow,
         lazy,
-        loadMethod
+        loadMethod,
+        autoResize,
+        useScrollbar
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -3891,12 +4234,25 @@ var _default = exports.default = (0, _comp.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 = _ui.globalResize.create(() => {
+          updateScrollbar();
+        });
+        if (el) {
+          scrollObserver.observe(el);
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl);
+        }
+        internalData.scrollObserver = scrollObserver;
+      }
+      if (autoResize) {
         const parentEl = getParentElem();
         const resizeObserver = _ui.globalResize.create(() => {
           if (props.autoResize) {
-            recalculate();
+            reFlag.value++;
           }
         });
         if (el) {
@@ -3907,16 +4263,22 @@ var _default = exports.default = (0, _comp.defineVxeComponent)({
         }
         internalData.resizeObserver = resizeObserver;
       }
-      recalculate();
-      _ui.globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+      reFlag.value++;
+      _ui.globalEvents.on($xeTree, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0, _vue.onBeforeUnmount)(() => {
       const {
+        scrollObserver,
         resizeObserver
       } = internalData;
       if (resizeObserver) {
         resizeObserver.disconnect();
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect();
+      }
       _ui.globalEvents.off($xeTree, 'resize');
       _xeUtils.default.assign(reactData, createReactData());
       _xeUtils.default.assign(internalData, createInternalData());