vxe-pc-ui 4.20.7 → 4.20.9

package/lib/index.umd.js

@@ -3084,6 +3084,7 @@ __webpack_require__.d(__webpack_exports__, {
   useFns: function() { return /* reexport */ useFns; },
   usePermission: function() { return /* reexport */ usePermission; },
   useSize: function() { return /* reexport */ useSize; },
+  useVScrollbar: function() { return /* reexport */ useVScrollbar; },
   validators: function() { return /* reexport */ validators; },
   version: function() { return /* reexport */ ui_version; },
   watermark: function() { return /* reexport */ components_watermark; }
@@ -3342,6 +3343,7 @@ __webpack_require__.d(components_namespaceObject, {
   useFns: function() { return useFns; },
   usePermission: function() { return usePermission; },
   useSize: function() { return useSize; },
+  useVScrollbar: function() { return useVScrollbar; },
   validators: function() { return validators; },
   version: function() { return ui_version; },
   watermark: function() { return components_watermark; }
@@ -3368,7 +3370,7 @@ if (typeof window !== 'undefined') {
 // EXTERNAL MODULE: ./node_modules/core-js/modules/es.array.push.js
 var es_array_push = __webpack_require__(4114);
 ;// ./node_modules/@vxe-ui/core/es/src/core.js
-const coreVersion = "4.4.32";
+const coreVersion = "4.4.35";
 const VxeCore = {
   coreVersion,
   uiVersion: '',
@@ -3996,7 +3998,7 @@ function createLog(type, name) {
     return msg;
   };
 }
-const version = "4.4.32";
+const version = "4.4.35";
 const log = {
   create: createLog,
   warn: createLog('warn', `v${version}`),
@@ -4462,12 +4464,83 @@ const baseUtils = {
    */
   getDefVal(value, defVal) {
     return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(value) ? defVal : value;
+  },
+  /**
+   * 判断是否启用
+   */
+  isEnabled(conf) {
+    return !!(conf && conf.enabled !== false);
+  },
+  /**
+   * 用于开关类型的配置项
+   * 局部启用规则：conf={}
+   * 局部禁用规则：conf={enabled:false}
+   * 全局默认启用规则：conf.enabled=true
+   */
+  hasEnableConf(conf, opts) {
+    return !!(opts && (conf ? opts.enabled !== false : opts.enabled));
   }
 };
 ;// ./node_modules/@vxe-ui/core/es/src/dom-utils.js
 
 
+const reClsMap = {};
+function getClsRE(cls) {
+  if (!reClsMap[cls]) {
+    reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
+  }
+  return reClsMap[cls];
+}
+/**
+ * 判断元素是否包含 class
+ */
+function hasClass(elem, cls) {
+  if (elem) {
+    if (elem.classList) {
+      return elem.classList.contains(cls);
+    }
+    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+  }
+  return false;
+}
+/**
+ * 给元素删除 class
+ */
+function removeClass(elem, cls) {
+  if (elem && hasClass(elem, cls)) {
+    elem.className = elem.className.replace(getClsRE(cls), '');
+  }
+}
 const domUtils = {
+  /**
+   * 判断是否像素px单位 '100px' | 100
+   */
+  isPx(val) {
+    return val && /^\d+(\.\d+)?(px)?$/.test(val);
+  },
+  /**
+   * 判断是否百分比%单位 '100%'
+   */
+  isScale(val) {
+    return val && /^\d+(\.\d+)?%$/.test(val);
+  },
+  /**
+   * 判断元素是否包含 class
+   */
+  hasClass,
+  /**
+   * 给元素删除 class
+   */
+  removeClass,
+  /**
+   * 给元素增加 class
+   */
+  addClass(elem, cls) {
+    if (elem && !hasClass(elem, cls)) {
+      removeClass(elem, cls);
+      elem.className = elem.className + ' ' + cls;
+    }
+  },
   /**
    * 生成 className
    */
@@ -4744,17 +4817,35 @@ const hooks = new store();
 ;// ./node_modules/@vxe-ui/core/es/src/useFns.js
 
 
+
 function useSize(props) {
   // 组件尺寸上下文
   const xeSizeInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeSizeInfo', null);
   const computeSize = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-    return props.size || (xeSizeInfo ? xeSizeInfo.value : null);
+    const {
+      size
+    } = props;
+    return size || (xeSizeInfo ? xeSizeInfo.value : null);
   });
   (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeSizeInfo', computeSize);
   return {
     computeSize
   };
 }
+function useVScrollbar(props) {
+  // 组件虚拟滚动条
+  const xeScrollbarInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('xeScrollbarInfo', null);
+  const computeIsVScrollbar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+    const {
+      useScrollbar
+    } = props;
+    return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(useScrollbar) ? useScrollbar : xeScrollbarInfo ? xeScrollbarInfo.value : null;
+  });
+  (0,external_commonjs_vue_commonjs2_vue_root_Vue_.provide)('xeScrollbarInfo', computeIsVScrollbar);
+  return {
+    computeIsVScrollbar
+  };
+}
 function usePermission(props) {
   const computePermissionInfo = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
     return handleCheckInfo(props.permissionCode, props.permissionMethod);
@@ -4765,6 +4856,7 @@ function usePermission(props) {
 }
 const useFns = {
   useSize,
+  useVScrollbar,
   usePermission
 };
 ;// ./node_modules/@vxe-ui/core/es/index.esm.js
@@ -5010,7 +5102,7 @@ function checkDynamic() {
 const {
   log: log_log
 } = VxeUI;
-const uiVersion = `ui v${"4.20.7"}`;
+const uiVersion = `ui v${"4.20.9"}`;
 function createComponentLog(name) {
   const tableVersion = VxeUI.tableVersion ? `table v${VxeUI.tableVersion}` : '';
   const ganttVersion = VxeUI.ganttVersion ? `gantt v${VxeUI.ganttVersion}` : '';
@@ -5028,7 +5120,7 @@ const errLog = log_log.create('error', uiVersion);
 
 
 
-const ui_version = "4.20.7";
+const ui_version = "4.20.9";
 VxeUI.uiVersion = ui_version;
 VxeUI.dynamicApp = dynamicApp;
 function config(options) {
@@ -6826,12 +6918,12 @@ function getTpImg() {
 function getPropClass(property, params) {
   return property ? (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(property) ? property(params) : property) || '' : '';
 }
-const reClsMap = {};
-function getClsRE(cls) {
-  if (!reClsMap[cls]) {
-    reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
+const dom_reClsMap = {};
+function dom_getClsRE(cls) {
+  if (!dom_reClsMap[cls]) {
+    dom_reClsMap[cls] = new RegExp(`(?:^|\\s)${cls}(?!\\S)`, 'g');
   }
-  return reClsMap[cls];
+  return dom_reClsMap[cls];
 }
 function getNodeOffset(elem, container, rest) {
   if (elem) {
@@ -6854,23 +6946,23 @@ function isPx(val) {
 function isScale(val) {
   return val && /^\d+(\.\d+)?%$/.test(val);
 }
-function hasClass(elem, cls) {
+function dom_hasClass(elem, cls) {
   if (elem) {
     if (elem.classList) {
       return elem.classList.contains(cls);
     }
-    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)));
+    return !!(elem.className && elem.className.match && elem.className.match(dom_getClsRE(cls)));
   }
   return false;
 }
-function removeClass(elem, cls) {
-  if (elem && hasClass(elem, cls)) {
-    elem.className = elem.className.replace(getClsRE(cls), '');
+function dom_removeClass(elem, cls) {
+  if (elem && dom_hasClass(elem, cls)) {
+    elem.className = elem.className.replace(dom_getClsRE(cls), '');
   }
 }
 function addClass(elem, cls) {
-  if (elem && !hasClass(elem, cls)) {
-    removeClass(elem, cls);
+  if (elem && !dom_hasClass(elem, cls)) {
+    dom_removeClass(elem, cls);
     elem.className = `${elem.className} ${cls}`;
   }
 }
@@ -6900,7 +6992,7 @@ function getEventTargetNode(evnt, container, queryCls, queryMethod) {
   let targetElem;
   let target = evnt.target.shadowRoot && evnt.composed ? evnt.composedPath()[0] || evnt.target : evnt.target;
   while (target && target.nodeType && target !== document) {
-    if (queryCls && hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
+    if (queryCls && dom_hasClass(target, queryCls) && (!queryMethod || queryMethod(target))) {
       targetElem = target;
     } else if (target === container) {
       return {
@@ -7994,10 +8086,18 @@ function createInternalData() {
       type: String,
       default: () => scrollbar_getConfig().scrollbar.viewInnerClassName
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     autoResize: {
       type: Boolean,
       default: () => scrollbar_getConfig().scrollbar.autoResize
     },
+    /**
+     * 已废弃
+     * @deprecated
+     */
     syncResize: [Boolean, String, Number]
   },
   emits: ['scroll', 'scroll-boundary'],
@@ -8788,7 +8888,10 @@ function tooltip_createInternalData() {
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(tooltip_createReactData());
     const internalData = tooltip_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -9013,7 +9116,7 @@ function tooltip_createInternalData() {
       } = reactData;
       const panelElem = refElem.value;
       if (!targetElem || !panelElem) {
-        return;
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       }
       const targetRect = targetElem.getBoundingClientRect();
       const targetWidth = targetElem.offsetWidth;
@@ -9049,6 +9152,7 @@ function tooltip_createInternalData() {
       tipStore.placement = ppObj.placement;
       tipStore.style = panelStyle;
       tipStore.arrowStyle.left = ppObj.arrowLeft ? `${ppObj.arrowLeft}px` : '';
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
     };
     const tooltipMethods = {
       dispatchEvent,
@@ -9075,8 +9179,13 @@ function tooltip_createInternalData() {
         return handleVisible(target, content);
       },
       updatePlacement() {
-        updateTipStyle();
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(updateTipStyle);
+        return updateTipStyle().then(() => {
+          return updateTipStyle();
+        }).then(() => {
+          setTimeout(() => {
+            updateTipStyle();
+          }, 15);
+        });
       },
       isActived() {
         return reactData.tipActive;
@@ -9102,7 +9211,6 @@ function tooltip_createInternalData() {
     Object.assign($xeTooltip, tooltipMethods, tooltipPrivateMethods);
     const renderContent = () => {
       const {
-        useScrollbar,
         theme,
         useHtml,
         useHTML
@@ -9110,6 +9218,7 @@ function tooltip_createInternalData() {
       const {
         tipContent
       } = reactData;
+      const isVScrollbar = computeIsVScrollbar.value;
       const wrapperStyle = computeWrapperStyle.value;
       const contentSlot = slots.content;
       const contVNs = [];
@@ -9127,7 +9236,7 @@ function tooltip_createInternalData() {
           key: 'cd'
         }, `${tipContent}`));
       }
-      if (useScrollbar) {
+      if (isVScrollbar) {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: 5,
           ref: contentScrollbar,
@@ -12757,7 +12866,10 @@ const Calendar = VxeCalendar;
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
     const refMaps = {
       refElem
@@ -12820,8 +12932,7 @@ const Calendar = VxeCalendar;
         shadow,
         padding,
         loading,
-        showTitleOverflow,
-        useScrollbar
+        showTitleOverflow
       } = props;
       const defaultSlot = slots.default;
       const headerSlot = slots.header;
@@ -12831,6 +12942,7 @@ const Calendar = VxeCalendar;
       const leftSlot = slots.left;
       const rightSlot = slots.right;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const cardStyle = computeCardStyle.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const scrollbarProps = computeScrollbarProps.value;
@@ -12857,7 +12969,7 @@ const Calendar = VxeCalendar;
         class: 'vxe-card--header-extra'
       }, vn_getSlotVNs(extraSlot({}))) : renderEmptyElement($xeCard)]) : renderEmptyElement($xeCard), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-card--body'
-      }, [leftSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+      }, [leftSlot ? isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-left',
         ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-left-view',
@@ -12866,7 +12978,7 @@ const Calendar = VxeCalendar;
         default: () => vn_getSlotVNs(leftSlot({}))
       }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-card--body-left'
-      }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+      }, vn_getSlotVNs(leftSlot({}))) : renderEmptyElement($xeCard), isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-content',
         ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? ' ' + viewClassName : ''),
@@ -12875,7 +12987,7 @@ const Calendar = VxeCalendar;
         default: () => defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []
       }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-card--body-content'
-      }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+      }, defaultSlot ? vn_getSlotVNs(defaultSlot({})) : []), rightSlot ? isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         class: 'vxe-card--body-scrollbar-right',
         ...scrollbarProps,
         viewClassName: 'vxe-card--body-scrollbar-right-view',
@@ -13485,7 +13597,7 @@ function moveRowAnimateToTb(elemList, offsetTop) {
 function clearRowAnimate(elem, clss) {
   setTimeout(() => {
     if (elem) {
-      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => removeClass(elem, rowMoveCls));
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(clss.map(cls => `${cls}.${rowMoveCls}`).join(',')), elem => dom_removeClass(elem, rowMoveCls));
     }
   }, 500);
 }
@@ -13542,6 +13654,7 @@ const {
   getI18n: list_getI18n,
   domUtils: list_domUtils,
   scrollbarUtils: list_scrollbarUtils,
+  useFns: list_useFns,
   menus: list_menus,
   globalEvents: list_globalEvents,
   globalResize: list_globalResize
@@ -13677,7 +13790,10 @@ let crossListDragRowObj = null;
     const browseObj = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().browse();
     const {
       computeSize
-    } = useSize(props);
+    } = list_useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = list_useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(list_createReactData());
     const internalData = list_createInternalData();
     const crossListDragRowInfo = getCrossListDragRowInfo();
@@ -13685,6 +13801,7 @@ let crossListDragRowObj = null;
     const refHeaderElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refFooterElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refVirtualSpaceElem = (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)();
@@ -14024,7 +14141,6 @@ let crossListDragRowObj = null;
         lastScrollLeft,
         lastScrollTop
       } = internalData;
-      updateScrollbar();
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0;
@@ -14034,8 +14150,14 @@ let crossListDragRowObj = null;
       });
     };
     const updateScrollbar = () => {
-      updateThumbSize();
-      updateThumbOffset();
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+          updateThumbSize();
+          updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     };
     /**
      * 重新计算列表
@@ -14046,7 +14168,7 @@ let crossListDragRowObj = null;
         let parentEl = el.parentElement;
         let parentHeight = 0;
         // 如果是虚拟滚动条
-        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+        if (parentEl && dom_hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
           parentEl = parentEl.parentElement;
         }
         if (parentEl) {
@@ -14054,10 +14176,11 @@ let crossListDragRowObj = null;
           parentHeight = parentEl.clientHeight - Math.ceil(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingLeft) + external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toNumber(parentStyle.paddingRight));
         }
         reactData.parentHeight = parentHeight;
-        updateScrollbar();
         updateHeight();
         if (el.clientWidth && el.clientHeight) {
-          return computeScrollLoad();
+          return computeScrollLoad().then(() => {
+            updateScrollbar();
+          });
         }
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
@@ -14073,7 +14196,7 @@ let crossListDragRowObj = null;
         offsetSize,
         rowHeight
       } = scrollYStore;
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const toVisibleIndex = Math.floor(scrollTop / rowHeight);
       const offsetStartIndex = Math.max(0, toVisibleIndex - 1 - offsetSize);
@@ -14087,7 +14210,7 @@ let crossListDragRowObj = null;
       }
     };
     const scrollEvent = evnt => {
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -14228,7 +14351,7 @@ let crossListDragRowObj = null;
         const clss = 'row--drag-origin';
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
           elem.draggable = false;
-          removeClass(elem, clss);
+          dom_removeClass(elem, clss);
         });
       }
     };
@@ -15599,6 +15722,28 @@ let crossListDragRowObj = null;
         hideDropTip();
       }
     };
+    const bindScrollbarResize = () => {
+      const {
+        scrollObserver
+      } = internalData;
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value;
+          const viewInnerEl = refVirtualSpaceElem.value;
+          const scrollObserver = list_globalResize.create(() => {
+            reScrollFlag.value++;
+          });
+          if (el) {
+            scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
+        }
+      }
+    };
     const updateThumbSize = () => {
       const viewEl = refVirtualWrapper.value;
       if (!viewEl) {
@@ -16010,8 +16155,7 @@ let crossListDragRowObj = null;
       const {
         showCheckbox,
         className,
-        loading,
-        useScrollbar
+        loading
       } = props;
       const {
         bodyHeight,
@@ -16026,6 +16170,7 @@ let crossListDragRowObj = null;
       const headerSlot = slots.header;
       const footerSlot = slots.footer;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const wrapperStyles = computeWrapperStyles.value;
       const virtualStyles = computeVirtualStyles.value;
       const radioOpts = computeRadioOpts.value;
@@ -16060,14 +16205,14 @@ let crossListDragRowObj = null;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        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({
+        class: ['vxe-list', isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', isVScrollbar ? `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-padding': useScrollbar && scrollbarOpts.padding,
-          'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
-          'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+          'is--virtual-scrollbar': isVScrollbar,
+          'ov-padding': isVScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
           'overflow-y': yThumbHeight,
           'overflow-x': xThumbWidth,
           'is--drag': isDrag,
@@ -16101,6 +16246,7 @@ let crossListDragRowObj = null;
         style: virtualStyles,
         onScroll: scrollEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-list--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -16130,7 +16276,7 @@ let crossListDragRowObj = null;
       /**
        * 滚动条
        */
-      useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: scrollbarWrapperClss
       }, [scrollXVisible === false ? renderEmptyElement($xeList) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refTrackXElem,
@@ -16179,43 +16325,54 @@ let crossListDragRowObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(dataFlag, () => {
       loadData(props.data || []);
     });
-    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reScrollFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reLayoutFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.syncResize, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
-      reFlag.value++;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeIsVScrollbar, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        bindScrollbarResize();
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+          reLayoutFlag.value++;
+        });
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeRowHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate();
       });
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.checkRowKey, () => {
       updateRadioModeValue();
     });
@@ -16242,8 +16399,7 @@ let crossListDragRowObj = null;
         showSeq,
         showRadio,
         showCheckbox,
-        autoResize,
-        useScrollbar
+        autoResize
       } = props;
       const rowOpts = computeRowOpts.value;
       const {
@@ -16268,25 +16424,12 @@ let crossListDragRowObj = null;
       if (useKey && !keyField) {
         list_errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField']);
       }
-      const el = refElem.value;
-      if (useScrollbar) {
-        const viewInnerEl = refVirtualBody.value;
-        const scrollObserver = list_globalResize.create(() => {
-          reFlag.value++;
-        });
-        if (el) {
-          scrollObserver.observe(el);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
-        }
-        internalData.scrollObserver = scrollObserver;
-      }
       if (autoResize) {
+        const el = refElem.value;
         const parentEl = getParentElem();
         const resizeObserver = list_globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++;
+            reLayoutFlag.value++;
           }
         });
         if (el) {
@@ -16297,9 +16440,10 @@ let crossListDragRowObj = null;
         }
         internalData.resizeObserver = resizeObserver;
       }
