vxe-pc-ui 4.20.0 → 4.20.2

package/packages/tree/src/tree.ts

@@ -1,14 +1,15 @@
 import { ref, h, reactive, PropType, computed, VNode, watch, onBeforeUnmount, nextTick, onMounted, provide } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
-import { VxeUI, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui'
+import { VxeUI, domUtils, createEvent, useSize, globalEvents, globalResize, renderEmptyElement } from '../../ui'
 import { calcTreeLine, getItemCacheObj } from './util'
 import { createComponentLog } from '../../ui/src/log'
 import { getCrossTreeDragNodeInfo } from './store'
 import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
-import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
+import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util'
 import VxeLoadingComponent from '../../loading'
 import VxeTooltipComponent from '../../tooltip'
 
@@ -25,6 +26,37 @@ function getNodeUniqueId () {
   return XEUtils.uniqueId('node_')
 }
 
+function createReactData ():TreeReactData {
+  return {
+    parentHeight: 0,
+    customHeight: 0,
+    customMinHeight: 0,
+    customMaxHeight: 0,
+    currentNode: null,
+    scrollYLoad: false,
+    bodyHeight: 0,
+    topSpaceHeight: 0,
+    selectRadioKey: null,
+    treeList: [],
+    updateExpandedFlag: 1,
+    updateCheckboxFlag: 1,
+
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+
+    insertNodeFlag: 1,
+    removeNodeFlag: 1,
+    dragNode: null,
+    dragTipText: '',
+    isCrossDragNode: false,
+    tooltipStore: {
+      visible: false,
+      node: null
+    }
+  }
+}
+
 function createInternalData (): TreeInternalData {
   return {
     // initialized: false,
@@ -38,8 +70,17 @@ function createInternalData (): TreeInternalData {
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
 
-    lastScrollLeft: 0,
+    // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
+
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -60,32 +101,6 @@ function createInternalData (): TreeInternalData {
   }
 }
 
-function createReactData ():TreeReactData {
-  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: {
   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
   $newTree: (VxeTreeConstructor & VxeTreePrivateMethods) | null
@@ -220,7 +235,12 @@ export default defineVxeComponent({
       type: String as PropType<VxeTreePropTypes.Size>,
       default: () => getConfig().tree.size || getConfig().size
     },
-    virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>
+    virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeTreePropTypes.UseScrollbar>,
+      default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeTreePropTypes.ScrollbarConfig>
   },
   emits: [
     'update:modelValue',
@@ -256,6 +276,11 @@ export default defineVxeComponent({
     const refVirtualWrapper = ref<HTMLDivElement>()
     const refVirtualBody = ref<HTMLDivElement>()
 
+    const refTrackXElem = ref<HTMLDivElement>()
+    const refTrackYElem = ref<HTMLDivElement>()
+    const refThumbXElem = ref<HTMLDivElement>()
+    const refThumbYElem = ref<HTMLDivElement>()
+
     const refDragNodeLineElem = ref<HTMLDivElement>()
     const refDragTipElem = ref<HTMLDivElement>()
 
@@ -349,6 +374,17 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().tree.menuConfig, props.menuConfig)
     })
 
+    const computeWrapperStyles = computed(() => {
+      const barWidth = computeScrollYWidth.value
+      const barHeight = computeScrollXHeight.value
+      const stys: VxeComponentStyleType = {}
+      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 = computed(() => {
       const { indent } = props
       const { customHeight, customMinHeight, customMaxHeight } = reactData
@@ -383,6 +419,86 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().tree.filterConfig, props.filterConfig)
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().tree.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeScrollbarXOpts = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig, {
+        visible: false
+      })
+    })
+
+    const computeScrollbarYOpts = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
+    })
+
+    const computeScrollXHeight = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+    })
+
+    const computeScrollYWidth = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+    })
+
+    const computeScrollXVisible = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+    })
+
+    const computeScrollYVisible = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+    })
+
+    const computeScrollXAutoHide = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    })
+
+    const computeScrollYAutoHide = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+    })
+
+    const computeScrollbarWrapperClss = computed(() => {
+      const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const scrollXVisible = computeScrollXVisible.value
+      const scrollYVisible = computeScrollYVisible.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'}`
+      ], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      })
+    })
+
+    const computeScrollbarXToTop = computed(() => {
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      return scrollbarXOpts.position === 'top'
+    })
+
+    const computeScrollbarYToLeft = computed(() => {
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      return scrollbarYOpts.position === 'left'
+    })
+
     const computeMaps: VxeTreePrivateComputed = {
       computeKeyField,
       computeParentField,
@@ -928,6 +1044,11 @@ export default defineVxeComponent({
       })
     }
 
