vxe-pc-ui 3.20.8 → 3.20.10

package/lib/tree/src/tree.js

@@ -31,14 +31,11 @@ var _createComponentLog = (0, _log.createComponentLog)('tree'),
   warnLog = _createComponentLog.warnLog,
   errLog = _createComponentLog.errLog;
 var menus = _ui.VxeUI.menus,
-  scrollbarUtils = _ui.VxeUI.scrollbarUtils,
   getConfig = _ui.VxeUI.getConfig,
   getI18n = _ui.VxeUI.getI18n,
-  getIcon = _ui.VxeUI.getIcon;
-var getThumbOffsetSize = scrollbarUtils.getThumbOffsetSize,
-  getThumbSize = scrollbarUtils.getThumbSize,
-  getScrollFromClick = scrollbarUtils.getScrollFromClick,
-  getScrollFromDrag = scrollbarUtils.getScrollFromDrag;
+  getIcon = _ui.VxeUI.getIcon,
+  baseUtils = _ui.VxeUI.baseUtils;
+var getDefVal = baseUtils.getDefVal;
 var crossTreeDragNodeObj = null;
 /**
  * 生成节点的唯一主键
@@ -594,7 +591,7 @@ function createInternalData() {
 }
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeTree',
-  mixins: [_ui.globalMixins.sizeMixin],
+  mixins: [_ui.globalMixins.sizeMixin, _ui.globalMixins.vScrollbarMixin, _ui.globalMixins.initVScrollbarMixin],
   props: {
     data: Array,
     autoResize: {
@@ -774,7 +771,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     useScrollbar: {
       type: Boolean,
       default: function _default() {
-        return (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar);
+        return getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar);
       }
     },
     scrollbarConfig: Object
@@ -792,7 +789,8 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: _store.crossTreeDragNodeGlobal,
-      reFlag: 0,
+      reLayoutFlag: 0,
+      reScrollFlag: 0,
       dataFlag: 0
     });
   },
@@ -969,37 +967,37 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible);
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible);
     },
     computeScrollXAutoHide: function computeScrollXAutoHide() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     },
     computeScrollYAutoHide: function computeScrollYAutoHide() {
       var $xeTree = this;
       var scrollbarOpts = $xeTree.computeScrollbarOpts;
       var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
-      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
     },
     computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
       var $xeTree = this;
@@ -1036,6 +1034,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         $tree: $xeTree
       }, params));
     },
+    getScrollViewElem: function getScrollViewElem() {
+      var $xeTree = this;
+      var viewEl = $xeTree.$refs.refVirtualWrapper;
+      return viewEl || null;
+    },
     getNodeId: function getNodeId(node) {
       var $xeTree = this;
       if (!node) {
@@ -1675,8 +1678,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     updateScrollbar: function updateScrollbar() {
       var $xeTree = this;
-      $xeTree.updateThumbSize();
-      $xeTree.updateThumbOffset();
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      if (isVScrollbar) {
+        return $xeTree.$nextTick().then(function () {
+          $xeTree.updateThumbSize();
+          $xeTree.updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     },
     /**
      * 重新计算列表
@@ -1702,11 +1711,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           var parentPaddingSize = (0, _dom.getPaddingTopBottomSize)(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        $xeTree.updateScrollbar();
         $xeTree.updateHeight();
         return $xeTree.computeScrollLoad().then(function () {
           $xeTree.updateHeight();
           $xeTree.updateYSpace();
+          $xeTree.updateScrollbar();
         });
       }
       return $xeTree.$nextTick();
@@ -1746,7 +1755,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeTree = this;
       var reactData = $xeTree.reactData;
       var internalData = $xeTree.internalData;
-      var scrollBodyElem = evnt.target;
+      var scrollBodyElem = evnt.currentTarget;
       var scrollTop = scrollBodyElem.scrollTop;
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
@@ -3539,186 +3548,26 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
     },
     // 滚动条
-    updateThumbSize: function updateThumbSize() {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var trackXEl = $xeTree.$refs.refTrackXElem;
-      var xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
-      var thumbXElem = $xeTree.$refs.refThumbXElem;
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px';
-      }
-      reactData.xThumbWidth = xThumbWidth;
-      var trackYEl = $xeTree.$refs.refTrackYElem;
-      var yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
-      var thumbYElem = $xeTree.$refs.refThumbYElem;
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px';
-      }
-      reactData.yThumbHeight = yThumbHeight;
-    },
-    updateThumbOffset: function updateThumbOffset() {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth,
-        yThumbHeight = reactData.yThumbHeight;
-      var trackXEl = $xeTree.$refs.refTrackXElem;
-      var thumbXElem = $xeTree.$refs.refThumbXElem;
-      var 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(".concat(xThumbLeft, "px)");
-      }
-      var trackYEl = $xeTree.$refs.refTrackYElem;
-      var thumbYElem = $xeTree.$refs.refThumbYElem;
-      var 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(".concat(yThumbTop, "px)");
-      }
-    },
-    clickTrackXEvent: function clickTrackXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
-        behavior: 'auto'
-      });
-    },
-    clickTrackYEvent: function clickTrackYEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var trackEl = evnt.currentTarget;
-      if (trackEl !== evnt.target) {
-        return;
-      }
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackRect = trackEl.getBoundingClientRect();
-      viewEl.scrollTo({
-        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
-        behavior: 'auto'
-      });
-    },
-    pointerdownThumbXEvent: function pointerdownThumbXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var xThumbWidth = reactData.xThumbWidth;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientX - trackRect.left;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbXEvent: function pointermoveThumbXEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeTree.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
-        }
-        var xThumbWidth = reactData.xThumbWidth;
-        var _thumbEl = evnt.currentTarget;
-        var trackEl = _thumbEl.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
-      }
-    },
-    cleatPointerThumbEvent: function cleatPointerThumbEvent(evnt) {
-      var $xeTree = this;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      thumbEl.releasePointerCapture(evnt.pointerId);
-      internalData.isThumbDrag = false;
-    },
-    pointerdownThumbYEvent: function pointerdownThumbYEvent(evnt) {
-      var $xeTree = this;
-      var reactData = $xeTree.reactData;
-      var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      internalData.isThumbDrag = true;
-      thumbEl.setPointerCapture(evnt.pointerId);
-      var viewEl = $xeTree.$refs.refVirtualWrapper;
-      if (!viewEl) {
-        return;
-      }
-      var yThumbHeight = reactData.yThumbHeight;
-      var trackEl = thumbEl.parentElement;
-      var trackRect = trackEl.getBoundingClientRect();
-      var pointerPosition = evnt.clientY - trackRect.top;
-      // 记录 thumb 的偏移
-      var thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
-      internalData.thumbDragOffset = pointerPosition - thumbOffset;
-    },
-    pointermoveThumbYEvent: function pointermoveThumbYEvent(evnt) {
+    bindScrollbarResize: function bindScrollbarResize() {
       var $xeTree = this;
-      var reactData = $xeTree.reactData;
       var internalData = $xeTree.internalData;
-      var thumbEl = evnt.currentTarget;
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return;
-      }
-      var isThumbDrag = internalData.isThumbDrag,
-        thumbDragOffset = internalData.thumbDragOffset;
-      if (isThumbDrag) {
-        var viewEl = $xeTree.$refs.refVirtualWrapper;
-        if (!viewEl) {
-          return;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
+      var scrollObserver = internalData.scrollObserver;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          var el = $xeTree.$refs.refElem;
+          var viewInnerEl = $xeTree.$refs.refVirtualSpaceElem;
+          var _scrollObserver = _ui.globalResize.create(function () {
+            $xeTree.reScrollFlag++;
+          });
+          if (el) {
+            _scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            _scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = _scrollObserver;
         }
-        var yThumbHeight = reactData.yThumbHeight;
-        var _thumbEl2 = evnt.currentTarget;
-        var trackEl = _thumbEl2.parentElement;
-        var trackRect = trackEl.getBoundingClientRect();
-        // 更新偏移
-        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
       }
     },
     //
@@ -4055,8 +3904,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var reactData = $xeTree.reactData;
       var loading = props.loading,
         trigger = props.trigger,
-        showLine = props.showLine,
-        useScrollbar = props.useScrollbar;
+        showLine = props.showLine;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         treeList = reactData.treeList,
@@ -4064,6 +3912,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         xThumbWidth = reactData.xThumbWidth,
         yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeTree.computeSize;
+      var isVScrollbar = $xeTree.computeIsVScrollbar;
       var radioOpts = $xeTree.computeRadioOpts;
       var checkboxOpts = $xeTree.computeCheckboxOpts;
       var loadingOpts = $xeTree.computeLoadingOpts;
@@ -4090,7 +3939,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-tree', useScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', useScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', useScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', (_ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "size--".concat(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), _defineProperty(_defineProperty(_defineProperty(_ref, 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading))],
+        class: ['vxe-tree', isVScrollbar ? "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible') : '', isVScrollbar ? "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom') : '', isVScrollbar ? "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right') : '', (_ref = {}, _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_ref, "size--".concat(vSize), vSize), 'show--line', showLine), 'is--virtual-scrollbar', isVScrollbar), 'ov-padding', isVScrollbar && scrollbarOpts.padding), 'ov-x--auto-hide', isVScrollbar && scrollXAutoHide), 'ov-y--auto-hide', isVScrollbar && scrollYAutoHide), 'overflow-y', yThumbHeight), 'overflow-x', xThumbWidth), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), _defineProperty(_defineProperty(_defineProperty(_ref, 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading))],
         style: wrapperStyles,
         on: teOns
       }, [headerSlot ? h('div', {
@@ -4106,6 +3955,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
           scroll: $xeTree.scrollEvent
         }
       }, [h('div', {
+        ref: 'refVirtualSpaceElem',
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? "".concat(bodyHeight, "px") : ''
@@ -4125,7 +3975,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       /**
        * 滚动条
        */