-      reFlag.value++;
+      reLayoutFlag.value++;
+      bindScrollbarResize();
       list_globalEvents.on($xeList, 'resize', () => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {
@@ -17780,7 +17924,7 @@ const {
     const numberMousedownEvent = evnt => {
       numberStopDown();
       if (evnt.button === 0) {
-        const isPrevNumber = hasClass(evnt.currentTarget, 'is--prev');
+        const isPrevNumber = dom_hasClass(evnt.currentTarget, 'is--prev');
         if (isPrevNumber) {
           numberPrevEvent(evnt);
         } else {
@@ -24004,7 +24148,7 @@ const {
         internalData.isMouseDown = false;
       } else {
         numberStopAll();
-        const isAddNumber = hasClass(evnt.currentTarget, 'is--plus');
+        const isAddNumber = dom_hasClass(evnt.currentTarget, 'is--plus');
         if (isAddNumber) {
           numberPlusEvent(evnt);
         } else {
@@ -24016,7 +24160,7 @@ const {
       numberStopAll();
       internalData.isMouseDown = true;
       if (evnt.button === 0) {
-        const isAddNumber = hasClass(evnt.currentTarget, 'is--plus');
+        const isAddNumber = dom_hasClass(evnt.currentTarget, 'is--plus');
         if (isAddNumber) {
           numberPlusEvent(evnt);
         } else {
@@ -32473,7 +32617,10 @@ const allActiveDrawers = [];
     const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refDrawerBox = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refConfirmBtn = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -32882,16 +33029,16 @@ const allActiveDrawers = [];
       const {
         slots: propSlots = {},
         content,
-        useScrollbar,
         useHtml
       } = props;
+      const isVScrollbar = computeIsVScrollbar.value;
       const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
       const leftSlot = slots.left || propSlots.left;
       const rightSlot = slots.right || propSlots.right;
       const contVNs = [];
       if (useHtml && !defaultSlot) {
-        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+        contVNs.push(isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: 'shc',
           class: 'vxe-drawer--scrollbar-content',
           ...scrollbarProps
@@ -32908,7 +33055,7 @@ const allActiveDrawers = [];
           innerHTML: getFuncText(content)
         }));
       } else {
-        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+        contVNs.push(isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: 'sdc',
           class: 'vxe-drawer--scrollbar-content',
           ...scrollbarProps
@@ -37156,7 +37303,7 @@ const IconPicker = VxeIconPicker;
     const imagePreviewPrivateMethods = {};
     const resetStyle = () => {
       const elem = refElem.value;
-      removeClass(elem, 'is--move');
+      dom_removeClass(elem, 'is--move');
       Object.assign(reactData, {
         offsetPct11: false,
         offsetScale: 0,
@@ -37408,7 +37555,7 @@ const IconPicker = VxeIconPicker;
       document.onmouseup = () => {
         document.onmousemove = domMousemove;
         document.onmouseup = domMouseup;
-        removeClass(elem, 'is--move');
+        dom_removeClass(elem, 'is--move');
       };
     };
     const handleGlobalKeydownEvent = evnt => {
@@ -37589,7 +37736,7 @@ const IconPicker = VxeIconPicker;
       const elem = refElem.value;
       if (elem) {
         elem.removeEventListener('wheel', wheelEvent);
-        removeClass(elem, 'is--move');
+        dom_removeClass(elem, 'is--move');
       }
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
@@ -38193,7 +38340,10 @@ const ImagePreview = VxeImagePreview;
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
     const refMaps = {
       refElem
@@ -38244,11 +38394,11 @@ const ImagePreview = VxeImagePreview;
       const {
         collapsed,
         loading,
-        padding,
-        useScrollbar
+        padding
       } = props;
       const varStyle = computeVarStyle.value;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const collapseOpts = computeCollapseOpts.value;
       const scrollbarOpts = computeScrollbarOpts.value;
       const {
@@ -38267,7 +38417,7 @@ const ImagePreview = VxeImagePreview;
           'is--loading': loading
         }],
         style: varStyle
-      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+      }, [isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         width: scrollbarOpts.width,
         height: scrollbarOpts.height,
         autoHide: scrollbarOpts.autoHide,
@@ -38360,7 +38510,10 @@ function layout_body_createReactData() {
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const internalData = layout_body_createInternalData();
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(layout_body_createReactData());
     const refMaps = {
@@ -38426,9 +38579,9 @@ function layout_body_createReactData() {
       const {
         loading,
         padding,
-        showBacktop,
-        useScrollbar
+        showBacktop
       } = props;
+      const isVScrollbar = computeIsVScrollbar.value;
       const backtopOpts = computeBacktopOpts.value;
       const scrollbarProps = computeScrollbarProps.value;
       const vSize = computeSize.value;
@@ -38453,7 +38606,7 @@ function layout_body_createReactData() {
           'is--loading': loading,
           'is--padding': padding
         }]
-      }, [useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, scrollbarProps, {
+      }, [isVScrollbar ? (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 : '',
@@ -38496,13 +38649,25 @@ const LayoutBody = VxeLayoutBody;
 
 
 
+const {
+  getConfig: layout_container_getConfig,
+  baseUtils: layout_container_baseUtils,
+  createEvent: layout_container_createEvent
+} = VxeUI;
+const {
+  getDefVal: layout_container_getDefVal
+} = layout_container_baseUtils;
 /* harmony default export */ var layout_container = (defineVxeComponent({
   name: 'VxeLayoutContainer',
   props: {
     vertical: Boolean,
+    useScrollbar: {
+      type: Boolean,
+      default: () => layout_container_getDefVal(layout_container_getConfig().layoutContainer.useScrollbar, layout_container_getConfig().useScrollbar)
+    },
     size: {
       type: String,
-      default: () => getConfig().layoutContainer.size || getConfig().size
+      default: () => layout_container_getConfig().layoutContainer.size || layout_container_getConfig().size
     }
   },
   emits: [],
@@ -38515,13 +38680,17 @@ const LayoutBody = VxeLayoutBody;
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)({});
     const refMaps = {
       refElem
     };
     const computeMaps = {
-      computeSize
+      computeSize,
+      computeIsVScrollbar
     };
     const $xeLayoutContainer = {
       xID,
@@ -38532,7 +38701,7 @@ const LayoutBody = VxeLayoutBody;
       getComputeMaps: () => computeMaps
     };
     const dispatchEvent = (type, params, evnt) => {
-      emit(type, createEvent(evnt, {
+      emit(type, layout_container_createEvent(evnt, {
         $layoutContainer: $xeLayoutContainer
       }, params));
     };
@@ -38900,6 +39069,7 @@ const {
 } = createComponentLog('menu');
 const {
   menus: menu_menus,
+  useFns: menu_useFns,
   getConfig: menu_getConfig,
   getIcon: menu_getIcon
 } = VxeUI;
@@ -38981,7 +39151,10 @@ let nemuUniqueKey = 100000000;
     const refCollapseBodyScrollbar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const {
       computeSize
-    } = useSize(props);
+    } = menu_useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = menu_useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(menu_createReactData());
     const internalData = menu_createInternalData();
     const refMaps = {
@@ -39610,8 +39783,7 @@ let nemuUniqueKey = 100000000;
       const {
         loading,
         collapseFixed,
-        appendTo,
-        useScrollbar
+        appendTo
       } = props;
       const {
         initialized,
@@ -39620,6 +39792,7 @@ let nemuUniqueKey = 100000000;
         isEnterCollapse
       } = reactData;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const isCollapsed = computeIsCollapsed.value;
       const currBorder = computeCurrBorder.value;
       const varStyle = computeVarStyle.value;
@@ -39669,7 +39842,7 @@ let nemuUniqueKey = 100000000;
         ...ons
       }, isCollapsed ? [headerSlot ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         class: 'vxe-menu--header'
-      }, headerSlot(stParams)) : renderEmptyElement($xeMenu), useScrollbar && isEnterCollapse ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+      }, headerSlot(stParams)) : renderEmptyElement($xeMenu), isVScrollbar && isEnterCollapse ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
         ref: refCollapseBodyScrollbar,
         class: 'vxe-menu--scrollbar-body',
         ...scrollbarOpts,
@@ -40019,7 +40192,10 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
     const $xeForm = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeForm', null);
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const reactData = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.reactive)(modal_createReactData());
     const internalData = modal_createInternalData();
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -41206,10 +41382,10 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         status,
         message,
         iconStatus,
-        useScrollbar,
         useHtml
       } = props;
       const content = props.content || message;
+      const isVScrollbar = computeIsVScrollbar.value;
       const isMsg = computeIsMsg.value;
       const scrollbarProps = computeScrollbarProps.value;
       const defaultSlot = slots.default || propSlots.default;
@@ -41224,7 +41400,7 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
         })]));
       }
       if (useHtml && !defaultSlot) {
-        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+        contVNs.push(isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: 'shc',
           class: 'vxe-modal--scrollbar-content',
           ...scrollbarProps
@@ -41241,7 +41417,7 @@ const lockScrollCssWidthKey = '--vxe-ui-modal-lock-scroll-view-width';
           innerHTML: getFuncText(content)
         }));
       } else {
-        contVNs.push(useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+        contVNs.push(isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: 'sdc',
           class: 'vxe-modal--scrollbar-content',
           ...scrollbarProps
@@ -48346,7 +48522,7 @@ const {
           rsSplitterLineEl.style.display = '';
         }
         handleUpdate();
-        removeClass(el, 'is--drag');
+        dom_removeClass(el, 'is--drag');
         dispatchEvent('resize-end', {
           prevItem,
           nextItem,
@@ -51115,7 +51291,10 @@ const scrollbarOffsetSize = 20;
     const $xeParentTabs = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.inject)('$xeTabs', null);
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refHeadWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refHeadPrevElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -51278,14 +51457,14 @@ const scrollbarOffsetSize = 20;
           if ((lrPosition ? scrollTop : scrollLeft) > 0) {
             addClass(headPrevEl, 'scrolling--middle');
           } else {
-            removeClass(headPrevEl, 'scrolling--middle');
+            dom_removeClass(headPrevEl, 'scrolling--middle');
           }
         }
         if (headNextEl) {
           if (lrPosition ? clientHeight < scrollHeight - Math.ceil(scrollTop) : clientWidth < scrollWidth - Math.ceil(scrollLeft)) {
             addClass(headNextEl, 'scrolling--middle');
           } else {
-            removeClass(headNextEl, 'scrolling--middle');
+            dom_removeClass(headNextEl, 'scrolling--middle');
           }
         }
       }
@@ -51892,9 +52071,6 @@ const scrollbarOffsetSize = 20;
       })) : tabs_renderEmptyElement($xeTabs)]);
     };
     const renderTabPane = item => {
-      const {
-        useScrollbar
-      } = props;
       const {
         initNames,
         activeName
@@ -51905,8 +52081,9 @@ const scrollbarOffsetSize = 20;
       } = item;
       const defaultSlot = slots ? slots.default : null;
       const scrollbarProps = computeScrollbarProps.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       if (name && initNames.includes(name)) {
-        return useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
+        return isVScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(packages_scrollbar, {
           key: `${name}`,
           class: ['vxe-tabs-pane--scrollbar-item', {
             'is--visible': activeName === name
@@ -53831,11 +54008,15 @@ let crossTreeDragNodeObj = null;
     const xID = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().uniqueId();
     const {
       computeSize
-    } = useSize(props);
+    } = useFns.useSize(props);
+    const {
+      computeIsVScrollbar
+    } = useFns.useVScrollbar(props);
     const refElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refHeaderWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refFooterWrapperElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refVirtualWrapper = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refVirtualSpaceElem = (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)();
@@ -54635,8 +54816,14 @@ let crossTreeDragNodeObj = null;
       });
     };
     const updateScrollbar = () => {
-      updateThumbSize();
-      updateThumbOffset();
+      const isVScrollbar = computeIsVScrollbar.value;
+      if (isVScrollbar) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+          updateThumbSize();
+          updateThumbOffset();
+        });
+      }
+      return Promise.resolve();
     };
     /**
      * 重新计算列表
@@ -54656,18 +54843,18 @@ let crossTreeDragNodeObj = null;
         const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0;
         const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0;
         // 如果是虚拟滚动条
-        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+        if (parentEl && dom_hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
           parentEl = parentEl.parentElement;
         }
         if (parentEl) {
           const parentPaddingSize = getPaddingTopBottomSize(parentEl);
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight);
         }
-        updateScrollbar();
         updateHeight();
         return computeScrollLoad().then(() => {
           updateHeight();
           updateYSpace();
+          updateScrollbar();
         });
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
@@ -54700,7 +54887,7 @@ let crossTreeDragNodeObj = null;
       }
     };
     const scrollEvent = evnt => {
-      const scrollBodyElem = evnt.target;
+      const scrollBodyElem = evnt.currentTarget;
       const scrollTop = scrollBodyElem.scrollTop;
       const scrollLeft = scrollBodyElem.scrollLeft;
       const isX = scrollLeft !== internalData.lastScrollLeft;
@@ -56239,7 +56426,7 @@ let crossTreeDragNodeObj = null;
         const clss = 'node--drag-origin';
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
           elem.draggable = false;
-          removeClass(elem, clss);
+          dom_removeClass(elem, clss);
         });
       }
     };
@@ -57043,6 +57230,28 @@ let crossTreeDragNodeObj = null;
         hideDropTip();
       }
     };
+    const bindScrollbarResize = () => {
+      const isVScrollbar = computeIsVScrollbar.value;
+      const {
+        scrollObserver
+      } = internalData;
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = refElem.value;
+          const viewInnerEl = refVirtualSpaceElem.value;
+          const scrollObserver = globalResize.create(() => {
+            reScrollFlag.value++;
+          });
+          if (el) {
+            scrollObserver.observe(el);
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl);
+          }
+          internalData.scrollObserver = scrollObserver;
+        }
+      }
+    };
     const updateThumbSize = () => {
       const viewEl = refVirtualWrapper.value;
       if (!viewEl) {
@@ -57564,8 +57773,7 @@ let crossTreeDragNodeObj = null;
       const {
         loading,
         trigger,
-        showLine,
-        useScrollbar
+        showLine
       } = props;
       const {
         bodyHeight,
@@ -57576,6 +57784,7 @@ let crossTreeDragNodeObj = null;
         yThumbHeight
       } = reactData;
       const vSize = computeSize.value;
+      const isVScrollbar = computeIsVScrollbar.value;
       const radioOpts = computeRadioOpts.value;
       const checkboxOpts = computeCheckboxOpts.value;
       const loadingOpts = computeLoadingOpts.value;
@@ -57602,13 +57811,13 @@ let crossTreeDragNodeObj = null;
       }
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
-        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'}` : '', {
+        class: ['vxe-tree', isVScrollbar ? `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}` : '', isVScrollbar ? `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}` : '', isVScrollbar ? `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,
+          'is--virtual-scrollbar': isVScrollbar,
+          'ov-padding': isVScrollbar && scrollbarOpts.padding,
+          'ov-x--auto-hide': isVScrollbar && scrollXAutoHide,
+          'ov-y--auto-hide': isVScrollbar && scrollYAutoHide,
           'overflow-y': yThumbHeight,
           'overflow-x': xThumbWidth,
           'checkbox--highlight': checkboxOpts.highlight,
@@ -57630,6 +57839,7 @@ let crossTreeDragNodeObj = null;
         style: treeStyle,
         onScroll: scrollEvent
       }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+        ref: refVirtualSpaceElem,
         class: 'vxe-tree--y-space',
         style: {
           height: bodyHeight ? `${bodyHeight}px` : ''
@@ -57649,7 +57859,7 @@ let crossTreeDragNodeObj = null;
       /**
        * 滚动条
        */
-      useScrollbar ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+      isVScrollbar ? (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,
@@ -57759,40 +57969,51 @@ let crossTreeDragNodeObj = null;
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.filterValue, () => {
       triggerSearchEvent(new Event('filter'));
     });
-    const reFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reScrollFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
+    const reLayoutFlag = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)(0);
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.height, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.minHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.maxHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.useScrollbar, () => {
-      reFlag.value++;
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeIsVScrollbar, () => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        bindScrollbarResize();
+        (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+          reLayoutFlag.value++;
+        });
+      });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYWidth, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXHeight, () => {
-      reFlag.value++;
+      reLayoutFlag.value++;
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollXVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(computeScrollYVisible, () => {
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reFlag, () => {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reLayoutFlag, () => {
       recalculate().then(() => {
         recalculate();
       });
     });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(reScrollFlag, () => {
+      updateScrollbar().then(() => {
+        updateScrollbar();
+      });
+    });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
       const {
         transform,
@@ -57801,8 +58022,7 @@ let crossTreeDragNodeObj = null;
         showOverflow,
         lazy,
         loadMethod,
-        autoResize,
-        useScrollbar
+        autoResize
       } = props;
       const dragOpts = computeDragOpts.value;
       if (!showOverflow) {
@@ -57824,25 +58044,12 @@ let crossTreeDragNodeObj = null;
       if (menuConfig && !VxeUIContextMenu) {
         tree_errLog('vxe.error.reqComp', ['vxe-context-menu']);
       }
-      const el = refElem.value;
-      if (useScrollbar || autoResize) {
-        const viewInnerEl = refVirtualBody.value;
-        const scrollObserver = globalResize.create(() => {
-          updateScrollbar();
-        });
-        if (el) {
-          scrollObserver.observe(el);
-        }
-        if (viewInnerEl) {
-          scrollObserver.observe(viewInnerEl);
-        }
-        internalData.scrollObserver = scrollObserver;
-      }
       if (autoResize) {
+        const el = refElem.value;
         const parentEl = getParentElem();
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            reFlag.value++;
+            reLayoutFlag.value++;
           }
         });
         if (el) {
@@ -57853,9 +58060,10 @@ let crossTreeDragNodeObj = null;
         }
         internalData.resizeObserver = resizeObserver;
       }
-      reFlag.value++;
+      reLayoutFlag.value++;
+      bindScrollbarResize();
       globalEvents.on($xeTree, 'resize', () => {
-        reFlag.value++;
+        reLayoutFlag.value++;
       });
     });
     (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onBeforeUnmount)(() => {