vxe-pc-ui 3.19.7 → 3.20.0

package/packages/list/src/list.ts

@@ -1,17 +1,18 @@
 import { PropType, CreateElement, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils, { XEBrowse } from 'xe-utils'
-import { VxeUI, getConfig, getIcon, getI18n, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, createEvent, globalMixins, renderEmptyElement } from '../../ui'
 import { crossListDragRowGlobal, getCrossListDragRowInfo } from './store'
-import { addClass, getTpImg, isScale, removeClass, toCssUnit } from '../../ui/src/dom'
+import { addClass, getTpImg, hasClass, isScale, removeClass, toCssUnit } from '../../ui/src/dom'
 import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
+import { getThumbOffsetSize, getThumbSize, getScrollFromClick, getScrollFromDrag } from '../../scrollbar/src/util'
 import { getItemCacheObj } from './util'
 import VxeLoadingComponent from '../../loading'
 
-import type { VxeListPropTypes, VxeListEmits, VxeComponentSizeType, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType } from '../../../types'
+import type { VxeListPropTypes, VxeListEmits, VxeComponentSizeType, ListReactData, VxeListDefines, ValueOf, ListInternalData, VxeListConstructor, VxeListPrivateMethods, VxeComponentStyleType, VxeScrollbarPropTypes } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('tree')
 
@@ -52,6 +53,11 @@ function createReactData (): ListReactData {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -62,13 +68,20 @@ function createReactData (): ListReactData {
 
 function createInternalData (): ListInternalData {
   return {
-    resizeObserver: undefined,
     fullData: [],
     afterList: [],
     fullKeyMaps: {},
     rowMaps: {},
-    lastScrollLeft: 0,
+
+    // 滚动条
+    // resizeObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
+
     scrollYStore: {
       startIndex: 0,
       endIndex: 0,
@@ -125,7 +138,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
     dragConfig: Object as PropType<VxeListPropTypes.DragConfig>,
     menuConfig: Object as PropType<VxeListPropTypes.MenuConfig>,
     virtualYConfig: Object as PropType<VxeListPropTypes.VirtualYConfig>,
-    scrollY: Object as PropType<VxeListPropTypes.ScrollY>
+    scrollY: Object as PropType<VxeListPropTypes.ScrollY>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeListPropTypes.UseScrollbar>,
+      default: () => getConfig().list.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeListPropTypes.ScrollbarConfig>
   },
   data () {
     const xID = XEUtils.uniqueId()
@@ -208,11 +226,19 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const $xeList = this
 
       const rowHeight = $xeList.computeRowHeight
-      const style: VxeComponentStyleType = {}
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      const stys: VxeComponentStyleType = {}
       if (rowHeight) {
-        style['--vxe-ui-list-row-height'] = toCssUnit(rowHeight)
+        stys['--vxe-ui-list-row-height'] = toCssUnit(rowHeight)
       }
-      return style
+      if (scrollbarYOpts.width) {
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(scrollbarYOpts.width)
+      }
+      if (scrollbarXOpts.height) {
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(scrollbarXOpts.height)
+      }
+      return stys
     },
     computeVirtualStyles () {
       const $xeList = this
@@ -229,8 +255,62 @@ export default /* define-vxe-component start */ defineVxeComponent({
         style.maxHeight = toCssUnit(Math.max(20, customMaxHeight - headHeight - footHeight))
       }
       return style
-    }
+    },
+    computeScrollbarOpts  () {
+      const $xeList = this
+      const props = $xeList
 
+      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig)
+    },
+    computeScrollbarXOpts  () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig)
+    },
+    computeScrollbarYOpts  () {
+      const $xeList = this
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
+    },
+    computeScrollbarWrapperClss () {
+      const $xeList = this
+      const reactData = $xeList.reactData
+
+      const scrollbarOpts = $xeList.computeScrollbarOpts as VxeListPropTypes.ScrollbarConfig
+      const { padding } = scrollbarOpts
+      const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      const scrollbarXToTop = $xeList.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeList.computeScrollbarYToLeft
+      return domUtils.buildClass([
+        'vxe-scrollbar is--virtual',
+        `ov-x--${scrollbarXOpts.visible || 'visible'}`,
+        `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+        `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+        `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+      ], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollbarXOpts.autoHide,
+        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      })
+    },
+    computeScrollbarXToTop () {
+      const $xeList = this
+
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts as VxeScrollbarPropTypes.XConfig
+      return scrollbarXOpts.position === 'top'
+    },
+    computeScrollbarYToLeft () {
+      const $xeList = this
+
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts as VxeScrollbarPropTypes.YConfig
+      return scrollbarYOpts.position === 'left'
+    }
   },
   methods: {
     //
@@ -573,6 +653,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
         }
       })
     },
+    updateScrollbar () {
+      const $xeList = this
+
+      $xeList.updateThumbSize()
+      $xeList.updateThumbOffset()
+    },
     /**
      * 重新计算列表
      */
@@ -582,13 +668,18 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const el = $xeList.$refs.refElem as HTMLDivElement
       if (el) {
-        const parentEl = el.parentElement
+        let parentEl = el.parentElement
         let parentHeight = 0
+        // 如果是虚拟滚动条
+        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+          parentEl = parentEl.parentElement
+        }
         if (parentEl) {
           const parentStyle = getComputedStyle(parentEl)
           parentHeight = parentEl.clientHeight - Math.ceil(XEUtils.toNumber(parentStyle.paddingLeft) + XEUtils.toNumber(parentStyle.paddingRight))
         }
         reactData.parentHeight = parentHeight
+        $xeList.updateScrollbar()
         $xeList.updateHeight()
         if (el.clientWidth && el.clientHeight) {
           return $xeList.computeScrollLoad()
@@ -625,6 +716,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const scrollLeft = scrollBodyElem.scrollLeft
       const isX = scrollLeft !== internalData.lastScrollLeft
       const isY = scrollTop !== internalData.lastScrollTop
+      $xeList.updateThumbOffset()
       internalData.lastScrollTop = scrollTop
       internalData.lastScrollLeft = scrollLeft
       if (reactData.scrollYLoad) {
@@ -1947,6 +2039,200 @@ export default /* define-vxe-component start */ defineVxeComponent({
       }
       $xeList.dispatchEvent('row-menu', { row }, evnt)
     },
+    // 滚动条
+    updateThumbSize () {
+      const $xeList = this
+      const reactData = $xeList.reactData
+
+      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
+      if (!viewEl) {
+        return
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
+      const trackXEl = $xeList.$refs.refTrackXElem as HTMLDivElement
+      const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
+      const thumbXElem = $xeList.$refs.refThumbXElem as HTMLDivElement
+      if (thumbXElem) {
+        thumbXElem.style.width = xThumbWidth + 'px'
+      }
+      reactData.xThumbWidth = xThumbWidth
+
+      const trackYEl = $xeList.$refs.refTrackYElem as HTMLDivElement
+
+      const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
+      const thumbYElem = $xeList.$refs.refThumbYElem as HTMLDivElement
+      if (thumbYElem) {
+        thumbYElem.style.height = yThumbHeight + 'px'
+      }
+      reactData.yThumbHeight = yThumbHeight
+    },
+    updateThumbOffset () {
+      const $xeList = this
+      const reactData = $xeList.reactData
+      const internalData = $xeList.internalData
+
+      const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
+      if (!viewEl) {
+        return
+      }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
+      const { xThumbWidth, yThumbHeight } = reactData
+      const trackXEl = $xeList.$refs.refTrackXElem as HTMLDivElement
+      const thumbXElem = $xeList.$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 = $xeList.$refs.refTrackYElem as HTMLDivElement
+      const thumbYElem = $xeList.$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 $xeList = this
+      const reactData = $xeList.reactData
+
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      if (trackEl !== evnt.target) {
+        return
+      }
+      const viewEl = $xeList.$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 $xeList = this
+      const reactData = $xeList.reactData
+
+      const trackEl = evnt.currentTarget as HTMLDivElement
+      if (trackEl !== evnt.target) {
+        return
+      }
+      const viewEl = $xeList.$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 $xeList = this
+      const reactData = $xeList.reactData
+      const internalData = $xeList.internalData
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = $xeList.$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 $xeList = this
+      const reactData = $xeList.reactData
+      const internalData = $xeList.internalData
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return
+      }
+      const { isThumbDrag, thumbDragOffset } = internalData
+      if (isThumbDrag) {
+        const viewEl = $xeList.$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 $xeList = this
+      const internalData = $xeList.internalData
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      thumbEl.releasePointerCapture(evnt.pointerId)
+      internalData.isThumbDrag = false
+    },
+    pointerdownThumbYEvent (evnt: PointerEvent) {
+      const $xeList = this
+      const reactData = $xeList.reactData
+      const internalData = $xeList.internalData
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      internalData.isThumbDrag = true
+      thumbEl.setPointerCapture(evnt.pointerId)
+
+      const viewEl = $xeList.$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 $xeList = this
+      const reactData = $xeList.reactData
+      const internalData = $xeList.internalData
+
+      const thumbEl = evnt.currentTarget as HTMLDivElement
+      if (!thumbEl.hasPointerCapture(evnt.pointerId)) {
+        return
+      }
+      const { isThumbDrag, thumbDragOffset } = internalData
+      if (isThumbDrag) {
+        const viewEl = $xeList.$refs.refVirtualWrapper as HTMLDivElement
+        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)
+      }
+    },
 
     //
     // Render
@@ -2211,7 +2497,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const reactData = $xeList.reactData
       const slots = $xeList.$scopedSlots
 
-      const { showCheckbox, className, loading } = props
+      const { showCheckbox, className, loading, useScrollbar } = props
       const { bodyHeight, topSpaceHeight, rowList, isAllChecked, isAllIndeterminate } = reactData
       const defaultSlot = slots.default
       const headerSlot = slots.header
@@ -2225,6 +2511,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { trigger, isCrossListDrag } = dragOpts
       const rowOpts = $xeList.computeRowOpts
       const { isHover, padding } = rowOpts
+      const isDrag = $xeList.computeIsDrag
+      const scrollbarXOpts = $xeList.computeScrollbarXOpts
+      const scrollbarYOpts = $xeList.computeScrollbarYOpts
+      const scrollbarWrapperClss = $xeList.computeScrollbarWrapperClss
       const showDefChekboxHead = showCheckbox && checkboxOpts.showHeader !== false
 
       const leOns: {
@@ -2237,6 +2527,10 @@ export default /* define-vxe-component start */ defineVxeComponent({
         ref: 'refElem',
         class: ['vxe-list', className ? (XEUtils.isFunction(className) ? className({ $list: $xeList }) : className) : '', {
           [`size--${vSize}`]: vSize,
+          'is--virtual-scrollbar': useScrollbar,
+          'ov-x--auto-hide': useScrollbar && scrollbarXOpts.autoHide,
+          'ov-y--auto-hide': useScrollbar && scrollbarYOpts.autoHide,
+          'is--drag': isDrag,
           'is--loading': loading
         }],
         on: leOns,
@@ -2299,7 +2593,17 @@ export default /* define-vxe-component start */ defineVxeComponent({
             style: {
               marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
             }
-          }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
+          }, useScrollbar
+            ? (
+                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i))
+              )
+            : [
+                h('div', {
+                  key: 'vi',
+                  ref: 'refViewInnerElem',
+                  class: 'vxe-scrollbar--view-inner'
+                }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => $xeList.renderRow(h, row, i)))
+              ])
         ]),
         footerSlot
           ? h('div', {
@@ -2307,6 +2611,57 @@ export default /* define-vxe-component start */ defineVxeComponent({
             class: 'vxe-list--footer-wrapper'
           }, footerSlot({ items: rowList, $list: $xeList }))
           : renderEmptyElement($xeList),
+        /**
+         * 滚动条
+         */
+        useScrollbar
+          ? h('div', {
+            class: scrollbarWrapperClss
+          }, [
+            scrollbarXOpts.visible === 'hidden'
+              ? renderEmptyElement($xeList)
+              : h('div', {
+                ref: 'refTrackXElem',
+                class: 'vxe-scrollbar--track-x',
+                on: {
+                  click: $xeList.clickTrackXEvent
+                }
+              }, [
+                h('div', {
+                  ref: 'refThumbXElem',
+                  class: 'vxe-scrollbar--thumb-x',
+                  on: {
+                    pointerdown: $xeList.pointerdownThumbXEvent,
+                    pointermove: $xeList.pointermoveThumbXEvent,
+                    pointerup: $xeList.cleatPointerThumbEvent,
+                    pointercancel: $xeList.cleatPointerThumbEvent,
+                    lostpointercapture: $xeList.cleatPointerThumbEvent
+                  }
+                })
+              ]),
+            scrollbarYOpts.visible === 'hidden'
+              ? renderEmptyElement($xeList)
+              : h('div', {
+                ref: 'refTrackYElem',
+                class: 'vxe-scrollbar--track-y',
+                on: {
+                  click: $xeList.clickTrackYEvent
+                }
+              }, [
+                h('div', {
+                  ref: 'refThumbYElem',
+                  class: 'vxe-scrollbar--thumb-y',
+                  on: {
+                    pointerdown: $xeList.pointerdownThumbYEvent,
+                    pointermove: $xeList.pointermoveThumbYEvent,
+                    pointerup: $xeList.cleatPointerThumbEvent,
+                    pointercancel: $xeList.cleatPointerThumbEvent,
+                    lostpointercapture: $xeList.cleatPointerThumbEvent
+                  }
+                })
+              ])
+          ])
+          : renderEmptyElement($xeList),
         /**
          * 拖拽提示
          */
@@ -2382,7 +2737,7 @@ export default /* define-vxe-component start */ defineVxeComponent({
     const props = $xeList
     const internalData = $xeList.internalData
 
-    const { showSeq, showRadio, showCheckbox } = props
+    const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props
     const rowOpts = $xeList.computeRowOpts
     const { useKey, keyField } = rowOpts
     const isDrag = $xeList.computeIsDrag
@@ -2403,22 +2758,34 @@ export default /* define-vxe-component start */ defineVxeComponent({
     if (useKey && !keyField) {
       errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
     }
-    if (props.autoResize) {
+    if (useScrollbar || autoResize) {
       const el = $xeList.$refs.refElem as HTMLDivElement
-      const resizeObserver = globalResize.create(() => $xeList.recalculate())
+      const viewInnerEl = $xeList.$refs.refViewInnerElem as HTMLDivElement
+      const resizeObserver = globalResize.create(() => {
+        $xeList.reFlag++
+      })
       resizeObserver.observe(el)
-      if (el) {
-        resizeObserver.observe(el.parentElement as HTMLDivElement)
+      if (autoResize) {
+        if (el) {
+          resizeObserver.observe(el.parentElement as HTMLDivElement)
+        }
+      }
+      if (viewInnerEl) {
+        resizeObserver.observe(viewInnerEl)
       }
       internalData.resizeObserver = resizeObserver
     }
-    $xeList.recalculate()
-    globalEvents.on($xeList, 'resize', $xeList.recalculate)
+    $xeList.reFlag++
+    globalEvents.on($xeList, 'resize', () => {
+      $xeList.reFlag++
+    })
   },
   activated () {
     const $xeList = this
 
-    $xeList.recalculate().then(() => $xeList.refreshScroll())
+    $xeList.recalculate().then(() => {
+      $xeList.refreshScroll()
+    })
   },
   beforeDestroy () {
     const $xeList = this

package/packages/scrollbar/src/scrollbar.ts

@@ -279,6 +279,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       if (!viewEl) {
         return
       }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
       const trackXEl = $xeScrollbar.$refs.refTrackXElem as HTMLDivElement
       const xThumbWidth = trackXEl ? getThumbSize(viewEl.clientWidth, viewEl.scrollWidth, trackXEl.clientWidth) : 0
       const thumbXElem = $xeScrollbar.$refs.refThumbXElem as HTMLDivElement
@@ -303,6 +306,9 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const viewEl = $xeScrollbar.$refs.refViewElem as HTMLDivElement
       if (!viewEl) {
         return
+        if (!viewEl.clientHeight || !viewEl.clientHeight) {
+          return
+        }
       }
       const { xThumbWidth, yThumbHeight } = reactData
       const trackXEl = $xeScrollbar.$refs.refTrackXElem as HTMLDivElement

package/packages/tabs/src/tabs.ts

@@ -7,6 +7,7 @@ import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
 import { isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeTabsPropTypes, VxeTabPaneProps, VxeTabsEmits, TabsInternalData, TabsReactData, VxeComponentSizeType, VxeTabsConstructor, VxeTabsPrivateMethods, VxeTabPaneDefines, ValueOf, VxeComponentStyleType } from '../../../types'
 
@@ -55,6 +56,11 @@ export default /* define-vxe-component start */ defineVxeComponent({
       type: String as PropType<VxeTabsPropTypes.Size>,
       default: () => getConfig().tabs.size || getConfig().size
     },
+    useScrollbar: {
+      type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
+      default: () => getConfig().tabs.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃
     beforeCloseMethod: Function as PropType<VxeTabsPropTypes.BeforeCloseMethod>
   },
@@ -181,6 +187,12 @@ export default /* define-vxe-component start */ defineVxeComponent({
 
       const staticTabs = reactData.staticTabs as VxeTabPaneDefines.TabConfig[]
       return staticTabs.filter((item) => $xeTabs.handleFilterTab(item))
+    },
+    computeScrollbarOpts () {
+      const $xeTabs = this
+      const props = $xeTabs
+
+      return Object.assign({}, getConfig().tabs.scrollbarConfig, props.scrollbarConfig)
     }
   },
   methods: {
@@ -821,19 +833,39 @@ export default /* define-vxe-component start */ defineVxeComponent({
     },
     renderTabPane (h: CreateElement, item: VxeTabPaneProps | VxeTabPaneDefines.TabConfig) {
       const $xeTabs = this
+      const props = $xeTabs
       const reactData = $xeTabs.reactData
 
+      const { useScrollbar } = props
       const { initNames, activeName } = reactData
       const { name, slots } = item
       const defaultSlot = slots ? slots.default : null
-      return name && initNames.includes(name)
-        ? h('div', {
-          key: `${name}`,
-          class: ['vxe-tabs-pane--item', {
-            'is--visible': activeName === name
-          }]
-        }, defaultSlot ? $xeTabs.callSlot(defaultSlot, { name }, h) : [])
-        : renderEmptyElement($xeTabs)
+      const scrollbarOpts = $xeTabs.computeScrollbarOpts
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      if (name && initNames.includes(name)) {
+        return useScrollbar
+          ? h(VxeScrollbarComponent, {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--scrollbar-item', {
+              'is--visible': activeName === name
+            }],
+            props: {
+              ...scrollbarOpts,
+              viewClassName: 'vxe-tabs-pane--scrollbar-item-view' + (viewClassName ? (' ' + viewClassName) : ''),
+              viewInnerClassName: 'vxe-tabs-pane--scrollbar-item-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            },
+            scopedSlots: {
+              default: () => defaultSlot ? $xeTabs.callSlot(defaultSlot, { name }, h) : []
+            }
+          })
+          : h('div', {
+            key: `${name}`,
+            class: ['vxe-tabs-pane--item', {
+              'is--visible': activeName === name
+            }]
+          }, defaultSlot ? $xeTabs.callSlot(defaultSlot, { name }, h) : [])
+      }
+      return renderEmptyElement($xeTabs)
     },
     renderTabContent  (h: CreateElement, tabList: VxeTabsPropTypes.Options | VxeTabPaneDefines.TabConfig[]) {
       const $xeTabs = this

package/packages/tree/src/tree.ts

@@ -6,7 +6,7 @@ import { calcTreeLine, getItemCacheObj } from './util'
 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 } from '../../ui/src/dom'
+import { toCssUnit, isScale, getPaddingTopBottomSize, addClass, removeClass, getTpImg, hasControlKey, getEventTargetNode, hasClass } from '../../ui/src/dom'
 import { isEnableConf, enModelValue, deModelValue, getText } from '../../ui/src/utils'
 import { moveRowAnimateToTb, clearRowAnimate } from '../../ui/src/anime'
 import VxeLoadingComponent from '../../loading'
@@ -1574,11 +1574,15 @@ export default /* define-vxe-component start */ defineVxeComponent({
       const { rowHeight } = scrollYStore
       const el = $xeTree.$refs.refElem as HTMLDivElement
       if (el && el.clientWidth && el.clientHeight) {
-        const parentEl = $xeTree.getParentElem()
+        let parentEl = $xeTree.getParentElem()
         const headerWrapperEl = $xeTree.$refs.refHeaderWrapperElem as HTMLDivElement
         const footerWrapperEl = $xeTree.$refs.refFooterWrapperElem as HTMLDivElement
         const headHeight = headerWrapperEl ? headerWrapperEl.clientHeight : 0
         const footHeight = footerWrapperEl ? footerWrapperEl.clientHeight : 0
+        // 如果是虚拟滚动条
+        if (parentEl && 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)