vxe-pc-ui 4.20.0 → 4.20.1

package/lib/index.umd.js

@@ -4745,7 +4745,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.20.0"}`;
+const uiVersion = `ui v${"4.20.1"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -4763,7 +4763,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.20.0";
+const ui_version = "4.20.1";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -7467,6 +7467,9 @@ function enModelValue(nodeid) {
 function deModelValue(nodeid) {
   return nodeid ? decodeURIComponent(`${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.iterator.filter.js
 var es_iterator_filter = __webpack_require__(2489);
 ;// ./packages/tooltip/src/tooltip.ts
@@ -11695,6 +11698,7 @@ function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSiz
 
 
 
+
 const {
   getConfig: scrollbar_getConfig,
   createEvent: scrollbar_createEvent,
@@ -11724,6 +11728,7 @@ function scrollbar_createInternalData() {
   name: 'VxeScrollbar',
   props: {
     id: [String, Number],
+    viewId: [String, Number],
     width: [String, Number],
     height: [String, Number],
     minWidth: [String, Number],
@@ -11739,6 +11744,14 @@ function scrollbar_createInternalData() {
       type: Boolean,
       default: () => scrollbar_getConfig().scrollbar.padding
     },
+    autoHide: {
+      type: Boolean,
+      default: () => scrollbar_getConfig().scrollbar.autoHide
+    },
+    visible: {
+      type: Boolean,
+      default: () => scrollbar_getConfig().scrollbar.visible
+    },
     xConfig: Object,
     yConfig: Object,
     className: {
@@ -11790,6 +11803,8 @@ function scrollbar_createInternalData() {
       } = props;
       const xOpts = computeXOpts.value;
       const yOpts = computeYOpts.value;
+      const barWidth = yOpts.width;
+      const barHeight = xOpts.height;
       const stys = {};
       if (width) {
         stys.width = toCssUnit(width);
@@ -11809,14 +11824,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;
     });
+    const computeXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visible
+      } = props;
+      const xOpts = computeXOpts.value;
+      return getDefaultConfig(xOpts.visible, visible);
+    });
+    const computeYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        visible
+      } = props;
+      const yOpts = computeYOpts.value;
+      return getDefaultConfig(yOpts.visible, visible);
+    });
+    const computeXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        autoHide
+      } = props;
+      const xOpts = computeXOpts.value;
+      return getDefaultConfig(xOpts.autoHide, autoHide);
+    });
+    const computeYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        autoHide
+      } = props;
+      const yOpts = computeYOpts.value;
+      return getDefaultConfig(yOpts.autoHide, autoHide);
+    });
     const computeWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         native,
@@ -11827,14 +11868,16 @@ function scrollbar_createInternalData() {
         yThumbHeight,
         xThumbWidth
       } = reactData;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
       const xToTop = computeXToTop.value;
       const yToLeft = computeYToLeft.value;