-      useScrollbar ? h('div', {
+      isVScrollbar ? h('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? (0, _ui.renderEmptyElement)($xeTree) : h('div', {
         ref: 'refTrackXElem',
@@ -4249,45 +4099,56 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     height: function height() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     minHeight: function minHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
-    useScrollbar: function useScrollbar() {
+    computeIsVScrollbar: function computeIsVScrollbar() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.$nextTick(function () {
+        $xeTree.bindScrollbarResize();
+        $xeTree.$nextTick(function () {
+          $xeTree.reLayoutFlag++;
+        });
+      });
     },
     computeScrollYWidth: function computeScrollYWidth() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXHeight: function computeScrollXHeight() {
       var $xeTree = this;
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     },
     computeScrollXVisible: function computeScrollXVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
     computeScrollYVisible: function computeScrollYVisible() {
       var $xeTree = this;
       $xeTree.$nextTick(function () {
-        $xeTree.reFlag++;
+        $xeTree.reLayoutFlag++;
       });
     },
-    reFlag: function reFlag() {
+    reLayoutFlag: function reLayoutFlag() {
       var $xeTree = this;
       $xeTree.recalculate().then(function () {
         $xeTree.recalculate();
       });
+    },
+    reScrollFlag: function reScrollFlag() {
+      var $xeTree = this;
+      $xeTree.updateScrollbar().then(function () {
+        $xeTree.updateScrollbar();
+      });
     }
   },
   created: function created() {
@@ -4308,8 +4169,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       showOverflow = props.showOverflow,
       lazy = props.lazy,
       loadMethod = props.loadMethod,
-      autoResize = props.autoResize,
-      useScrollbar = props.useScrollbar;
+      autoResize = props.autoResize;
     var dragOpts = $xeTree.computeDragOpts;
     if (!showOverflow) {
       errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -4330,25 +4190,12 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     if (menuConfig && !VxeUIContextMenu) {
       errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    var el = $xeTree.$refs.refElem;
-    if (useScrollbar) {
-      var viewInnerEl = $xeTree.$refs.refVirtualBody;
-      var scrollObserver = _ui.globalResize.create(function () {
-        $xeTree.updateScrollbar();
-      });
-      if (el) {
-        scrollObserver.observe(el);
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl);
-      }
-      internalData.scrollObserver = scrollObserver;
-    }
     if (autoResize) {
+      var el = $xeTree.$refs.refElem;
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = _ui.globalResize.create(function () {
         if (props.autoResize) {
-          $xeTree.reFlag++;
+          $xeTree.reLayoutFlag++;
         }
       });
       if (el) {
@@ -4359,9 +4206,10 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.reFlag++;
+    $xeTree.reLayoutFlag++;
+    $xeTree.bindScrollbarResize();
     _ui.globalEvents.on($xeTree, 'resize', function () {
-      $xeTree.reFlag++;
+      $xeTree.reLayoutFlag++;
     });
   },
   beforeDestroy: function beforeDestroy() {