vxe-pc-ui 3.20.0 → 3.20.2

package/lib/tree/src/tree.js

@@ -14,6 +14,7 @@ var _store = require("./store");
 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 }; }
@@ -522,6 +523,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,
@@ -534,8 +563,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,
@@ -552,31 +588,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
-    }
-  };
-}
 var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defineVxeComponent)({
   name: 'VxeTree',
   mixins: [_ui.globalMixins.sizeMixin],
@@ -755,7 +766,14 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         return getConfig().tree.size || getConfig().size;
       }
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return (0, _utils.getDefaultConfig)(getConfig().tree.useScrollbar, getConfig().useScrollbar);
+      }
+    },
+    scrollbarConfig: Object
   },
   provide: function provide() {
     var $xeTree = this;
@@ -770,7 +788,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: _store.crossTreeDragNodeGlobal,
-      hFlag: 0,
+      reFlag: 0,
       dataFlag: 0
     });
   },
@@ -875,6 +893,17 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var props = $xeTree;
       return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig);
     },
+    computeWrapperStyles: function computeWrapperStyles() {
+      var $xeTree = this;
+      var barWidth = $xeTree.computeScrollYWidth;
+      var barHeight = $xeTree.computeScrollXHeight;
+      var 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;
+    },
     computeTreeStyle: function computeTreeStyle() {
       var $xeTree = this;
       var props = $xeTree;
@@ -914,6 +943,83 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var $xeTree = this;
       var props = $xeTree;
       return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig);
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeTree = this;
+      var props = $xeTree;
+      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      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);
+    },
+    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);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)(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);
+    },
+    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);
+    },
+    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);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+      var scrollXVisible = $xeTree.computeScrollXVisible;
+      var scrollYVisible = $xeTree.computeScrollYVisible;
+      return _ui.domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollXVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(scrollYVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    },
+    computeScrollbarXToTop: function computeScrollbarXToTop() {
+      var $xeTree = this;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return scrollbarXOpts.position === 'top';
+    },
+    computeScrollbarYToLeft: function computeScrollbarYToLeft() {
+      var $xeTree = this;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return scrollbarYOpts.position === 'left';
     }
   }),
   methods: {
@@ -1563,6 +1669,11 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeTree = this;
+      $xeTree.updateThumbSize();
+      $xeTree.updateThumbOffset();
+    },
     /**
      * 重新计算列表
      */
@@ -1587,6 +1698,7 @@ 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();
@@ -1635,6 +1747,7 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var scrollLeft = scrollBodyElem.scrollLeft;
       var isX = scrollLeft !== internalData.lastScrollLeft;
       var isY = scrollTop !== internalData.lastScrollTop;
+      $xeTree.updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -2623,14 +2736,6 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         checked: isChecked
       }, evnt);
     },
-    handleGlobalResizeEvent: function handleGlobalResizeEvent() {
-      var $xeTree = this;
-      var el = $xeTree.$refs.refElem;
-      if (!el || !el.clientWidth) {
-        return;
-      }
-      $xeTree.recalculate();
-    },
     reloadData: function reloadData(data) {
       var $xeTree = this;
       return $xeTree.loadData(data || []);
@@ -3429,6 +3534,189 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
         }, evnt);
       }
     },