-      return scrollbar_domUtils.buildClass(['vxe-scrollbar', `ov-x--${xOpts.visible || 'visible'}`, `ov-y--${yOpts.visible || 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${yToLeft ? 'left' : 'right'}`, native ? 'is--native' : 'is--virtual', className], {
+      const xVisible = computeXVisible.value;
+      const yVisible = computeYVisible.value;
+      const xAutoHide = computeXAutoHide.value;
+      const yAutoHide = computeYAutoHide.value;
+      return scrollbar_domUtils.buildClass(['vxe-scrollbar', `ov-x--${xVisible === false ? 'hidden' : 'visible'}`, `ov-y--${yVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${xToTop ? 'top' : 'bottom'}`, `sy-pos--${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
       });
@@ -12209,14 +12252,15 @@ function scrollbar_createInternalData() {
         id,
         native,
         loading,
+        viewId,
         viewAttrs
       } = props;
       const wrapperStyle = computeWrapperStyle.value;
       const wrapperClss = computeWrapperClss.value;
       const viewClss = computeViewClss.value;
       const viewInnerClss = computeViewInnerClss.value;
-      const xOpts = computeXOpts.value;
-      const yOpts = computeYOpts.value;
+      const xVisible = computeXVisible.value;
+      const yVisible = computeYVisible.value;
       const defaultSlot = slots.default;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
@@ -12227,12 +12271,13 @@ function scrollbar_createInternalData() {
         ref: refViewElem,
         class: viewClss,
         onScroll: scrollEvent,
+        id: viewId || null,
         ...viewAttrs
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         key: 'vi',
         ref: refViewInnerElem,
         class: viewInnerClss
-      }, defaultSlot ? defaultSlot({}) : [])]), native || xOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, defaultSlot ? defaultSlot({}) : [])]), native || xVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackXElem,
         class: 'vxe-scrollbar--track-x',
         onClick: clickTrackXEvent
@@ -12244,7 +12289,7 @@ function scrollbar_createInternalData() {
         onPointerup: cleatPointerThumbEvent,
         onPointercancel: cleatPointerThumbEvent,
         onLostpointercapture: cleatPointerThumbEvent
-      })]), native || yOpts.visible === 'hidden' ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })]), native || yVisible === false ? scrollbar_renderEmptyElement($xeScrollbar) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackYElem,
         class: 'vxe-scrollbar--track-y',
         onClick: clickTrackYEvent
@@ -12286,6 +12331,16 @@ function scrollbar_createInternalData() {
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeXVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
       $xeScrollbar.recalculate().then(() => {
         $xeScrollbar.recalculate();
@@ -12419,6 +12474,19 @@ const Scrollbar = VxeScrollbar;
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      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
+      };
+    });
     const computeMaps = {
       computeSize
     };
@@ -12460,6 +12528,7 @@ const Scrollbar = VxeScrollbar;
       const vSize = computeSize.value;
       const cardStyle = computeCardStyle.value;
       const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarProps = computeScrollbarProps.value;
       const {
         viewClassName,
         viewInnerClassName
@@ -12485,7 +12554,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body'
       }, [leftSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-left',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-left-view',
         viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
       }, {
@@ -12494,7 +12563,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-left'
       }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-content',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
         viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
       }, {
@@ -12503,7 +12572,7 @@ const Scrollbar = VxeScrollbar;
         class: 'vxe-card--body-content'
       }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-right',
-        ...scrollbarOpts,
+        ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-right-view',
         viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
       }, {
@@ -13296,7 +13365,6 @@ let crossListDragRowObj = null;
     const refFooterElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refViewInnerElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -13359,17 +13427,18 @@ let crossListDragRowObj = null;
     });
     const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const rowHeight = computeRowHeight.value;
+      const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarXOpts = computeScrollbarXOpts.value;
       const scrollbarYOpts = computeScrollbarYOpts.value;
+      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width);
+      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height);
       const 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;
     });
@@ -13404,6 +13473,26 @@ let crossListDragRowObj = null;
       const scrollbarOpts = computeScrollbarOpts.value;
       return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
     });
+    const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide);
+    });
     const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const scrollbarOpts = computeScrollbarOpts.value;
       const {
@@ -13413,14 +13502,16 @@ let crossListDragRowObj = null;
         yThumbHeight,
         xThumbWidth
       } = reactData;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
       const scrollbarXToTop = computeScrollbarXToTop.value;
       const scrollbarYToLeft = computeScrollbarYToLeft.value;
-      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollbarXOpts.visible || 'visible'}`, `ov-y--${scrollbarYOpts.visible || 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
         '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
       });
@@ -15604,7 +15695,9 @@ let crossListDragRowObj = null;
         topSpaceHeight,
         rowList,
         isAllChecked,
-        isAllIndeterminate
+        isAllIndeterminate,
+        xThumbWidth,
+        yThumbHeight
       } = reactData;
       const defaultSlot = slots.default;
       const headerSlot = slots.header;
@@ -15629,8 +15722,13 @@ let crossListDragRowObj = null;
         padding
       } = rowOpts;
       const isDrag = computeIsDrag.value;
-      const scrollbarXOpts = computeScrollbarXOpts.value;
-      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
       const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       const showDefChekboxHead = showCheckbox && showHeader !== false;
       const leOns = {};
@@ -15639,13 +15737,16 @@ let crossListDragRowObj = null;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.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--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', className ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(className) ? className({
           $list: $xeList
         }) : className : '', {
           [`size--${vSize}`]: vSize,
           'is--virtual-scrollbar': useScrollbar,
-          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
-          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
+          '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
         }],
@@ -15693,17 +15794,10 @@ let crossListDragRowObj = null;
         style: {
           marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
         }
-      }, useScrollbar ? defaultSlot ? defaultSlot({
-        items: rowList,
-        $list: $xeList
-      }) : rowList.map((row, i) => renderRow(row, i)) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        key: 'vi',
-        ref: refViewInnerElem,
-        class: 'vxe-scrollbar--view-inner'
       }, defaultSlot ? defaultSlot({
         items: rowList,
         $list: $xeList
-      }) : rowList.map((row, i) => renderRow(row, i)))])]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }) : rowList.map((row, i) => renderRow(row, i)))]), footerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refFooterElem,
         class: 'vxe-list--footer-wrapper'
       }, footerSlot({
@@ -15715,7 +15809,7 @@ let crossListDragRowObj = null;
        */
       useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: scrollbarWrapperClss
-      }, [scrollbarXOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      }, [scrollXVisible === false ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackXElem,
         class: 'vxe-scrollbar--track-x',
         onClick: clickTrackXEvent
@@ -15727,7 +15821,7 @@ let crossListDragRowObj = null;
         onPointerup: cleatPointerThumbEvent,
         onPointercancel: cleatPointerThumbEvent,
         onLostpointercapture: cleatPointerThumbEvent
-      })]), scrollbarYOpts.visible === 'hidden' ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      })]), scrollYVisible === false ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackYElem,
         class: 'vxe-scrollbar--track-y',
         onClick: clickTrackYEvent
@@ -15772,11 +15866,24 @@ let crossListDragRowObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
       reFlag.value++;
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
+      reFlag.value++;
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeRowHeight, () => {
       reFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      recalculate().then(() => {
         recalculate();
       });
     });
@@ -15834,13 +15941,13 @@ let crossListDragRowObj = null;
       }
       if (useScrollbar || autoResize) {
         const el = refElem.value;
-        const viewInnerEl = refViewInnerElem.value;
+        const viewInnerEl = refVirtualBody.value;
         const resizeObserver = globalResize.create(() => {
           reFlag.value++;
         });
-        resizeObserver.observe(el);
-        if (autoResize) {
-          if (el) {
+        if (el) {
+          resizeObserver.observe(el);
+          if (autoResize) {
             resizeObserver.observe(el.parentElement);
           }
         }
@@ -37739,10 +37846,7 @@ const ImagePreview = VxeImagePreview;
       const collapseOpts = computeCollapseOpts.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const {
-        native,
-        yConfig,
         className,
-        viewAttrs,
         viewClassName,
         viewInnerClassName
       } = scrollbarOpts;
@@ -37758,13 +37862,16 @@ const ImagePreview = VxeImagePreview;
         }],
         style: varStyle
       }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
-        native,
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
         xConfig: {
-          visible: 'hidden'
+          visible: false
         },
-        yConfig,
+        yConfig: scrollbarOpts.yConfig,
         className: 'vxe-layout-aside--scrollbar' + (className ? ' ' + className : ''),
-        viewAttrs,
+        viewAttrs: scrollbarOpts.viewAttrs,
         viewClassName: 'vxe-layout-aside--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
         viewInnerClassName: 'vxe-layout-aside--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
       }, {
@@ -37860,6 +37967,32 @@ function layout_body_createReactData() {
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().layoutBody.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const {
+        showBacktop
+      } = props;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        className,
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      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: {
+          ...scrollbarOpts.viewAttrs,
+          id: showBacktop ? backtopId || null : null
+        },
+        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
+        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
+      };
+    });
     const computeMaps = {
       computeSize
     };
@@ -37890,16 +38023,7 @@ function layout_body_createReactData() {
         useScrollbar
       } = props;
       const backtopOpts = computeBacktopOpts.value;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        native,
-        xConfig,
-        yConfig,
-        className,
-        viewAttrs,
-        viewClassName,
-        viewInnerClassName
-      } = scrollbarOpts;
+      const scrollbarProps = computeScrollbarProps.value;
       const vSize = computeSize.value;
       const defaultSlot = slots.default;
       const backtopSlot = slots.backtop;
@@ -37922,18 +38046,7 @@ function layout_body_createReactData() {
           'is--loading': loading,
           'is--padding': padding
         }]
-      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
-        native,
-        xConfig,
-        yConfig,
-        className: 'vxe-layout-body--scrollbar' + (className ? ' ' + className : ''),
-        viewAttrs: {
-          ...viewAttrs,
-          id: showBacktop ? backtopId || null : null
-        },
-        viewClassName: 'vxe-layout-body--scrollbar-view' + (viewClassName ? ' ' + viewClassName : ''),
-        viewInnerClassName: 'vxe-layout-body--scrollbar-inner' + (viewInnerClassName ? ' ' + viewInnerClassName : '')
-      }, {
+      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, scrollbarProps, {
         default: () => defaultSlot ? defaultSlot({}) : []
       }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         id: showBacktop ? backtopId : '',
@@ -50622,6 +50735,25 @@ const scrollbarOffsetSize = 20;
     const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig);
     });
+    const computeScrollbarProps = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        viewClassName,
+        viewInnerClassName
+      } = scrollbarOpts;
+      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 : '')
+      };
+    });
     const computeMaps = {};
     const $xeTabs = {
       xID,
@@ -51297,20 +51429,14 @@ const scrollbarOffsetSize = 20;
         slots
       } = item;
       const defaultSlot = slots ? slots.default : null;
-      const scrollbarOpts = computeScrollbarOpts.value;
-      const {
-        viewClassName,
-        viewInnerClassName
-      } = scrollbarOpts;
+      const scrollbarProps = computeScrollbarProps.value;
       if (name && initNames.includes(name)) {
         return useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: `${name}`,
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name
           }],
-          ...scrollbarOpts,
-          viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? ' ' + viewClassName : ''),
-          viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? ' ' + viewInnerClassName : '')
+          ...scrollbarProps
         }, {
           default: () => defaultSlot ? callSlot(defaultSlot, {
             name
@@ -52996,6 +53122,7 @@ function getCrossTreeDragNodeInfo() {
 
 
 
+
 const {
   warnLog: tree_warnLog,
   errLog: tree_errLog
@@ -53012,6 +53139,34 @@ const {
 function tree_getNodeUniqueId() {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId('node_');
 }
+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,
@@ -53024,8 +53179,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,
@@ -53042,31 +53203,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
-    }
-  };
-}
 let crossTreeDragNodeObj = null;
 /* harmony default export */ var tree = (defineVxeComponent({
   name: 'VxeTree',
@@ -53197,7 +53333,12 @@ let crossTreeDragNodeObj = null;
       type: String,
       default: () => tree_getConfig().tree.size || tree_getConfig().size
     },
-    virtualYConfig: Object
+    virtualYConfig: Object,
+    useScrollbar: {
+      type: Boolean,
+      default: () => tree_getConfig().tree.useScrollbar
+    },
+    scrollbarConfig: Object
   },
   emits: ['update:modelValue', 'update:checkNodeKey', 'update:checkNodeKeys', 'node-click', 'node-dblclick', 'current-change', 'radio-change', 'checkbox-change', 'load-success', 'load-error', 'scroll', 'node-dragstart', 'node-dragover', 'node-dragend', 'node-remove-dragend', 'node-insert-dragend', 'node-expand', 'node-menu', 'menu-click'],
   setup(props, context) {
@@ -53214,6 +53355,10 @@ let crossTreeDragNodeObj = null;
     const refFooterWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualBody = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refTrackYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbXElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refThumbYElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragNodeLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refTooltip = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -53293,6 +53438,19 @@ let crossTreeDragNodeObj = null;
     const computeMenuOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, tree_getConfig().tree.menuConfig, props.menuConfig);
     });
+    const computeWrapperStyles = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), tree_getConfig().scrollbar.width);
+      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), tree_getConfig().scrollbar.height);
+      const stys = {};
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth);
+      }
+      return stys;
+    });
     const computeTreeStyle = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       const {
         indent
@@ -53336,6 +53494,70 @@ let crossTreeDragNodeObj = null;
     const computeFilterOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, tree_getConfig().tree.filterConfig, props.filterConfig);
     });
+    const computeScrollbarOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, tree_getConfig().tree.scrollbarConfig, props.scrollbarConfig);
+    });
+    const computeScrollbarXOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, tree_getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      });
+    });
+    const computeScrollbarYOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      return Object.assign({}, tree_getConfig().scrollbar.yConfig, scrollbarOpts.yConfig);
+    });
+    const computeScrollXVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollYVisible = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+    });
+    const computeScrollXAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    });
+    const computeScrollYAutoHide = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), tree_getConfig().scrollbar.autoHide);
+    });
+    const computeScrollbarWrapperClss = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const {
+        padding
+      } = scrollbarOpts;
+      const {
+        yThumbHeight,
+        xThumbWidth
+      } = reactData;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
+      return domUtils.buildClass(['vxe-scrollbar is--virtual', `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`, `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollXAutoHide,
+        'ov-y--auto-hide': scrollYAutoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      });
+    });
+    const computeScrollbarXToTop = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value;
+      return scrollbarXOpts.position === 'top';
+    });
+    const computeScrollbarYToLeft = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value;
+      return scrollbarYOpts.position === 'left';
+    });
     const computeMaps = {
       computeKeyField,
       computeParentField,
@@ -53932,6 +54154,10 @@ let crossTreeDragNodeObj = null;
         }
       });
     };
