vxe-pc-ui 4.19.7 → 4.20.0

package/packages/card/src/card.ts

@@ -1,10 +1,11 @@
 import { ref, h, reactive, PropType, computed } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
+import XEUtils from 'xe-utils'
 import { getSlotVNs } from '../../ui/src/vn'
 import { getConfig, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { toCssUnit } from '../../ui/src/dom'
 import VxeLoadingComponent from '../../loading'
-import XEUtils from 'xe-utils'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { CardReactData, VxeCardEmits, VxeCardPropTypes, CardPrivateRef, ValueOf, CardMethods, CardPrivateMethods, VxeCardPrivateComputed, VxeCardConstructor, VxeCardPrivateMethods } from '../../../types'
 
@@ -34,7 +35,12 @@ export default defineVxeComponent({
     size: {
       type: String as PropType<VxeCardPropTypes.Size>,
       default: () => getConfig().card.size || getConfig().size
-    }
+    },
+    useScrollbar: {
+      type: Boolean as PropType<VxeCardPropTypes.UseScrollbar>,
+      default: () => getConfig().card.useScrollbar
+    },
+    scrollbarConfig: Object as PropType<VxeCardPropTypes.ScrollbarConfig>
   },
   emits: [
   ] as VxeCardEmits,
@@ -66,6 +72,10 @@ export default defineVxeComponent({
       return stys
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().card.scrollbarConfig, props.scrollbarConfig)
+    })
+
     const computeMaps: VxeCardPrivateComputed = {
       computeSize
     }
