vxe-pc-ui 3.20.8 → 3.20.10

package/packages/tree/src/tree.ts

@@ -7,18 +7,17 @@ import { createComponentLog } from '../../ui/src/log'
 import { getSlotVNs } from '../../ui/src/vn'
 import { crossTreeDragNodeGlobal, getCrossTreeDragNodeInfo } from './store'
 import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
-import { isEnableConf, enModelValue, deModelValue, getText, getDefaultConfig } from '../../ui/src/utils'
+import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
 import VxeTooltipComponent from '../../tooltip'
 
-import type { TreeReactData, VxeTreeEmits, VxeTreeConstructor, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeTreePrivateMethods, VxeComponentSizeType, ValueOf, VxeTooltipInstance, VxeComponentStyleType, VxeScrollbarPropTypes } from '../../../types'
+import type { TreeReactData, VxeTreeEmits, VxeTreeConstructor, VxeTreePropTypes, TreeInternalData, VxeTreeDefines, VxeTreePrivateMethods, ValueOf, VxeTooltipInstance, VxeComponentStyleType, VxeScrollbarPropTypes, VxeUseSizeComputed, VxeUseVScrollbarComputed, VxeUseInitVScrollbarComputed } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('tree')
 
-const { menus, scrollbarUtils, getConfig, getI18n, getIcon } = VxeUI
-
-const { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } = scrollbarUtils
+const { menus, getConfig, getI18n, getIcon, baseUtils } = VxeUI
+const { getDefVal } = baseUtils
 
 let crossTreeDragNodeObj: {
   $oldTree: VxeTreeConstructor & VxeTreePrivateMethods
@@ -619,7 +618,9 @@ function createInternalData (): TreeInternalData {
 export default /* define-vxe-component start */ defineVxeComponent({
   name: 'VxeTree',
   mixins: [
-    globalMixins.sizeMixin
+    globalMixins.sizeMixin,
+    globalMixins.vScrollbarMixin,
+    globalMixins.initVScrollbarMixin
   ],
   props: {
     data: Array as PropType<VxeTreePropTypes.Data>,
@@ -751,7 +752,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeTreePropTypes.UseScrollbar>,
-      default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
+      default: () => getDefVal(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTreePropTypes.ScrollbarConfig>
   },
@@ -772,14 +773,13 @@ export default /* define-vxe-component start */ defineVxeComponent({
       reactData,
       crossTreeDragNodeInfo: crossTreeDragNodeGlobal,
 
-      reFlag: 0,
+      reLayoutFlag: 0,
+      reScrollFlag: 0,
       dataFlag: 0
     }
   },
   computed: {
-    ...({} as {
-      computeSize(): VxeComponentSizeType
-    }),
+    ...({} as VxeUseSizeComputed & VxeUseVScrollbarComputed & VxeUseInitVScrollbarComputed),
     computeTitleField () {
       const $xeTree = this
       const props = $xeTree
@@ -969,42 +969,42 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+      return getDefVal(getDefVal(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
     },
     computeScrollYWidth () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
+      return getDefVal(getDefVal(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
     },
     computeScrollXVisible () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarXOpts.visible, scrollbarOpts.visible)
     },
     computeScrollYVisible () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+      return getDefVal(scrollbarYOpts.visible, scrollbarOpts.visible)
     },
     computeScrollXAutoHide () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarXOpts = $xeTree.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     },
     computeScrollYAutoHide () {
       const $xeTree = this
 
       const scrollbarOpts = $xeTree.computeScrollbarOpts as VxeTreePropTypes.ScrollbarConfig
       const scrollbarYOpts = $xeTree.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
-      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
+      return getDefVal(getDefVal(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), getConfig().scrollbar.autoHide)
     },
     computeScrollbarWrapperClss () {
       const $xeTree = this
@@ -1047,6 +1047,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeTree = this
       $xeTree.$emit(type, createEvent(evnt, { $tree: $xeTree }, params))
     },
+    getScrollViewElem () {
+      const $xeTree = this
+
+      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
+      return viewEl || null
+    },
     getNodeId (node: any) {
       const $xeTree = this
 
@@ -1692,8 +1698,14 @@ export default /* define-vxe-component start */ defineVxeComponent({
     updateScrollbar () {
       const $xeTree = this
 
-      $xeTree.updateThumbSize()
-      $xeTree.updateThumbOffset()
+      const isVScrollbar = $xeTree.computeIsVScrollbar
+      if (isVScrollbar) {
+        return $xeTree.$nextTick().then(() => {
+          $xeTree.updateThumbSize()
+          $xeTree.updateThumbOffset()
+        })
+      }
+      return Promise.resolve()
     },
     /**
      * 重新计算列表
@@ -1720,11 +1732,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
           const parentPaddingSize = getPaddingTopBottomSize(parentEl)
           reactData.parentHeight = Math.max(headHeight + footHeight + rowHeight, parentEl.clientHeight - parentPaddingSize - headHeight - footHeight)
         }
-        $xeTree.updateScrollbar()
         $xeTree.updateHeight()
         return $xeTree.computeScrollLoad().then(() => {
           $xeTree.updateHeight()
           $xeTree.updateYSpace()
+          $xeTree.updateScrollbar()
         })
       }
       return $xeTree.$nextTick()
@@ -1763,7 +1775,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const scrollBodyElem = evnt.target as HTMLDivElement
+      const scrollBodyElem = evnt.currentTarget as HTMLDivElement
       const scrollTop = scrollBodyElem.scrollTop
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
@@ -3450,199 +3462,28 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }, evnt)
       }
     },
-
     // 滚动条
-    updateThumbSize () {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const trackXEl = $xeTree.$refs.refTrackXElem as HTMLDivElement
-      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
-      const thumbXElem = $xeTree.$refs.refThumbXElem as HTMLDivElement
-      if (thumbXElem) {
-        thumbXElem.style.width = xThumbWidth + 'px'
-      }
-      reactData.xThumbWidth = xThumbWidth
-
-      const trackYEl = $xeTree.$refs.refTrackYElem as HTMLDivElement
-
-      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
-      const thumbYElem = $xeTree.$refs.refThumbYElem as HTMLDivElement
-      if (thumbYElem) {
-        thumbYElem.style.height = yThumbHeight + 'px'
-      }
-      reactData.yThumbHeight = yThumbHeight
-    },
-    updateThumbOffset () {
+    bindScrollbarResize () {
       const $xeTree = this
-      const reactData = $xeTree.reactData
       const internalData = $xeTree.internalData
 
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      if (!viewEl) {
-        return
-      }
-      if (!viewEl.clientHeight || !viewEl.clientHeight) {
-        return
-      }
-      const { xThumbWidth, yThumbHeight } = reactData
-      const trackXEl = $xeTree.$refs.refTrackXElem as HTMLDivElement
-      const thumbXElem = $xeTree.$refs.refThumbXElem as HTMLDivElement
-      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 = $xeTree.$refs.refTrackYElem as HTMLDivElement
-      const thumbYElem = $xeTree.$refs.refThumbYElem as HTMLDivElement
-      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)`
-      }
-    },
-    clickTrackXEvent (evnt: MouseEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      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'
-      })
-    },
-    clickTrackYEvent (evnt: MouseEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-
-      const trackEl = evnt.currentTarget as HTMLDivElement
-      if (trackEl !== evnt.target) {
-        return
-      }
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      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'
-      })
-    },
-    pointerdownThumbXEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      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
-    },
-    pointermoveThumbXEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-        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)
-      }
-    },
-    cleatPointerThumbEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      thumbEl.releasePointerCapture(evnt.pointerId)
-      internalData.isThumbDrag = false
-    },
-    pointerdownThumbYEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      internalData.isThumbDrag = true
-      thumbEl.setPointerCapture(evnt.pointerId)
-
-      const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-      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
-    },
-    pointermoveThumbYEvent (evnt: PointerEvent) {
-      const $xeTree = this
-      const reactData = $xeTree.reactData
-      const internalData = $xeTree.internalData
-
-      const thumbEl = evnt.currentTarget as HTMLDivElement
-      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
-        return
-      }
-      const { isThumbDrag, thumbDragOffset } = internalData
-      if (isThumbDrag) {
-        const viewEl = $xeTree.$refs.refVirtualWrapper as HTMLDivElement
-        if (!viewEl) {
-          return
+      const isVScrollbar = $xeTree.computeIsVScrollbar
+      const { scrollObserver } = internalData
+      if (isVScrollbar) {
+        if (!scrollObserver) {
+          const el = $xeTree.$refs.refElem as HTMLDivElement
+          const viewInnerEl = $xeTree.$refs.refVirtualSpaceElem as HTMLDivElement
+          const scrollObserver = globalResize.create(() => {
+            $xeTree.reScrollFlag++
+          })
+          if (el) {
+            scrollObserver.observe(el)
+          }
+          if (viewInnerEl) {
+            scrollObserver.observe(viewInnerEl)
+          }
+          internalData.scrollObserver = scrollObserver
         }
-        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)
       }
     },
 
@@ -4011,9 +3852,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const slots = $xeTree.$scopedSlots
       const reactData = $xeTree.reactData
 
-      const { loading, trigger, showLine, useScrollbar } = props
+      const { loading, trigger, showLine } = props
       const { bodyHeight, topSpaceHeight, treeList, tooltipStore, xThumbWidth, yThumbHeight } = reactData
       const vSize = $xeTree.computeSize
+      const isVScrollbar = $xeTree.computeIsVScrollbar
       const radioOpts = $xeTree.computeRadioOpts
       const checkboxOpts = $xeTree.computeCheckboxOpts
       const loadingOpts = $xeTree.computeLoadingOpts
@@ -4046,17 +3888,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
         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'}` : '',
+          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,
@@ -4084,6 +3926,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
           }
         }, [
           h('div', {
+            ref: 'refVirtualSpaceElem',
             class: 'vxe-tree--y-space',
             style: {
               height: bodyHeight ? `${bodyHeight}px` : ''
@@ -4106,7 +3949,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
         /**
          * 滚动条
          */
-        useScrollbar
+        isVScrollbar
           ? h('div', {
             class: scrollbarWrapperClss
           }, [
@@ -4252,53 +4095,65 @@ export default /* define-vxe-component start */ defineVxeComponent({
     height () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     },
     minHeight () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     },
     maxHeight () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     },
-    useScrollbar () {
+    computeIsVScrollbar () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.$nextTick(() => {
+        $xeTree.bindScrollbarResize()
+        $xeTree.$nextTick(() => {
+          $xeTree.reLayoutFlag++
+        })
+      })
     },
     computeScrollYWidth () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     },
     computeScrollXHeight () {
       const $xeTree = this
 
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     },
     computeScrollXVisible () {
       const $xeTree = this
 
       $xeTree.$nextTick(() => {
-        $xeTree.reFlag++
+        $xeTree.reLayoutFlag++
       })
     },
     computeScrollYVisible () {
       const $xeTree = this
 
       $xeTree.$nextTick(() => {
-        $xeTree.reFlag++
+        $xeTree.reLayoutFlag++
       })
     },
-    reFlag () {
+    reLayoutFlag () {
       const $xeTree = this
 
       $xeTree.recalculate().then(() => {
         $xeTree.recalculate()
       })
+    },
+    reScrollFlag () {
+      const $xeTree = this
+
+      $xeTree.updateScrollbar().then(() => {
+        $xeTree.updateScrollbar()
+      })
     }
   },
   created () {
@@ -4316,7 +4171,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const props = $xeTree
     const internalData = $xeTree.internalData
 
-    const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize, useScrollbar } = props
+    const { transform, drag, menuConfig, showOverflow, lazy, loadMethod, autoResize } = props
     const dragOpts = $xeTree.computeDragOpts
     if (!showOverflow) {
       errLog('vxe.error.errProp', ['show-overflow=false', 'show-overflow=true'])
@@ -4337,25 +4192,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (menuConfig && !VxeUIContextMenu) {
       errLog('vxe.error.reqComp', ['vxe-context-menu'])
     }
-    const el = $xeTree.$refs.refElem as HTMLDivElement
-    if (useScrollbar) {
-      const viewInnerEl = $xeTree.$refs.refVirtualBody as HTMLDivElement
-      const scrollObserver = globalResize.create(() => {
-        $xeTree.updateScrollbar()
-      })
-      if (el) {
-        scrollObserver.observe(el)
-      }
-      if (viewInnerEl) {
-        scrollObserver.observe(viewInnerEl)
-      }
-      internalData.scrollObserver = scrollObserver
-    }
     if (autoResize) {
+      const el = $xeTree.$refs.refElem as HTMLDivElement
       const parentEl = $xeTree.getParentElem()
       const resizeObserver = globalResize.create(() => {
         if (props.autoResize) {
-          $xeTree.reFlag++
+          $xeTree.reLayoutFlag++
         }
       })
       if (el) {
@@ -4367,9 +4209,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       internalData.resizeObserver = resizeObserver
     }
 
-    $xeTree.reFlag++
+    $xeTree.reLayoutFlag++
+    $xeTree.bindScrollbarResize()
     globalEvents.on($xeTree, 'resize', () => {
-      $xeTree.reFlag++
+      $xeTree.reLayoutFlag++
     })
   },
   beforeDestroy () {

package/styles/components/date-panel.scss

@@ -434,41 +434,22 @@
   flex-grow: 1;
   border-radius: var(--vxe-ui-base-border-radius);
   user-select: none;
-  & > ul {
+  .vxe-date-panel--time-hour-list,
+  .vxe-date-panel--time-minute-list,
+  .vxe-date-panel--time-second-list {
     height: 100%;
     overflow: hidden;
     margin: 0;
     padding: 0;
-    width: 3.2em;
+    width: 3em;
+  }
+  .vxe-date-panel--time-list-inner {
     &:before,
     &:after {
       content: " ";
       display: block;
       height: 6em;
     }
-    &:hover {
-      overflow-y: auto;
-    }
-    & > li {
-      display: block;
-      height: 2em;
-      line-height: 2em;
-      padding-left: 0.4em;
-      &:not(.is--disabled) {
-        &:hover {
-          background-color: var(--vxe-ui-input-date-picker-hover-background-color);
-          cursor: pointer;
-        }
-      }
-      &.is--selected {
-        font-weight: 700;
-        color: var(--vxe-ui-font-primary-color);
-      }
-      &.is--disabled {
-        color: var(--vxe-ui-font-disabled-color);
-        cursor: no-drop;
-      }
-    }
   }
   .vxe-date-panel--time-minute-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
@@ -476,16 +457,37 @@
   .vxe-date-panel--time-second-list {
     border-left: 1px solid var(--vxe-ui-base-popup-border-color);
   }
+  .vxe-date-panel--time-item {
+    display: block;
+    height: 2em;
+    line-height: 2em;
+    text-align: center;
+    &:not(.is--disabled) {
+      &:hover {
+        background-color: var(--vxe-ui-input-date-picker-hover-background-color);
+        cursor: pointer;
+      }
+    }
+    &.is--selected {
+      font-weight: 700;
+      color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--disabled {
+      color: var(--vxe-ui-font-disabled-color);
+      cursor: no-drop;
+    }
+  }
 }
 .vxe-date-panel {
   &.type--time {
     .vxe-date-panel--time-body {
-      & > ul {
-        width: 4em;
-        & > li {
+      .vxe-date-panel--time-hour-list,
+      .vxe-date-panel--time-minute-list,
+      .vxe-date-panel--time-second-list {
+        width: 3.6em;
+        .vxe-date-panel--time-item {
           height: 2.2em;
           line-height: 2.2em;
-          padding-left: 0.8em;
         }
       }
     }

package/styles/components/icon-picker.scss

@@ -122,14 +122,20 @@
   }
 }
 
-.vxe-ico-picker--list-wrapper {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper {
   overflow-x: hidden;
   overflow-y: auto;
   height: var(--vxe-ui-icon-picker-panel-height);
-  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.3em));
   padding: var(--vxe-ui-layout-padding-qtr);
 }
-.vxe-ico-picker--list {
+.vxe-ico-picker--list-wrapper,
+.vxe-ico-picker--scrollbar-list-wrapper-view {
+  max-height: var(--vxe-ui-icon-picker-panel-max-height, var(--vxe-ui-icon-picker-panel-height, 22.6em));
+}
+
+.vxe-ico-picker--list,
+.vxe-ico-picker--scrollbar-list-wrapper-inner {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;