+    const updateScrollbar = () => {
+      updateThumbSize();
+      updateThumbOffset();
+    };
     /**
      * 重新计算列表
      */
@@ -53957,6 +54183,7 @@ let crossTreeDragNodeObj = null;
           const parentPaddingSize = getPaddingTopBottomSize(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
+        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
@@ -53998,6 +54225,7 @@ let crossTreeDragNodeObj = null;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
       const isY = scrollTop !== internalData.lastScrollTop;
+      updateThumbOffset();
       internalData.lastScrollTop = scrollTop;
       internalData.lastScrollLeft = scrollLeft;
       if (reactData.scrollYLoad) {
@@ -54673,13 +54901,6 @@ let crossTreeDragNodeObj = null;
         checked: isChecked
       }, evnt);
     };
-    const handleGlobalResizeEvent = () => {
-      const el = refElem.value;
-      if (!el || !el.clientWidth) {
-        return;
-      }
-      recalculate();
-    };
     const insertTreeNode = (newRecords, isAppend) => {
       const {
         treeFullData,
@@ -56342,6 +56563,183 @@ let crossTreeDragNodeObj = null;
         hideDropTip();
       }
     };
+    const updateThumbSize = () => {
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const trackXEl = refTrackXElem.value;
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0;
+      const thumbXElem = refThumbXElem.value;
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+      }
+      reactData.xThumbWidth = xThumbWidth;
+      const trackYEl = refTrackYElem.value;
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0;
+      const thumbYElem = refThumbYElem.value;
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+      }
+      reactData.yThumbHeight = yThumbHeight;
+    };
+    const updateThumbOffset = () => {
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return;
+      }
+      const {
+        xThumbWidth,
+        yThumbHeight
+      } = reactData;
+      const trackXEl = refTrackXElem.value;
+      const thumbXElem = refThumbXElem.value;
+      const xThumbLeft = trackXEl && xThumbWidth ? getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth, xThumbWidth) : 0;
+      internalData.xThumbLeft = xThumbLeft;
+      if (thumbXElem && xThumbWidth) {
+        thumbXElem.style.width = xThumbWidth + 'px';
+        thumbXElem.style.transform = `translateX(${xThumbLeft}px)`;
+      }
+      const trackYEl = refTrackYElem.value;
+      const thumbYElem = refThumbYElem.value;
+      const yThumbTop = trackYEl && yThumbHeight ? getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight, yThumbHeight) : 0;
+      internalData.yThumbTop = yThumbTop;
+      if (thumbYElem && yThumbHeight) {
+        thumbYElem.style.height = yThumbHeight + 'px';
+        thumbYElem.style.transform = `translateY(${yThumbTop}px)`;
+      }
+    };
+    const clickTrackXEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        left: getScrollFromClick(evnt.clientX - trackRect.left, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth),
+        behavior: 'auto'
+      });
+    };
+    const clickTrackYEvent = evnt => {
+      const trackEl = evnt.currentTarget;
+      if (trackEl !== evnt.target) {
+        return;
+      }
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackRect = trackEl.getBoundingClientRect();
+      viewEl.scrollTo({
+        top: getScrollFromClick(evnt.clientY - trackRect.top, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight),
+        behavior: 'auto'
+      });
+    };
+    const pointerdownThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        xThumbWidth
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientX - trackRect.left;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollLeft, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbXEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refVirtualWrapper.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          xThumbWidth
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth);
+      }
+    };
+    const cleatPointerThumbEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      thumbEl.releasePointerCapture(evnt.pointerId);
+      internalData.isThumbDrag = false;
+    };
+    const pointerdownThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      internalData.isThumbDrag = true;
+      thumbEl.setPointerCapture(evnt.pointerId);
+      const viewEl = refVirtualWrapper.value;
+      if (!viewEl) {
+        return;
+      }
+      const {
+        yThumbHeight
+      } = reactData;
+      const trackEl = thumbEl.parentElement;
+      const trackRect = trackEl.getBoundingClientRect();
+      const pointerPosition = evnt.clientY - trackRect.top;
+      // 记录 thumb 的偏移
+      const thumbOffset = getThumbOffsetSize(viewEl.scrollTop, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      internalData.thumbDragOffset = pointerPosition - thumbOffset;
+    };
+    const pointermoveThumbYEvent = evnt => {
+      const thumbEl = evnt.currentTarget;
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return;
+      }
+      const {
+        isThumbDrag,
+        thumbDragOffset
+      } = internalData;
+      if (isThumbDrag) {
+        const viewEl = refVirtualWrapper.value;
+        if (!viewEl) {
+          return;
+        }
+        const {
+          yThumbHeight
+        } = reactData;
+        const thumbEl = evnt.currentTarget;
+        const trackEl = thumbEl.parentElement;
+        const trackRect = trackEl.getBoundingClientRect();
+        // 更新偏移
+        viewEl.scrollTop = getScrollFromDrag(evnt.clientY - trackRect.top, thumbDragOffset, viewEl.clientHeight, viewEl.scrollHeight, trackEl.clientHeight, yThumbHeight);
+      }
+    };
     Object.assign($xeTree, treeMethods, treePrivateMethods);
     const renderDragIcon = (node, nodeid) => {
       const {
@@ -56686,19 +57084,23 @@ let crossTreeDragNodeObj = null;
       const {
         loading,
         trigger,
-        showLine
+        showLine,
+        useScrollbar
       } = props;
       const {
         bodyHeight,
         topSpaceHeight,
         treeList,
-        tooltipStore
+        tooltipStore,
+        xThumbWidth,
+        yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isNodeHover = computeIsNodeHover.value;
+      const wrapperStyles = computeWrapperStyles.value;
       const treeStyle = computeTreeStyle.value;
       const dragOpts = computeDragOpts.value;
       const tooltipOpts = computeTooltipOpts.value;
@@ -56706,21 +57108,36 @@ let crossTreeDragNodeObj = null;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
       const tooltipSlot = slots.tooltip;
+      const scrollbarOpts = computeScrollbarOpts.value;
+      const scrollXVisible = computeScrollXVisible.value;
+      const scrollYVisible = computeScrollYVisible.value;
+      const scrollbarXToTop = computeScrollbarXToTop.value;
+      const scrollbarYToLeft = computeScrollbarYToLeft.value;
+      const scrollXAutoHide = computeScrollXAutoHide.value;
+      const scrollYAutoHide = computeScrollYAutoHide.value;
+      const scrollbarWrapperClss = computeScrollbarWrapperClss.value;
       const teOns = {};
       if (dragOpts.isCrossTreeDrag && !treeList.length) {
         teOns.onDragover = $xeTree.handleCrossTreeNodeDragoverEmptyEvent;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        class: ['vxe-tree', {
+        class: ['vxe-tree', useScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', useScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', useScrollbar ? `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}` : '', {
           [`size--${vSize}`]: vSize,
           'show--line': showLine,
+          'is--virtual-scrollbar': useScrollbar,
+          'ov-padding': useScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+          'overflow-y': yThumbHeight,
+          'overflow-x': xThumbWidth,
           'checkbox--highlight': checkboxOpts.highlight,
           'radio--highlight': radioOpts.highlight,
           'node--hover': isNodeHover,
           'node--trigger': trigger === 'node',
           'is--loading': loading
         }],
+        style: wrapperStyles,
         ...teOns
       }, [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refHeaderWrapperElem,
@@ -56749,6 +57166,36 @@ let crossTreeDragNodeObj = null;
       }, footerSlot({
         $tree: $xeTree
       })) : renderEmptyElement($xeTree),
+      /**
+       * 滚动条
+       */
+      useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        class: scrollbarWrapperClss
+      }, [scrollXVisible === false ? renderEmptyElement($xeTree) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackXElem,
+        class: 'vxe-scrollbar--track-x',
+        onClick: clickTrackXEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbXElem,
+        class: 'vxe-scrollbar--thumb-x',
+        onPointerdown: pointerdownThumbXEvent,
+        onPointermove: pointermoveThumbXEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })]), scrollYVisible === false ? renderEmptyElement($xeTree) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refTrackYElem,
+        class: 'vxe-scrollbar--track-y',
+        onClick: clickTrackYEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refThumbYElem,
+        class: 'vxe-scrollbar--thumb-y',
+        onPointerdown: pointerdownThumbYEvent,
+        onPointermove: pointermoveThumbYEvent,
+        onPointerup: cleatPointerThumbEvent,
+        onPointercancel: cleatPointerThumbEvent,
+        onLostpointercapture: cleatPointerThumbEvent
+      })])]) : renderEmptyElement($xeTree),
       /**
        * 拖拽提示
        */
@@ -56832,18 +57279,33 @@ let crossTreeDragNodeObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    const hFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
-      hFlag.value++;
+      reFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(hFlag, () => {
-      recalculate();
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
+      reFlag.value++;
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        reFlag.value++;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+      recalculate().then(() => {
+        recalculate();
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
@@ -56852,7 +57314,9 @@ let crossTreeDragNodeObj = null;
         menuConfig,
         showOverflow,
         lazy,
-        loadMethod
+        loadMethod,
+        autoResize,
+        useScrollbar
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -56874,24 +57338,30 @@ let crossTreeDragNodeObj = null;
       if (menuConfig && !VxeUIContextMenu) {
         tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
-      if (props.autoResize) {
+      if (useScrollbar || autoResize) {
         const el = refElem.value;
+        const viewInnerEl = refVirtualBody.value;
         const parentEl = getParentElem();
         const resizeObserver = globalResize.create(() => {
-          if (props.autoResize) {
-            recalculate();
-          }
+          reFlag.value++;
         });
         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;
       }
-      recalculate();
-      globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent);
+      reFlag.value++;
+      globalEvents.on($xeTree, 'resize', () => {
+        reFlag.value++;
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
       const {