vxe-pc-ui 3.20.0 → 3.20.1

package/lib/index.umd.js

@@ -13347,7 +13347,7 @@ var es_array_filter = __webpack_require__(2008);
 
 
 var log_log = VxeUI.log;
-var uiVersion = "ui v".concat("3.20.0");
+var uiVersion = "ui v".concat("3.20.1");
 function createComponentLog(name) {
   var tableVersion = VxeUI.tableVersion ? "table v".concat(VxeUI.tableVersion) : '';
   var ganttVersion = VxeUI.ganttVersion ? "gantt v".concat(VxeUI.ganttVersion) : '';
@@ -13367,7 +13367,7 @@ var errLog = log_log.create('error', uiVersion);
 
 
 
-var ui_version = "3.20.0";
+var ui_version = "3.20.1";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -16243,6 +16243,9 @@ function enModelValue(nodeid) {
 function deModelValue(nodeid) {
   return nodeid ? decodeURIComponent("".concat(nodeid)) : nodeid;
 }
+function getDefaultConfig(val1, def1) {
+  return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(val1) ? def1 : val1;
+}
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.promise.js
 var es_promise = __webpack_require__(3362);
 ;// ./node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js
@@ -20887,6 +20890,7 @@ function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSiz
 
 
 
+
 var scrollbar_getConfig = VxeUI.getConfig,
   scrollbar_createEvent = VxeUI.createEvent,
   scrollbar_domUtils = VxeUI.domUtils,
@@ -20914,6 +20918,7 @@ function scrollbar_createInternalData() {
   name: 'VxeScrollbar',
   props: {
     id: [String, Number],
+    viewId: [String, Number],
     width: [String, Number],
     height: [String, Number],
     minWidth: [String, Number],
@@ -20933,6 +20938,18 @@ function scrollbar_createInternalData() {
         return scrollbar_getConfig().scrollbar.padding;
       }
     },
+    autoHide: {
+      type: Boolean,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.autoHide;
+      }
+    },
+    visible: {
+      type: Boolean,
+      default: function _default() {
+        return scrollbar_getConfig().scrollbar.visible;
+      }
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -20988,6 +21005,8 @@ function scrollbar_createInternalData() {
         maxHeight = props.maxHeight;
       var xOpts = $xeScrollbar.computeXOpts;
       var yOpts = $xeScrollbar.computeYOpts;
+      var barWidth = yOpts.width;
+      var barHeight = xOpts.height;
       var stys = {};
       if (width) {
         stys.width = toCssUnit(width);
@@ -21007,14 +21026,40 @@ function scrollbar_createInternalData() {
       if (maxHeight) {
         stys.maxHeight = toCssUnit(maxHeight);
       }
-      if (yOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(yOpts.width);
-      }
-      if (xOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(xOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return getDefaultConfig(xOpts.visible, visible);
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var visible = props.visible;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return getDefaultConfig(yOpts.visible, visible);
+    },
+    computeXAutoHide: function computeXAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var xOpts = $xeScrollbar.computeXOpts;
+      return getDefaultConfig(xOpts.autoHide, autoHide);
+    },
+    computeYAutoHide: function computeYAutoHide() {
+      var $xeScrollbar = this;
+      var props = $xeScrollbar;
+      var autoHide = props.autoHide;
+      var yOpts = $xeScrollbar.computeYOpts;
+      return getDefaultConfig(yOpts.autoHide, autoHide);
+    },
     computeWrapperClss: function computeWrapperClss() {
       var $xeScrollbar = this;
       var props = $xeScrollbar;
@@ -21024,14 +21069,16 @@ function scrollbar_createInternalData() {
         padding = props.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
       var xToTop = $xeScrollbar.computeXToTop;
       var yToLeft = $xeScrollbar.computeYToLeft;
-      return scrollbar_domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xOpts.visible || 'visible'), "ov-y--".concat(yOpts.visible || 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
+      var xAutoHide = $xeScrollbar.computeXAutoHide;
+      var yAutoHide = $xeScrollbar.computeYAutoHide;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', "ov-x--".concat(xVisible === false ? 'hidden' : 'visible'), "ov-y--".concat(yVisible === false ? 'hidden' : 'visible'), "sx-pos--".concat(xToTop ? 'top' : 'bottom'), "sy-pos--".concat(yToLeft ? 'left' : 'right'), native ? 'is--native' : 'is--virtual', className], {
         'is--padding': padding,
-        'ov-x--auto-hide': xOpts.autoHide,
-        'ov-y--auto-hide': yOpts.autoHide,
+        'ov-x--auto-hide': xAutoHide,
+        'ov-y--auto-hide': yAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -21406,13 +21453,14 @@ function scrollbar_createInternalData() {
       var id = props.id,
         native = props.native,
         loading = props.loading,
+        viewId = props.viewId,
         viewAttrs = props.viewAttrs;
       var wrapperStyle = $xeScrollbar.computeWrapperStyle;
       var wrapperClss = $xeScrollbar.computeWrapperClss;
       var viewClss = $xeScrollbar.computeViewClss;
       var viewInnerClss = $xeScrollbar.computeViewInnerClss;
-      var xOpts = $xeScrollbar.computeXOpts;
-      var yOpts = $xeScrollbar.computeYOpts;
+      var xVisible = $xeScrollbar.computeXVisible;
+      var yVisible = $xeScrollbar.computeYVisible;
       var defaultSlot = slots.default;
       return h('div', {
         ref: 'refElem',
@@ -21424,7 +21472,9 @@ function scrollbar_createInternalData() {
       }, [h('div', {
         ref: 'refViewElem',
         class: viewClss,
-        attrs: viewAttrs,
+        attrs: _objectSpread2({
+          id: viewId || null
+        }, viewAttrs),
         on: {
           scroll: $xeScrollbar.scrollEvent
         }
@@ -21432,7 +21482,7 @@ function scrollbar_createInternalData() {
         key: 'vi',
         ref: 'refViewInnerElem',
         class: viewInnerClss
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackXElem',
         class: 'vxe-scrollbar--track-x',
         on: {
@@ -21448,7 +21498,7 @@ function scrollbar_createInternalData() {
           pointercancel: $xeScrollbar.cleatPointerThumbEvent,
           lostpointercapture: $xeScrollbar.cleatPointerThumbEvent
         }
-      })]), native || yOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
+      })]), native || yVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : h('div', {
         ref: 'refTrackYElem',
         class: 'vxe-scrollbar--track-y',
         on: {
@@ -21505,6 +21555,18 @@ function scrollbar_createInternalData() {
       var $xeScrollbar = this;
       $xeScrollbar.reFlag++;
     },
+    computeXVisible: function computeXVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
+    computeYVisible: function computeYVisible() {
+      var $xeScrollbar = this;
+      $xeScrollbar.$nextTick(function () {
+        $xeScrollbar.reFlag++;
+      });
+    },
     reFlag: function reFlag() {
       var $xeScrollbar = this;
       $xeScrollbar.recalculate().then(function () {
@@ -21662,6 +21724,20 @@ var Scrollbar = VxeScrollbar;
       var $xeCard = this;
       var props = $xeCard;
       return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeCard = this;
+      var scrollbarOpts = $xeCard.computeScrollbarOpts;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs
+      };
     }
   }),
   methods: {
@@ -21698,6 +21774,7 @@ var Scrollbar = VxeScrollbar;
       var vSize = $xeCard.computeSize;
       var cardStyle = $xeCard.computeCardStyle;
       var scrollbarOpts = $xeCard.computeScrollbarOpts;
+      var scrollbarProps = $xeCard.computeScrollbarProps;
       var viewClassName = scrollbarOpts.viewClassName,
         viewInnerClassName = scrollbarOpts.viewInnerClassName;
       return h('div', {
@@ -21716,7 +21793,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body'
       }, [leftSlot ? useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-left',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-left-view',
           viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
         }),
@@ -21729,7 +21806,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-left'
       }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-content',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
           viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
         }),
@@ -21742,7 +21819,7 @@ var Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-content'
       }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? useScrollbar ? h(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-right',
-        props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
+        props: _objectSpread2(_objectSpread2({}, scrollbarProps), {}, {
           viewClassName: 'vxe-card--body-scrollbar-right-view',
           viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
         }),
@@ -22780,17 +22857,18 @@ function list_createInternalData() {
     computeWrapperStyles: function computeWrapperStyles() {
       var $xeList = this;
       var rowHeight = $xeList.computeRowHeight;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
       var scrollbarXOpts = $xeList.computeScrollbarXOpts;
       var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      var barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
       var stys = {};
       if (rowHeight) {
         stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight);
       }
-      if (scrollbarYOpts.width) {
-        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width);
-      }
-      if (scrollbarXOpts.height) {
-        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height);
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
       }
       return stys;
     },
@@ -22828,6 +22906,30 @@ function list_createInternalData() {
       var scrollbarOpts = $xeList.computeScrollbarOpts;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeList = this;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    },
     computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
       var $xeList = this;
       var reactData = $xeList.reactData;
@@ -22835,14 +22937,16 @@ function list_createInternalData() {
       var padding = scrollbarOpts.padding;
       var yThumbHeight = reactData.yThumbHeight,
         xThumbWidth = reactData.xThumbWidth;
-      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
       var scrollbarXToTop = $xeList.computeScrollbarXToTop;
       var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
-      return domUtils.buildClass(['vxe-scrollbar is--virtual', "ov-x--".concat(scrollbarXOpts.visible || 'visible'), "ov-y--".concat(scrollbarYOpts.visible || 'visible'), "sx-pos--".concat(scrollbarXToTop ? 'top' : 'bottom'), "sy-pos--".concat(scrollbarYToLeft ? 'left' : 'right')], {
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      var scrollXAutoHide = $xeList.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeList.computeScrollYAutoHide;
+      return 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')], {
         'is--padding': padding,
-        'ov-x--auto-hide': scrollbarXOpts.autoHide,
-        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       });
@@ -25042,7 +25146,9 @@ function list_createInternalData() {
         topSpaceHeight = reactData.topSpaceHeight,
         rowList = reactData.rowList,
         isAllChecked = reactData.isAllChecked,
-        isAllIndeterminate = reactData.isAllIndeterminate;
+        isAllIndeterminate = reactData.isAllIndeterminate,
+        xThumbWidth = reactData.xThumbWidth,
+        yThumbHeight = reactData.yThumbHeight;
       var defaultSlot = slots.default;
       var headerSlot = slots.header;
       var footerSlot = slots.footer;
@@ -25058,8 +25164,13 @@ function list_createInternalData() {
       var isHover = rowOpts.isHover,
         padding = rowOpts.padding;
       var isDrag = $xeList.computeIsDrag;
-      var scrollbarXOpts = $xeList.computeScrollbarXOpts;
-      var scrollbarYOpts = $xeList.computeScrollbarYOpts;
+      var scrollbarOpts = $xeList.computeScrollbarOpts;
+      var scrollXVisible = $xeList.computeScrollXVisible;
+      var scrollYVisible = $xeList.computeScrollYVisible;
+      var scrollbarXToTop = $xeList.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeList.computeScrollbarYToLeft;
+      var scrollXAutoHide = $xeList.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeList.computeScrollYAutoHide;
       var scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss;
       var showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false;
       var leOns = {};
@@ -25068,9 +25179,9 @@ function list_createInternalData() {
       }
       return h('div', {
         ref: 'refElem',
-        class: ['vxe-list', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
+        class: ['vxe-list', 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') : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
-        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--virtual-scrollbar', useScrollbar), 'ov-x--auto-hide', useScrollbar && scrollbarXOpts.autoHide), 'ov-y--auto-hide', useScrollbar && scrollbarYOpts.autoHide), 'is--drag', isDrag), 'is--loading', loading)],
+        }) : className : '', _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), '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), 'is--drag', isDrag), 'is--loading', loading)],
         on: leOns,
         style: wrapperStyles
       }, [headerSlot || showDefChekboxHead ? h('div', {
@@ -25117,21 +25228,12 @@ function list_createInternalData() {
         style: {
           marginTop: topSpaceHeight ? "".concat(topSpaceHeight, "px") : ''
         }
-      }, useScrollbar ? defaultSlot ? defaultSlot({
-        items: rowList,
-        $list: $xeList
-      }) : rowList.map(function (row, i) {
-        return $xeList.renderRow(h, row, i);
-      }) : [h('div', {
-        key: 'vi',
-        ref: 'refViewInnerElem',
-        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
       }) : rowList.map(function (row, i) {
         return $xeList.renderRow(h, row, i);
-      }))])]), footerSlot ? h('div', {
+      }))]), footerSlot ? h('div', {
         ref: 'refFooterElem',
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
@@ -25143,7 +25245,7 @@ function list_createInternalData() {
        */
       useScrollbar ? h('div', {
         class: scrollbarWrapperClss
-      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+      }, [scrollXVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackXElem',
         class: 'vxe-scrollbar--track-x',
         on: {
@@ -25159,7 +25261,7 @@ function list_createInternalData() {
           pointercancel: $xeList.cleatPointerThumbEvent,
           lostpointercapture: $xeList.cleatPointerThumbEvent
         }
-      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : h('div', {
+      })]), scrollYVisible === false ? renderEmptyElement($xeList) : h('div', {
         ref: 'refTrackYElem',
         class: 'vxe-scrollbar--track-y',
         on: {
@@ -25209,13 +25311,29 @@ function list_createInternalData() {
       var $xeList = this;
       $xeList.reFlag++;
     },
+    useScrollbar: function useScrollbar() {
+      var $xeList = this;
+      $xeList.reFlag++;
+    },
     computeRowHeight: function computeRowHeight() {
       var $xeList = this;
       $xeList.reFlag++;
     },
-    reFlag: function reFlag() {
+    computeScrollXVisible: function computeScrollXVisible() {
       var $xeList = this;
       $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeList = this;
+      $xeList.$nextTick(function () {
+        $xeList.reFlag++;
+      });
+    },
+    reFlag: function reFlag() {
+      var $xeList = this;
+      $xeList.recalculate().then(function () {
         $xeList.recalculate();
       });
     },
@@ -25267,13 +25385,13 @@ function list_createInternalData() {
     }
     if (useScrollbar || autoResize) {
       var el = $xeList.$refs.refElem;
-      var viewInnerEl = $xeList.$refs.refViewInnerElem;
+      var viewInnerEl = $xeList.$refs.refVirtualBody;
       var resizeObserver = globalResize.create(function () {
         $xeList.reFlag++;
       });
-      resizeObserver.observe(el);
-      if (autoResize) {
-        if (el) {
+      if (el) {
+        resizeObserver.observe(el);
+        if (autoResize) {
           resizeObserver.observe(el.parentElement);
         }
       }
@@ -48879,10 +48997,7 @@ var ImagePreview = VxeImagePreview;
       var vSize = $xeLayoutAside.computeSize;
       var collapseOpts = $xeLayoutAside.computeCollapseOpts;
       var scrollbarOpts = $xeLayoutAside.computeScrollbarOpts;
-      var native = scrollbarOpts.native,
-        yConfig = scrollbarOpts.yConfig,
-        className = scrollbarOpts.className,
-        viewAttrs = scrollbarOpts.viewAttrs,
+      var className = scrollbarOpts.className,
         viewClassName = scrollbarOpts.viewClassName,
         viewInnerClassName = scrollbarOpts.viewInnerClassName;
       var defaultSlot = slots.default;
@@ -48891,13 +49006,16 @@ var ImagePreview = VxeImagePreview;
         style: varStyle
       }, [useScrollbar ? h(packages_scrollbar, {
         props: {
-          native: native,
+          width: scrollbarOpts.width,
+          height: scrollbarOpts.height,
+          autoHide: scrollbarOpts.autoHide,
+          visible: scrollbarOpts.visible,
           xConfig: {
-            visible: 'hidden'
+            visible: false
           },
-          yConfig: yConfig,
+          yConfig: scrollbarOpts.yConfig,
           className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
-          viewAttrs: viewAttrs,
+          viewAttrs: scrollbarOpts.viewAttrs,
           viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
           viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
         },
@@ -49005,6 +49123,30 @@ function layout_body_createReactData() {
       var $xeLayoutBody = this;
       var props = $xeLayoutBody;
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeLayoutBody = this;
+      var props = $xeLayoutBody;
+      var backtopId = $xeLayoutBody.backtopId;
+      var showBacktop = props.showBacktop;
+      var scrollbarOpts = $xeLayoutBody.computeScrollbarOpts;
+      var className = scrollbarOpts.className,
+        viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
+        viewAttrs: _objectSpread2(_objectSpread2({}, scrollbarOpts.viewAttrs), {}, {
+          id: showBacktop ? backtopId || null : null
+        }),
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+      };
     }
   }),
   methods: {
@@ -49030,14 +49172,7 @@ function layout_body_createReactData() {
         showBacktop = props.showBacktop,
         useScrollbar = props.useScrollbar;
       var backtopOpts = $xeLayoutBody.computeBacktopOpts;
-      var scrollbarOpts = $xeLayoutBody.computeScrollbarOpts;
-      var native = scrollbarOpts.native,
-        xConfig = scrollbarOpts.xConfig,
-        yConfig = scrollbarOpts.yConfig,
-        className = scrollbarOpts.className,
-        viewAttrs = scrollbarOpts.viewAttrs,
-        viewClassName = scrollbarOpts.viewClassName,
-        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      var scrollbarProps = $xeLayoutBody.computeScrollbarProps;
       var vSize = $xeLayoutBody.computeSize;
       var defaultSlot = slots.default;
       var backtopSlot = slots.backtop;
@@ -49056,17 +49191,7 @@ function layout_body_createReactData() {
       return h('div', {
         class: ['vxe-layout-body', _defineProperty(_defineProperty(_defineProperty({}, "size--".concat(vSize), vSize), 'is--loading', loading), 'is--padding', padding)]
       }, [useScrollbar ? h(packages_scrollbar, {
-        props: {
-          native: native,
-          xConfig: xConfig,
-          yConfig: yConfig,
-          className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
-          viewAttrs: _objectSpread2(_objectSpread2({}, viewAttrs), {}, {
-            id: showBacktop ? backtopId || null : null
-          }),
-          viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
-          viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
-        },
+        props: scrollbarProps,
         scopedSlots: {
           default: function _default() {
             return defaultSlot ? defaultSlot({}) : [];
@@ -63103,6 +63228,24 @@ var scrollbarOffsetSize = 20;
       var $xeTabs = this;
       var props = $xeTabs;
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarProps: function computeScrollbarProps() {
+      var $xeTabs = this;
+      var scrollbarOpts = $xeTabs.computeScrollbarOpts;
+      var viewClassName = scrollbarOpts.viewClassName,
+        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+      };
     }
   }),
   methods: {
@@ -63786,19 +63929,14 @@ var scrollbarOffsetSize = 20;
       var name = item.name,
         slots = item.slots;
       var defaultSlot = slots ? slots.default : null;
-      var scrollbarOpts = $xeTabs.computeScrollbarOpts;
-      var viewClassName = scrollbarOpts.viewClassName,
-        viewInnerClassName = scrollbarOpts.viewInnerClassName;
+      var scrollbarProps = $xeTabs.computeScrollbarProps;
       if (name && initNames.includes(name)) {
         return useScrollbar ? h(packages_scrollbar, {
           key: "".concat(name),
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name
           }],
-          props: _objectSpread2(_objectSpread2({}, scrollbarOpts), {}, {
-            viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
-            viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
-          }),
+          props: scrollbarProps,
           scopedSlots: {
             default: function _default() {
               return defaultSlot ? $xeTabs.callSlot(defaultSlot, {
@@ -65498,6 +65636,7 @@ function getCrossTreeDragNodeInfo($xeTree) {
 
 
 
+
 
 
 var tree_createComponentLog = createComponentLog('tree'),
@@ -65995,6 +66134,34 @@ function insertTreeNode($xeTree, newRecords, isAppend) {
     nodeMaps[nodeid] = itemRest;
   });
 }
+function tree_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 tree_createInternalData() {
   return {
     // initialized: false,
@@ -66007,8 +66174,14 @@ function tree_createInternalData() {
     indeterminateNodeMaps: {},
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
-    lastScrollLeft: 0,
+    // 滚动条
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -66025,31 +66198,6 @@ function tree_createInternalData() {
     // hpTimeout: undefined
   };
 }
-function tree_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
-    }
-  };
-}
 /* harmony default export */ var tree = (/* define-vxe-component start */defineVxeComponent({
   name: 'VxeTree',
   mixins: [globalMixins.sizeMixin],
@@ -66228,7 +66376,14 @@ function tree_createReactData() {
         return tree_getConfig().tree.size || tree_getConfig().size;
       }
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: function _default() {
+        return tree_getConfig().tree.useScrollbar;
+      }
+    },
+    scrollbarConfig: Object
   },
   provide: function provide() {
     var $xeTree = this;
@@ -66243,7 +66398,7 @@ function tree_createReactData() {
       xID: xID,
       reactData: reactData,
       crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
-      hFlag: 0,
+      reFlag: 0,
       dataFlag: 0
     });
   },
@@ -66348,6 +66503,20 @@ function tree_createReactData() {
       var props = $xeTree;
       return Object.assign({}, tree_getConfig().tree.menuConfig, props.menuConfig);
     },
+    computeWrapperStyles: function computeWrapperStyles() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      var barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+      var barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+      var 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: function computeTreeStyle() {
       var $xeTree = this;
       var props = $xeTree;
@@ -66387,6 +66556,78 @@ function tree_createReactData() {
       var $xeTree = this;
       var props = $xeTree;
       return Object.assign({}, tree_getConfig().tree.filterConfig, props.filterConfig);
+    },
+    computeScrollbarOpts: function computeScrollbarOpts() {
+      var $xeTree = this;
+      var props = $xeTree;
+      return Object.assign({}, tree_getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    },
+    computeScrollbarXOpts: function computeScrollbarXOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, tree_getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    },
+    computeScrollbarYOpts: function computeScrollbarYOpts() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      return Object.assign({}, tree_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    },
+    computeScrollXVisible: function computeScrollXVisible() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible: function computeScrollYVisible() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide: function computeScrollXAutoHide() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarXOpts = $xeTree.computeScrollbarXOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    },
+    computeScrollYAutoHide: function computeScrollYAutoHide() {
+      var $xeTree = this;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var scrollbarYOpts = $xeTree.computeScrollbarYOpts;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    },
+    computeScrollbarWrapperClss: function computeScrollbarWrapperClss() {
+      var $xeTree = this;
+      var reactData = $xeTree.reactData;
+      var scrollbarOpts = $xeTree.computeScrollbarOpts;
+      var padding = scrollbarOpts.padding;
+      var yThumbHeight = reactData.yThumbHeight,
+        xThumbWidth = reactData.xThumbWidth;
+      var scrollbarXToTop = $xeTree.computeScrollbarXToTop;
+      var scrollbarYToLeft = $xeTree.computeScrollbarYToLeft;
+      var scrollXVisible = $xeTree.computeScrollXVisible;
+      var scrollYVisible = $xeTree.computeScrollYVisible;
+      var scrollXAutoHide = $xeTree.computeScrollXAutoHide;
+      var scrollYAutoHide = $xeTree.computeScrollYAutoHide;
+      return 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')], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
+        '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: {
@@ -67036,6 +67277,11 @@ function tree_createReactData() {
         }
       });
     },
+    updateScrollbar: function updateScrollbar() {
+      var $xeTree = this;
+      $xeTree.updateThumbSize();
+      $xeTree.updateThumbOffset();
+    },
     /**
      * 重新计算列表
      */
@@ -67060,6 +67306,7 @@ function tree_createReactData() {
           var parentPaddingSize = 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();
@@ -67108,6 +67355,7 @@ function tree_createReactData() {
       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) {
@@ -68096,14 +68344,6 @@ function tree_createReactData() {
         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 || []);
@@ -68902,6 +69142,189 @@ function tree_createReactData() {
         }, 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 ? 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) {
+      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 = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    },
     //
     // Render
     //
@@ -69229,22 +69652,27 @@ function tree_createReactData() {
       return 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;
@@ -69252,13 +69680,22 @@ function tree_createReactData() {
       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',
@@ -69289,6 +69726,44 @@ function tree_createReactData() {
       }, 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),
       /**
        * 拖拽提示
        */
@@ -69378,19 +69853,37 @@ function tree_createReactData() {
     },
     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++;
+    },
+    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() {
@@ -69410,7 +69903,9 @@ function tree_createReactData() {
       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) {
       tree_errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true']);
@@ -69431,24 +69926,30 @@ function tree_createReactData() {
     if (menuConfig && !VxeUIContextMenu) {
       tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
     }
-    if (props.autoResize) {
+    if (useScrollbar || autoResize) {
       var el = $xeTree.$refs.refElem;
+      var viewInnerEl = $xeTree.$refs.refVirtualBody;
       var parentEl = $xeTree.getParentElem();
       var resizeObserver = globalResize.create(function () {
-        if (props.autoResize) {
-          $xeTree.recalculate();
-        }
+        $xeTree.reFlag++;
       });
       if (el) {
         resizeObserver.observe(el);
+        if (autoResize) {
+          if (parentEl) {
+            resizeObserver.observe(parentEl);
+          }
+        }
       }
-      if (parentEl) {
-        resizeObserver.observe(parentEl);
+      if (viewInnerEl) {
+        resizeObserver.observe(viewInnerEl);
       }
       internalData.resizeObserver = resizeObserver;
     }
-    $xeTree.recalculate();
-    globalEvents.on($xeTree, 'resize', $xeTree.handleGlobalResizeEvent);
+    $xeTree.reFlag++;
+    globalEvents.on($xeTree, 'resize', function () {
+      $xeTree.reFlag++;
+    });
   },
   beforeDestroy: function beforeDestroy() {
     var $xeTree = this;