vxe-pc-ui 4.20.1 → 4.20.2

package/packages/modal/src/modal.ts

@@ -2,13 +2,14 @@ import { h, Teleport, ref, Ref, inject, computed, reactive, provide, nextTick, w
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { getEventTargetNode, getPopupContainer, getPopupWrapperElement, isScale, toCssUnit } from '../../ui/src/dom'
-import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue } from '../../ui/src/utils'
+import { getLastZIndex, nextZIndex, getSubLastZIndex, nextSubZIndex, getFuncText, handleBooleanDefaultValue, getDefaultConfig } from '../../ui/src/utils'
 import { VxeUI, getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { createComponentLog } from '../../ui/src/log'
 import { allActiveModals } from './store'
 import VxeButtonComponent from '../../button'
 import VxeLoadingComponent from '../../loading'
+import VxeScrollbarComponent from '../../scrollbar'
 
 import type { VxeModalConstructor, VxeModalPropTypes, ModalReactData, ModalInternalData, VxeModalEmits, VxeModalPrivateComputed, ModalEventTypes, VxeButtonInstance, ModalMethods, ModalPrivateRef, VxeModalMethods, ValueOf, VxeDrawerConstructor, VxeDrawerMethods, VxeFormConstructor, VxeFormPrivateMethods } from '../../../types'
 import type { VxeTableConstructor, VxeTablePrivateMethods } from '../../../types/components/table'
@@ -223,6 +224,11 @@ export default defineVxeComponent({
     },
     beforeHideMethod: Function as PropType<VxeModalPropTypes.BeforeHideMethod>,
     slots: Object as PropType<VxeModalPropTypes.Slots>,
+    useScrollbar: {
+      type: Boolean as PropType<VxeModalPropTypes.UseScrollbar>,
+      default: () => getDefaultConfig(getConfig().modal.useScrollbar, getConfig().useScrollbar)
+    },
+    scrollbarConfig: Object as PropType<VxeModalPropTypes.ScrollbarConfig>,
 
     /**
      * 已废弃
@@ -310,6 +316,27 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().modal.zoomConfig, props.zoomConfig)
     })
 
+    const computeScrollbarOpts = computed(() => {
+      return Object.assign({}, getConfig().modal.scrollbarConfig, props.scrollbarConfig)
+    })
+
+    const computeScrollbarProps = computed(() => {
+      const scrollbarOpts = computeScrollbarOpts.value
+      const { viewClassName, viewInnerClassName } = scrollbarOpts
+      return {
+        width: scrollbarOpts.width,
+        height: scrollbarOpts.height,
+        autoHide: scrollbarOpts.autoHide,
+        visible: scrollbarOpts.visible,
+        xConfig: scrollbarOpts.xConfig,
+        yConfig: scrollbarOpts.yConfig,
+        className: scrollbarOpts.className,
+        viewAttrs: scrollbarOpts.viewAttrs,
+        viewClassName: 'vxe-modal--scrollbar-content-view' + (viewClassName ? (' ' + viewClassName) : ''),
+        viewInnerClassName: 'vxe-modal--scrollbar-content-inner' + (viewClassName ? (' ' + viewInnerClassName) : '')
+      }
+    })
+
     const computeMaps: VxeModalPrivateComputed = {
       computeSize,
       computeZoomOpts
@@ -1371,9 +1398,10 @@ export default defineVxeComponent({
     }
 
     const renderBody = () => {
-      const { slots: propSlots = {}, status, message, iconStatus, useHtml } = props
+      const { slots: propSlots = {}, status, message, iconStatus, useScrollbar, useHtml } = props
       const content = props.content || message
       const isMsg = computeIsMsg.value
+      const scrollbarProps = computeScrollbarProps.value
       const defaultSlot = slots.default || propSlots.default
       const leftSlot = slots.left || propSlots.left
       const rightSlot = slots.right || propSlots.right
@@ -1389,18 +1417,47 @@ export default defineVxeComponent({
           ])
         )
       }
-      contVNs.push(
-        useHtml && !defaultSlot
-          ? h('div', {
-            key: 'hc',
-            class: 'vxe-modal--content',
-            innerHTML: getFuncText(content)
-          })
-          : h('div', {
-            key: 'dc',
-            class: 'vxe-modal--content'
-          }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content))
-      )
+
+      if (useHtml && !defaultSlot) {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'shc',
+              class: 'vxe-modal--scrollbar-content',
+              ...scrollbarProps
+            }, {
+              default () {
+                return [
+                  h('div', {
+                    class: 'vxe-modal--scrollbar-content-html',
+                    innerHTML: getFuncText(content)
+                  })
+                ]
+              }
+            })
+            : h('div', {
+              key: 'hc',
+              class: 'vxe-modal--content',
+              innerHTML: getFuncText(content)
+            })
+        )
+      } else {
+        contVNs.push(
+          useScrollbar
+            ? h(VxeScrollbarComponent, {
+              key: 'sdc',
+              class: 'vxe-modal--scrollbar-content',
+              ...scrollbarProps
+            }, {
+              default: () => defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content)
+            })
+            : h('div', {
+              key: 'dc',
+              class: 'vxe-modal--content'
+            }, defaultSlot ? getSlotVNs(defaultSlot({ $modal: $xeModal })) : getFuncText(content))
+        )
+      }
+
       return h('div', {
         class: 'vxe-modal--body'
       }, [

package/packages/scrollbar/src/scrollbar.ts

@@ -105,10 +105,8 @@ export default defineVxeComponent({
 
     const computeWrapperStyle = computed(() => {
       const { width, height, minWidth, minHeight, maxWidth, maxHeight } = props
-      const xOpts = computeXOpts.value
-      const yOpts = computeYOpts.value
-      const barWidth = yOpts.width
-      const barHeight = xOpts.height
+      const barWidth = computeYWidth.value
+      const barHeight = computeXHeight.value
       const stys: VxeComponentStyleType = {}
       if (width) {
         stys.width = toCssUnit(width)
@@ -135,6 +133,16 @@ export default defineVxeComponent({
       return stys
     })
 
+    const computeXHeight = computed(() => {
+      const xOpts = computeXOpts.value
+      return xOpts.height
+    })
+
+    const computeYWidth = computed(() => {
+      const yOpts = computeYOpts.value
+      return yOpts.width
+    })
+
     const computeXVisible = computed(() => {
       const { visible } = props
       const xOpts = computeXOpts.value
@@ -642,6 +650,12 @@ export default defineVxeComponent({
     watch(() => props.syncResize, () => {
       reFlag.value++
     })
+    watch(computeYWidth, () => {
+      reFlag.value++
+    })
+    watch(computeXHeight, () => {
+      reFlag.value++
+    })
     watch(computeXVisible, () => {
       nextTick(() => {
         reFlag.value++

package/packages/tabs/src/tabs.ts

@@ -3,7 +3,7 @@ import { defineVxeComponent } from '../../ui/src/comp'
 import { createEvent, getConfig, getIcon, globalEvents, permission, useSize, renderEmptyElement } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { toCssUnit, addClass, removeClass } from '../../ui/src/dom'
-import { isEnableConf } from '../../ui/src/utils'
+import { getDefaultConfig, isEnableConf } from '../../ui/src/utils'
 import { createComponentLog } from '../../ui/src/log'
 import XEUtils from 'xe-utils'
 import VxeLoadingComponent from '../../loading'
@@ -55,7 +55,7 @@ export default defineVxeComponent({
     },
     useScrollbar: {
       type: Boolean as PropType<VxeTabsPropTypes.UseScrollbar>,
-      default: () => getConfig().tabs.useScrollbar
+      default: () => getDefaultConfig(getConfig().tabs.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTabsPropTypes.ScrollbarConfig>,
     // 已废弃

package/packages/tree/src/tree.ts

@@ -70,8 +70,10 @@ function createInternalData (): TreeInternalData {
     treeExpandedMaps: {},
     treeExpandLazyLoadedMaps: {},
 
-    // 滚动条
     // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
     // isThumbDrag: false,
     thumbDragOffset: 0,
     yThumbTop: 0,
@@ -236,7 +238,7 @@ export default defineVxeComponent({
     virtualYConfig: Object as PropType<VxeTreePropTypes.VirtualYConfig>,
     useScrollbar: {
       type: Boolean as PropType<VxeTreePropTypes.UseScrollbar>,
-      default: () => getConfig().tree.useScrollbar
+      default: () => getDefaultConfig(getConfig().tree.useScrollbar, getConfig().useScrollbar)
     },
     scrollbarConfig: Object as PropType<VxeTreePropTypes.ScrollbarConfig>
   },
@@ -373,11 +375,8 @@ export default defineVxeComponent({
     })
 
     const computeWrapperStyles = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value
-      const scrollbarXOpts = computeScrollbarXOpts.value
-      const scrollbarYOpts = computeScrollbarYOpts.value
-      const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), getConfig().scrollbar.width)
-      const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), getConfig().scrollbar.height)
+      const barWidth = computeScrollYWidth.value
+      const barHeight = computeScrollXHeight.value
       const stys: VxeComponentStyleType = {}
       if (barWidth || barHeight) {
         stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
@@ -436,6 +435,18 @@ export default defineVxeComponent({
       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
@@ -461,15 +472,11 @@ export default defineVxeComponent({
     })
 
     const computeScrollbarWrapperClss = computed(() => {
-      const scrollbarOpts = computeScrollbarOpts.value
-      const { padding } = scrollbarOpts
       const { yThumbHeight, xThumbWidth } = reactData
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
       const scrollXVisible = computeScrollXVisible.value
       const scrollYVisible = computeScrollYVisible.value
-      const scrollXAutoHide = computeScrollXAutoHide.value
-      const scrollYAutoHide = computeScrollYAutoHide.value
       return domUtils.buildClass([
         'vxe-scrollbar is--virtual',
         `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
@@ -477,9 +484,6 @@ export default defineVxeComponent({
         `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
         `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
       ], {
-        'is--padding': padding,
-        'ov-x--auto-hide': scrollXAutoHide,
-        'ov-y--auto-hide': scrollYAutoHide,
         'overflow-y': yThumbHeight,
         'overflow-x': xThumbWidth
       })
@@ -3855,6 +3859,12 @@ export default defineVxeComponent({
     watch(() => props.useScrollbar, () => {
       reFlag.value++
     })
+    watch(computeScrollYWidth, () => {
+      reFlag.value++
+    })
+    watch(computeScrollXHeight, () => {
+      reFlag.value++
+    })
     watch(computeScrollXVisible, () => {
       nextTick(() => {
         reFlag.value++
@@ -3893,23 +3903,32 @@ export default defineVxeComponent({
       if (menuConfig && !VxeUIContextMenu) {
         errLog('vxe.error.reqComp', ['vxe-context-menu'])
       }
+      const el = refElem.value
       if (useScrollbar || autoResize) {
-        const el = refElem.value
         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(() => {
-          reFlag.value++
+          if (props.autoResize) {
+            reFlag.value++
+          }
         })
         if (el) {
           resizeObserver.observe(el)
-          if (autoResize) {
-            if (parentEl) {
-              resizeObserver.observe(parentEl)
-            }
-          }
         }
-        if (viewInnerEl) {
-          resizeObserver.observe(viewInnerEl)
+        if (parentEl) {
+          resizeObserver.observe(parentEl)
         }
         internalData.resizeObserver = resizeObserver
       }
@@ -3921,10 +3940,13 @@ export default defineVxeComponent({
     })
 
     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/styles/components/drawer.scss

@@ -181,8 +181,8 @@
   &.is--drag {
     cursor: move;
     transition: none;
-   .vxe-modal--body,
-   .vxe-modal--footer {
+   .vxe-drawer--body,
+   .vxe-drawer--footer {
       &:after {
         content: "";
         position: absolute;
@@ -192,9 +192,10 @@
         height: 100%;
       }
     }
-    .vxe-modal--body {
+    .vxe-drawer--body {
       overflow: hidden;
-      .vxe-modal--content {
+      .vxe-drawer--content,
+      .vxe-drawer--scrollbar-content {
         overflow: hidden;
       }
     }
@@ -213,7 +214,8 @@
   overflow: auto;
   outline: 0;
 }
-.vxe-drawer--content {
+.vxe-drawer--content,
+.vxe-drawer--scrollbar-content  {
   flex-grow: 1;
   white-space: pre-line;
 }
@@ -227,7 +229,8 @@
   flex-grow: 1;
   overflow: auto;
   outline: 0;
-  .vxe-drawer--content {
+  .vxe-drawer--content,
+  .vxe-drawer--scrollbar-content  {
     overflow: auto;
   }
 }
@@ -349,3 +352,7 @@
     overflow: hidden;
   }
 }
+
+.vxe-drawer--scrollbar-content {
+  width: 100%;
+}

package/styles/components/modal.scss

@@ -52,7 +52,8 @@ html[data-vxe-lock-scroll] {
     }
     .vxe-modal--body {
       overflow: hidden;
-      .vxe-modal--content {
+      .vxe-modal--content,
+      .vxe-modal--scrollbar-content {
         overflow: hidden;
       }
     }
@@ -74,7 +75,8 @@ html[data-vxe-lock-scroll] {
   align-items: center;
   font-size: 1.6em;
 }
-.vxe-modal--content {
+.vxe-modal--content,
+.vxe-modal--scrollbar-content {
   flex-grow: 1;
   white-space: pre-line;
 }
@@ -447,7 +449,8 @@ html[data-vxe-lock-scroll] {
           visibility: hidden;
         }
       }
-      .vxe-modal--content {
+      .vxe-modal--content,
+      .vxe-modal--scrollbar-content {
         max-width: 800px;
         float: left;
       }
@@ -478,7 +481,8 @@ html[data-vxe-lock-scroll] {
     }
     .vxe-modal--body {
       overflow: auto;
-      .vxe-modal--content {
+      .vxe-modal--content,
+      .vxe-modal--scrollbar-content {
         overflow: auto;
       }
     }
@@ -538,3 +542,7 @@ html[data-vxe-lock-scroll] {
     overflow: hidden;
   }
 }
+
+.vxe-modal--scrollbar-content {
+  width: 100%;
+}

package/types/components/drawer.d.ts

@@ -1,5 +1,6 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -73,6 +74,17 @@ export namespace VxeDrawerPropTypes {
   export type Padding = boolean
   export type BeforeHideMethod = (params: VxeDrawerDefines.DrawerVisibleParams) => Promise<any>
   export type Slots = VxeDrawerSlots
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeDrawerProps {
@@ -125,6 +137,14 @@ export interface VxeDrawerProps {
   padding?: VxeDrawerPropTypes.Padding
   beforeHideMethod?: VxeDrawerPropTypes.BeforeHideMethod
   slots?: VxeDrawerPropTypes.Slots
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeDrawerPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeDrawerPropTypes.ScrollbarConfig
 }
 
 export interface DrawerPrivateComputed {

package/types/components/gantt-module/gantt-view.d.ts

@@ -2,6 +2,7 @@ import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
 import { VxeComponentBaseOptions, DefineVxeComponentInstance } from '@vxe-ui/core'
 import { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../table'
 import { VxeGanttDefines } from '../gantt'
+import { VxeScrollbarPropTypes } from '../scrollbar'
 
 /* eslint-disable no-use-before-define */
 
@@ -37,6 +38,10 @@ export interface GanttViewReactData {
   lastScrollTime: number
   lazScrollLoading: boolean
 
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   scrollVMLoading: boolean
   scrollYHeight: number
   scrollYTop: number
@@ -75,7 +80,13 @@ export interface GanttViewInternalData {
     startIndex: number
     endIndex: number
   }
-  // 最后滚动位置
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollLeft: number
   lastScrollTop: number
 
@@ -111,6 +122,14 @@ export interface GanttViewPrivateRef {
 }
 
 export interface GanttViewPrivateComputed {
+  computeScrollXHeight: ComputedRef<number | undefined>
+  computeScrollYWidth: ComputedRef<number | undefined>
+  computeScrollXVisible: ComputedRef<'auto' | 'visible' | 'hidden' | boolean | undefined>
+  computeScrollYVisible: ComputedRef<'auto' | 'visible' | 'hidden' | boolean | undefined>
+  computeScrollXAutoHide: ComputedRef<VxeScrollbarPropTypes.AutoHide | undefined>
+  computeScrollYAutoHide: ComputedRef<VxeScrollbarPropTypes.AutoHide | undefined>
+  computeScrollbarXToTop: ComputedRef<boolean>
+  computeScrollbarYToLeft: ComputedRef<boolean>
   computeScaleDateList: ComputedRef<Date[]>
   computeNowLineLeft: ComputedRef<number>
 }
@@ -164,6 +183,10 @@ export interface VxeGanttViewPrivateMethods {
    * @private
    */
   handleUpdateSYStatus(scrollYLoad: boolean): void
+  /**
+   * @private
+   */
+  updateScrollbar(): void
 }
 
 export interface VxeGanttViewMethods {

package/types/components/gantt.d.ts

@@ -731,6 +731,8 @@ export interface GanttPrivateComputed<D = any> extends GridPrivateComputed<D> {
   computeTypeField: ComputedRef<string>
   computeProgressField: ComputedRef<string>
   computeScrollbarOpts: ComputedRef<VxeTablePropTypes.ScrollbarConfig>
+  computeScrollbarXOpts: ComputedRef<VxeTablePropTypes.ScrollbarXConfig>
+  computeScrollbarYOpts: ComputedRef<VxeTablePropTypes.ScrollbarYConfig>
   computeScrollbarXToTop: ComputedRef<boolean>
   computeScrollbarYToLeft: ComputedRef<boolean>
 }

package/types/components/list.d.ts

@@ -314,8 +314,10 @@ export interface ListInternalData {
   fullKeyMaps: Record<string, any>
   rowMaps: Record<string, VxeListDefines.RowCacheItem>
 
-  // 滚动条
   resizeObserver?: ResizeObserver
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
   isThumbDrag?: boolean
   thumbDragOffset: number
   yThumbTop: number

package/types/components/modal.d.ts

@@ -1,5 +1,6 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
 import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSlotType } from '@vxe-ui/core'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -126,6 +127,17 @@ export namespace VxeModalPropTypes {
     type: ModalEventTypes
   }) => Promise<any>
   export type Slots = VxeModalSlots
+  export type UseScrollbar = boolean
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeModalProps {
@@ -194,6 +206,14 @@ export interface VxeModalProps {
   animat?: VxeModalPropTypes.Animat
   padding?: VxeModalPropTypes.Padding
   beforeHideMethod?: VxeModalPropTypes.BeforeHideMethod
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeModalPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeModalPropTypes.ScrollbarConfig
   slots?: VxeModalPropTypes.Slots
   /**
    * @deprecated 已废弃，请使用 content

package/types/components/table.d.ts

@@ -10,6 +10,7 @@ import { VxeToolbarConstructor, VxeToolbarInstance } from './toolbar'
 import { VxeTableCustomPanelConstructor } from './table-module/custom'
 import { VxeGanttConstructor, VxeGanttPrivateMethods } from './gantt'
 import { VxeGanttViewConstructor, VxeGanttViewInstance, VxeGanttViewPrivateMethods } from './gantt-module/gantt-view'
+import { VxeScrollbarPropTypes } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -3999,8 +4000,15 @@ export interface TablePrivateComputed<D = any> {
   computeScrollbarOpts: ComputedRef<VxeTablePropTypes.ScrollbarConfig>
   computeScrollbarXOpts: ComputedRef<VxeTablePropTypes.ScrollbarXConfig>
   computeScrollbarYOpts: ComputedRef<VxeTablePropTypes.ScrollbarYConfig>
+  computeScrollXHeight: ComputedRef<number | undefined>
+  computeScrollYWidth: ComputedRef<number | undefined>
+  computeScrollXVisible: ComputedRef<'auto' | 'visible' | 'hidden' | boolean | undefined>
+  computeScrollYVisible: ComputedRef<'auto' | 'visible' | 'hidden' | boolean | undefined>
+  computeScrollXAutoHide: ComputedRef<VxeScrollbarPropTypes.AutoHide | undefined>
+  computeScrollYAutoHide: ComputedRef<VxeScrollbarPropTypes.AutoHide | undefined>
   computeScrollbarXToTop: ComputedRef<boolean>
   computeScrollbarYToLeft: ComputedRef<boolean>
+  computeScrollbarWrapperClss: ComputedRef<string>
   computeColumnOpts: ComputedRef<VxeTablePropTypes.ColumnOpts>
   computeCurrentColumnOpts: ComputedRef<VxeTablePropTypes.CurrentColumnConfig>
   computeScrollXThreshold: ComputedRef<number>
@@ -4119,6 +4127,11 @@ export interface TableReactData<D = any> {
   scrollbarWidth: number
   // 横向滚动条的高度
   scrollbarHeight: number
+
+  // 滚动条
+  yThumbHeight: number
+  xThumbWidth: number
+
   /**
    * 行高
    * @deprecated
@@ -4360,9 +4373,17 @@ export interface TableInternalData<D = any> {
   currentRow: D | null
   currentCol: VxeTableDefines.ColumnInfo | null
 
-  // 最后滚动位置
-  lastScrollLeft: number
+  resizeObserver?: ResizeObserver
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
+  isThumbDrag?: boolean
+  thumbDragOffset: number
+  yThumbTop: number
+  xThumbLeft: number
   lastScrollTop: number
+  lastScrollLeft: number
+
   // 单选框属性，已选中保留的行
   radioReserveRow: any
   // 复选框属性，已选中保留的行
@@ -5959,6 +5980,16 @@ export interface TablePrivateMethods<D = any> {
     row: any
     column: VxeTableDefines.ColumnInfo
   }, cellValue?: any): Promise<any>
+  /**
+   * 内部方法
+   * @private
+   */
+  updateScrollbar(): void
+  /**
+   * 内部方法
+   * @private
+   */
+  updateThumbOffset(): void
   /**
    * 内部方法
    * @private

package/types/components/tree.d.ts

@@ -487,8 +487,10 @@ export interface TreeInternalData {
   treeExpandedMaps: Record<string, boolean>
   treeExpandLazyLoadedMaps: Record<string, boolean>
 
-  // 滚动条
   resizeObserver?: ResizeObserver
+
+  // 滚动条
+  scrollObserver?: ResizeObserver
   isThumbDrag?: boolean
   thumbDragOffset: number
   yThumbTop: number