+    const updateScrollbar = () => {
+      updateThumbSize()
+      updateThumbOffset()
+    }
+
     /**
      * 重新计算列表
      */
@@ -949,6 +1070,7 @@ export default defineVxeComponent({
           const parentPaddingSize = getPaddingTopBottomSize(parentEl)
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)
         }
+        updateScrollbar()
         updateHeight()
         return computeScrollLoad().then(() => {
           updateHeight()
@@ -984,6 +1106,7 @@ export default defineVxeComponent({
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
       const isY = scrollTop !== internalData.lastScrollTop
+      updateThumbOffset()
       internalData.lastScrollTop = scrollTop
       internalData.lastScrollLeft = scrollLeft
       if (reactData.scrollYLoad) {
@@ -1531,14 +1654,6 @@ export default defineVxeComponent({
       dispatchEvent('radio-change', { node, value, checked: isChecked }, evnt)
     }
 
-    const handleGlobalResizeEvent = () => {
-      const el = refElem.value
-      if (!el || !el.clientWidth) {
-        return
-      }
-      recalculate()
-    }
-
     const insertTreeNode = (newRecords: any[], isAppend: boolean) => {
       const { treeFullData, nodeMaps } = internalData
       const keyField = computeKeyField.value
@@ -2997,6 +3112,176 @@ export default defineVxeComponent({
       }
     }
 
+    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: MouseEvent) => {
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      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: MouseEvent) => {
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      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: PointerEvent) => {
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = refVirtualWrapper.value
+      if (!viewEl) {
+        return
+      }
+      const { xThumbWidth } = reactData
+      const trackEl = thumbEl.parentElement as HTMLDivElement
+      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: PointerEvent) => {
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      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 as HTMLDivElement
+        const trackEl = thumbEl.parentElement as HTMLDivElement
+        const trackRect = trackEl.getBoundingClientRect()
+        // 更新偏移
+        viewEl.scrollLeft = getScrollFromDrag(evnt.clientX - trackRect.left, thumbDragOffset, viewEl.clientWidth, viewEl.scrollWidth, trackEl.clientWidth, xThumbWidth)
+      }
+    }
+
+    const cleatPointerThumbEvent = (evnt: PointerEvent) => {
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      thumbEl.releasePointerCapture(evnt.pointerId)
+      internalData.isThumbDrag = false
+    }
+
+    const pointerdownThumbYEvent = (evnt: PointerEvent) => {
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = refVirtualWrapper.value
+      if (!viewEl) {
+        return
+      }
+      const { yThumbHeight } = reactData
+      const trackEl = thumbEl.parentElement as HTMLDivElement
+      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: PointerEvent) => {
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      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 as HTMLDivElement
+        const trackEl = thumbEl.parentElement as HTMLDivElement
+        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: any, nodeid: string) => {
@@ -3341,13 +3626,14 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      const { loading, trigger, showLine } = props
-      const { bodyHeight, topSpaceHeight, treeList, tooltipStore } = reactData
+      const { loading, trigger, showLine, useScrollbar } = props
+      const { bodyHeight, topSpaceHeight, treeList, 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
@@ -3355,6 +3641,14 @@ export default defineVxeComponent({
       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: {
         onDragover?: (...args: any[]) => void
@@ -3364,15 +3658,29 @@ export default defineVxeComponent({
       }
       return h('div', {
         ref: refElem,
-        class: ['vxe-tree', {
-          [`size--${vSize}`]: vSize,
-          'show--line': showLine,
-          'checkbox--highlight': checkboxOpts.highlight,
-          'radio--highlight': radioOpts.highlight,
-          'node--hover': isNodeHover,
-          'node--trigger': trigger === 'node',
-          'is--loading': loading
-        }],
+        class: [
+          'vxe-tree',
+          useScrollbar ? `ov-x--${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
@@ -3407,6 +3715,49 @@ export default defineVxeComponent({
             class: 'vxe-tree--footer-wrapper'
           }, footerSlot({ $tree: $xeTree }))
           : renderEmptyElement($xeTree),
+        /**
+         * 滚动条
+         */
+        useScrollbar
+          ? h('div', {
+            class: scrollbarWrapperClss
+          }, [
+            scrollXVisible === false
+              ? renderEmptyElement($xeTree)
+              : h('div', {
+                ref: refTrackXElem,
+                class: 'vxe-scrollbar--track-x',
+                onClick: clickTrackXEvent
+              }, [
+                h('div', {
+                  ref: refThumbXElem,
+                  class: 'vxe-scrollbar--thumb-x',
+                  onPointerdown: pointerdownThumbXEvent,
+                  onPointermove: pointermoveThumbXEvent,
+                  onPointerup: cleatPointerThumbEvent,
+                  onPointercancel: cleatPointerThumbEvent,
+                  onLostpointercapture: cleatPointerThumbEvent
+                })
+              ]),
+            scrollYVisible === false
+              ? renderEmptyElement($xeTree)
+              : h('div', {
+                ref: refTrackYElem,
+                class: 'vxe-scrollbar--track-y',
+                onClick: clickTrackYEvent
+              }, [
+                h('div', {
+                  ref: refThumbYElem,
+                  class: 'vxe-scrollbar--thumb-y',
+                  onPointerdown: pointerdownThumbYEvent,
+                  onPointermove: pointermoveThumbYEvent,
+                  onPointerup: cleatPointerThumbEvent,
+                  onPointercancel: cleatPointerThumbEvent,
+                  onLostpointercapture: cleatPointerThumbEvent
+                })
+              ])
+          ])
+          : renderEmptyElement($xeTree),
         /**
          * 拖拽提示
          */
@@ -3495,22 +3846,43 @@ export default defineVxeComponent({
       triggerSearchEvent(new Event('filter'))
     })
 
-    const hFlag = ref(0)
+    const reFlag = ref(0)
     watch(() => props.height, () => {
-      hFlag.value++
+      reFlag.value++
     })
     watch(() => props.minHeight, () => {
-      hFlag.value++
+      reFlag.value++
     })
     watch(() => props.maxHeight, () => {
-      hFlag.value++
+      reFlag.value++
     })
-    watch(hFlag, () => {
-      recalculate()
+    watch(() => props.useScrollbar, () => {
+      reFlag.value++
+    })
+    watch(computeScrollYWidth, () => {
+      reFlag.value++
+    })
+    watch(computeScrollXHeight, () => {
+      reFlag.value++
+    })
+    watch(computeScrollXVisible, () => {
+      nextTick(() => {
+        reFlag.value++
+      })
+    })
+    watch(computeScrollYVisible, () => {
+      nextTick(() => {
+        reFlag.value++
+      })
+    })
+    watch(reFlag, () => {
+      recalculate().then(() => {
+        recalculate()
+      })
     })
 
     onMounted(() => {
-      const { transform, drag, menuConfig, showOverflow, lazy, loadMethod } = props
+      const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props
       const dragOpts = computeDragOpts.value
       if (!showOverflow) {
         errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true'])
@@ -3531,12 +3903,25 @@ export default defineVxeComponent({
       if (menuConfig && !VxeUIContextMenu) {
         errLog('vxe.error.reqComp', ['vxe-context-menu'])
       }
-      if (props.autoResize) {
-        const el = refElem.value
+      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 parentEl = getParentElem()
         const resizeObserver = globalResize.create(() => {
           if (props.autoResize) {
-            recalculate()
+            reFlag.value++
           }
         })
         if (el) {
@@ -3548,15 +3933,20 @@ export default defineVxeComponent({
         internalData.resizeObserver = resizeObserver
       }
 
-      recalculate()
-      globalEvents.on($xeTree, 'resize', handleGlobalResizeEvent)
+      reFlag.value++
+      globalEvents.on($xeTree, 'resize', () => {
+        reFlag.value++
+      })
     })
 
     onBeforeUnmount(() => {
-      const { resizeObserver } = internalData
+      const { scrollObserver, resizeObserver } = internalData
       if (resizeObserver) {
         resizeObserver.disconnect()
       }
+      if (scrollObserver) {
+        scrollObserver.disconnect()
+      }
       globalEvents.off($xeTree, 'resize')
       XEUtils.assign(reactData, createReactData())
       XEUtils.assign(internalData, createInternalData())

package/packages/ui/src/utils.ts

@@ -72,3 +72,7 @@ export function enModelValue (nodeid: string | number | null | undefined) {
 export function deModelValue (nodeid: string | number | null) {
   return nodeid ? decodeURIComponent(`${nodeid}`) : nodeid
 }
+
+export function getDefaultConfig <T = any, D = any> (val1: T, def1: D): (T | D) {
+  return XEUtils.eqNull(val1) ? def1 : val1
+}