@@ -94,7 +104,7 @@ export default defineVxeComponent({
     Object.assign($xeCard, cardMethods, cardPrivateMethods)
 
     const renderVN = () => {
-      const { title, border, shadow, padding, loading, showTitleOverflow } = props
+      const { title, border, shadow, padding, loading, showTitleOverflow, useScrollbar } = props
       const defaultSlot = slots.default
       const headerSlot = slots.header
       const titleSlot = slots.title
@@ -104,6 +114,8 @@ export default defineVxeComponent({
       const rightSlot = slots.right
       const vSize = computeSize.value
       const cardStyle = computeCardStyle.value
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
 
       return h('div', {
         ref: refElem,
@@ -137,17 +149,48 @@ export default defineVxeComponent({
           class: 'vxe-card--body'
         }, [
           leftSlot
-            ? h('div', {
-              class: 'vxe-card--body-left'
-            }, getSlotVNs(leftSlot({})))
+            ? (
+                useScrollbar
+                  ? h(VxeScrollbarComponent, {
+                    class: 'vxe-card--body-scrollbar-left',
+                    ...scrollbarOpts,
+                    viewClassName: 'vxe-card--body-scrollbar-left-view',
+                    viewInnerClassName: 'vxe-card--body-scrollbar-left-inner'
+                  }, {
+                    default: () => getSlotVNs(leftSlot({}))
+                  })
+                  : h('div', {
+                    class: 'vxe-card--body-left'
+                  }, getSlotVNs(leftSlot({})))
+              )
             : renderEmptyElement($xeCard),
-          h('div', {
-            class: 'vxe-card--body-content'
-          }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              class: 'vxe-card--body-scrollbar-content',
+              ...scrollbarOpts,
+              viewClassName: 'vxe-card--body-scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+              viewInnerClassName: 'vxe-card--body-scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+            }, {
+              default: () => defaultSlot ? getSlotVNs(defaultSlot({})) : []
+            })
+            : h('div', {
+              class: 'vxe-card--body-content'
+            }, defaultSlot ? getSlotVNs(defaultSlot({})) : []),
           rightSlot
-            ? h('div', {
-              class: 'vxe-card--body-right'
-            }, getSlotVNs(rightSlot({})))
+            ? (
+                useScrollbar
+                  ? h(VxeScrollbarComponent, {
+                    class: 'vxe-card--body-scrollbar-right',
+                    ...scrollbarOpts,
+                    viewClassName: 'vxe-card--body-scrollbar-right-view',
+                    viewInnerClassName: 'vxe-card--body-scrollbar-right-inner'
+                  }, {
+                    default: () => getSlotVNs(rightSlot({}))
+                  })
+                  : h('div', {
+                    class: 'vxe-card--body-right'
+                  }, getSlotVNs(rightSlot({})))
+              )
             : renderEmptyElement($xeCard)
         ]),
         footerSlot

package/packages/list/src/list.ts

@@ -1,12 +1,13 @@
 import { h, PropType, ref, Ref, computed, onBeforeUnmount, watch, reactive, nextTick, onActivated, onMounted, VNode } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
-import { VxeUI, getConfig, getIcon, getI18n, menus, globalEvents, globalResize, createEvent, useSize, renderEmptyElement } from '../../ui'
+import { VxeUI, getConfig, getIcon, getI18n, domUtils, menus, globalEvents, globalResize, useSize, createEvent, renderEmptyElement } from '../../ui'
 import { getCrossListDragRowInfo } from './store'
-import { isScale, removeClass, addClass, getTpImg, toCssUnit } from '../../ui/src/dom'
+import { isScale, removeClass, addClass, getTpImg, toCssUnit, hasClass } from '../../ui/src/dom'
 import { isEnableConf, getText, enModelValue, deModelValue } from '../../ui/src/utils'
 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'
 
@@ -42,6 +43,11 @@ function createReactData (): ListReactData {
     updateCheckboxFlag: 1,
     isAllChecked: false,
     isAllIndeterminate: false,
+
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+
     insertRowFlag: 1,
     removeRowFlag: 1,
     dragRow: null,
@@ -52,13 +58,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,
@@ -117,7 +130,12 @@ export default 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>
   },
   emits: [
     'update:checkRowKey',
@@ -158,6 +176,12 @@ export default defineVxeComponent({
     const refVirtualWrapper = ref() as Ref<HTMLDivElement>
     const refVirtualBody = ref() as Ref<HTMLDivElement>
 
+    const refViewInnerElem = ref<HTMLDivElement>()
+    const refTrackXElem = ref<HTMLDivElement>()
+    const refTrackYElem = ref<HTMLDivElement>()
+    const refThumbXElem = ref<HTMLDivElement>()
+    const refThumbYElem = ref<HTMLDivElement>()
+
     const refDragRowLineElem = ref<HTMLDivElement>()
     const refDragTipElem = ref<HTMLDivElement>()
 
@@ -218,11 +242,19 @@ export default defineVxeComponent({
 
     const computeWrapperStyles = computed(() => {
       const rowHeight = computeRowHeight.value
-      const style: VxeComponentStyleType = {}
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      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
     })
 
     const computeVirtualStyles = computed(() => {
@@ -238,6 +270,53 @@ export default defineVxeComponent({
       return style
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().list.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeScrollbarXOpts = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return Object.assign({}, getConfig().scrollbar.xConfig, scrollbarOpts.xConfig)
+    })
+
+    const computeScrollbarYOpts = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      return Object.assign({}, getConfig().scrollbar.yConfig, scrollbarOpts.yConfig)
+    })
+
+    const computeScrollbarWrapperClss = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { padding } = scrollbarOpts
+      const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      const scrollbarXToTop = computeScrollbarXToTop.value
+      const scrollbarYToLeft = computeScrollbarYToLeft.value
+      return domUtils.buildClass([
+        'vxe-scrollbar is--virtual',
+        `ov-x--${scrollbarXOpts.visible || 'visible'}`,
+        `ov-y--${scrollbarYOpts.visible || 'visible'}`,
+        `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+        `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+      ], {
+        'is--padding': padding,
+        'ov-x--auto-hide': scrollbarXOpts.autoHide,
+        'ov-y--auto-hide': scrollbarYOpts.autoHide,
+        '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 dispatchEvent = (type: ValueOf<VxeListEmits>, params: Record<string, any>, evnt: Event | null) => {
       emit(type, createEvent(evnt, { $list: $xeList }, params))
     }
@@ -404,6 +483,7 @@ export default defineVxeComponent({
      */
     const refreshScroll = () => {
       const { lastScrollLeft, lastScrollTop } = internalData
+      updateScrollbar()
       return clearScroll().then(() => {
         if (lastScrollLeft || lastScrollTop) {
           internalData.lastScrollLeft = 0
@@ -413,19 +493,29 @@ export default defineVxeComponent({
       })
     }
 
+    const updateScrollbar = () => {
+      updateThumbSize()
+      updateThumbOffset()
+    }
+
     /**
      * 重新计算列表
      */
     const recalculate = () => {
       const el = refElem.value
       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
+        updateScrollbar()
         updateHeight()
         if (el.clientWidth && el.clientHeight) {
           return computeScrollLoad()
@@ -457,6 +547,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) {
@@ -1811,6 +1902,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($xeList, listMethods, listPrivateMethods)
 
     const renderDragTip = () => {
@@ -2049,7 +2310,7 @@ export default defineVxeComponent({
     }
 
     const renderVN = () => {
-      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
@@ -2065,6 +2326,9 @@ export default defineVxeComponent({
       const rowOpts = computeRowOpts.value
       const { isHover, padding } = rowOpts
       const isDrag = computeIsDrag.value
+      const scrollbarXOpts = computeScrollbarXOpts.value
+      const scrollbarYOpts = computeScrollbarYOpts.value
+      const scrollbarWrapperClss = computeScrollbarWrapperClss.value
       const showDefChekboxHead = showCheckbox && showHeader !== false
 
       const leOns: {
@@ -2077,6 +2341,9 @@ export default 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
         }],
@@ -2139,7 +2406,17 @@ export default defineVxeComponent({
             style: {
               marginTop: topSpaceHeight ? `${topSpaceHeight}px` : ''
             }
-          }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
+          }, useScrollbar
+            ? (
+                defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i))
+              )
+            : [
+                h('div', {
+                  key: 'vi',
+                  ref: refViewInnerElem,
+                  class: 'vxe-scrollbar--view-inner'
+                }, defaultSlot ? defaultSlot({ items: rowList, $list: $xeList }) : rowList.map((row, i) => renderRow(row, i)))
+              ])
         ]),
         footerSlot
           ? h('div', {
@@ -2147,6 +2424,49 @@ export default 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',
+                onClick: clickTrackXEvent
+              }, [
+                h('div', {
+                  ref: refThumbXElem,
+                  class: 'vxe-scrollbar--thumb-x',
+                  onPointerdown: pointerdownThumbXEvent,
+                  onPointermove: pointermoveThumbXEvent,
+                  onPointerup: cleatPointerThumbEvent,
+                  onPointercancel: cleatPointerThumbEvent,
+                  onLostpointercapture: cleatPointerThumbEvent
+                })
+              ]),
+            scrollbarYOpts.visible === 'hidden'
+              ? renderEmptyElement($xeList)
+              : 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($xeList),
         /**
          * 拖拽提示
          */
@@ -2207,7 +2527,9 @@ export default defineVxeComponent({
     })
 
     onActivated(() => {
-      recalculate().then(() => refreshScroll())
+      recalculate().then(() => {
+        refreshScroll()
+      })
     })
 
     nextTick(() => {
@@ -2215,7 +2537,7 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const { showSeq, showRadio, showCheckbox } = props
+      const { showSeq, showRadio, showCheckbox, autoResize, useScrollbar } = props
       const rowOpts = computeRowOpts.value
       const { useKey } = rowOpts
 
@@ -2238,17 +2560,27 @@ export default defineVxeComponent({
       if (useKey && !keyField) {
         errLog('vxe.error.reqSupportProp', ['row-config.useKey', 'row-config.keyField'])
       }
-      if (props.autoResize) {
+      if (useScrollbar || autoResize) {
         const el = refElem.value
-        const resizeObserver = globalResize.create(() => recalculate())
+        const viewInnerEl = refViewInnerElem.value
+        const resizeObserver = globalResize.create(() => {
+          reFlag.value++
+        })
         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
       }
-      recalculate()
-      globalEvents.on($xeList, 'resize', recalculate)
+      reFlag.value++
+      globalEvents.on($xeList, 'resize', () => {
+        reFlag.value++
+      })
     })
 
     onBeforeUnmount(() => {

package/packages/scrollbar/src/scrollbar.ts

@@ -268,6 +268,9 @@ export default defineVxeComponent({
       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
@@ -277,6 +280,7 @@ export default defineVxeComponent({
       reactData.xThumbWidth = xThumbWidth
 
       const trackYEl = refTrackYElem.value
+
       const yThumbHeight = trackYEl ? getThumbSize(viewEl.clientHeight, viewEl.scrollHeight, trackYEl.clientHeight) : 0
       const thumbYElem = refThumbYElem.value
       if (thumbYElem) {
@@ -290,6 +294,9 @@ export default defineVxeComponent({
       if (!viewEl) {
         return
       }
+      if (!viewEl.clientHeight || !viewEl.clientHeight) {
+        return
+      }
       const { xThumbWidth, yThumbHeight } = reactData
       const trackXEl = refTrackXElem.value
       const thumbXElem = refThumbXElem.value
@@ -599,7 +606,9 @@ export default defineVxeComponent({
       reFlag.value++
     })
     watch(reFlag, () => {
-      $xeScrollbar.recalculate()
+      $xeScrollbar.recalculate().then(() => {
+        $xeScrollbar.recalculate()
+      })
     })
 
     onMounted(() => {