+    // 滚动条
+    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 ? (0, _util2.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 ? (0, _util2.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 ? (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(".concat(xThumbLeft, "px)");
+      }
+      var trackYEl = $xeTree.$refs.refTrackYElem;
+      var thumbYElem = $xeTree.$refs.refThumbYElem;
+      var 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(".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: (0, _util2.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: (0, _util2.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 = (0, _util2.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 = (0, _util2.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 = (0, _util2.getThumbOffsetSize)(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    },
+    pointermoveThumbYEvent: function pointermoveThumbYEvent(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 yThumbHeight = reactData.yThumbHeight;
+        var _thumbEl2 = evnt.currentTarget;
+        var trackEl = _thumbEl2.parentElement;
+        var trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = (0, _util2.getScrollFromDrag)(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
     //
     // Render
     //
@@ -3756,22 +4044,27 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       return (0, _ui.renderEmptyElement)($xeTree);
     },
     renderVN: function renderVN(h) {
+      var _ref;
       var $xeTree = this;
       var props = $xeTree;
       var slots = $xeTree.$scopedSlots;
       var reactData = $xeTree.reactData;
       var loading = props.loading,
         trigger = props.trigger,
-        showLine = props.showLine;
+        showLine = props.showLine,
+        useScrollbar = props.useScrollbar;
       var bodyHeight = reactData.bodyHeight,
         topSpaceHeight = reactData.topSpaceHeight,
         treeList = reactData.treeList,
-        tooltipStore = reactData.tooltipStore;
+        tooltipStore = reactData.tooltipStore,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var vSize = $xeTree.computeSize;
       var radioOpts = $xeTree.computeRadioOpts;
       var checkboxOpts = $xeTree.computeCheckboxOpts;
       var loadingOpts = $xeTree.computeLoadingOpts;
       var isNodeHover = $xeTree.computeIsNodeHover;
+      var wrapperStyles = $xeTree.computeWrapperStyles;
       var treeStyle = $xeTree.computeTreeStyle;
       var dragOpts = $xeTree.computeDragOpts;
       var tooltipOpts = $xeTree.computeTooltipOpts;
@@ -3779,13 +4072,22 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
       var tooltipSlot = slots.tooltip;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollXVisible = $xeTree.computeScrollXVisible;
+      var scrollYVisible = $xeTree.computeScrollYVisible;
+      var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeTree.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeTree.computeScrollYAutoHide;
+      var scrollbarWrapperClss = $xeTree.computeScrollbarWrapperClss;
       var teOns = {};
       if (dragOpts.isCrossTreeDrag && !treeList.length) {
         teOns.dragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-tree', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'show--line', showLine), 'checkbox--highlight', checkboxOpts.highlight), 'radio--highlight', radioOpts.highlight), 'node--hover', isNodeHover), 'node--trigger', trigger === 'node'), 'is--loading', loading)],
+        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))],
+        style: wrapperStyles,
         on: teOns
       }, [headerSlot ? h('div', {
         ref: 'refHeaderWrapperElem',
@@ -3816,6 +4118,44 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }, footerSlot({
         $tree: $xeTree
       })) : (0, _ui.renderEmptyElement)($xeTree),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? h('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? (0, _ui.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 ? (0, _ui.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
+        }
+      })])]) : (0, _ui.renderEmptyElement)($xeTree),
       /**
        * 拖拽提示
        */
@@ -3905,19 +4245,45 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     },
     height: function height() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
     },
     minHeight: function minHeight() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
     },
     maxHeight: function maxHeight() {
       var $xeTree = this;
-      $xeTree.hFlag++;
+      $xeTree.reFlag++;
+    },
+    useScrollbar: function useScrollbar() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
+    computeScrollYWidth: function computeScrollYWidth() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
+    computeScrollXHeight: function computeScrollXHeight() {
+      var $xeTree = this;
+      $xeTree.reFlag++;
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeTree = this;
+      $xeTree.$nextTick(function () {
+        $xeTree.reFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeTree = this;
+      $xeTree.$nextTick(function () {
+        $xeTree.reFlag++;
+      });
     },
-    hFlag: function hFlag() {
+    reFlag: function reFlag() {
       var $xeTree = this;
-      $xeTree.recalculate();
+      $xeTree.recalculate().then(function () {
+        $xeTree.recalculate();
+      });
     }
   },
   created: function created() {
@@ -3937,7 +4303,9 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       menuConfig = props.menuConfig,
       showOverflow = props.showOverflow,
       lazy = props.lazy,
-      loadMethod = props.loadMethod;
+      loadMethod = props.loadMethod,
+      autoResize = props.autoResize,
+      useScrollbar = props.useScrollbar;
     var dragOpts = $xeTree.computeDragOpts;
     if (!showOverflow) {
       errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -3958,12 +4326,25 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
     if (menuConfig && !VxeUIContextMenu) {
       errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    if (props.autoResize) {
-      var el = $xeTree.$refs.refElem;
+    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 parentEl = $xeTree.getParentElem();
       var resizeObserver = _ui.globalResize.create(function () {
         if (props.autoResize) {
-          $xeTree.recalculate();
+          $xeTree.reFlag++;
         }
       });
       if (el) {
@@ -3974,17 +4355,23 @@ var _default2 = exports.default = /* define-vxe-component start */(0, _comp.defi
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.recalculate();
-    _ui.globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent);
+    $xeTree.reFlag++;
+    _ui.globalEvents.on($xeTree, 'resize', function () {
+      $xeTree.reFlag++;
+    });
   },
   beforeDestroy: function beforeDestroy() {
     var $xeTree = this;
     var reactData = $xeTree.reactData;
     var internalData = $xeTree.internalData;
-    var resizeObserver = internalData.resizeObserver;
+    var scrollObserver = internalData.scrollObserver,
+      resizeObserver = internalData.resizeObserver;
     if (resizeObserver) {
       resizeObserver.disconnect();
     }
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
     _ui.globalEvents.off($xeTree, 'resize');
     _xeUtils.default.assign(reactData, createReactData());
     _xeUtils.default.assign(internalData, createInternalData());