vxe-pc-ui 3.20.8 → 3.20.10

package/styles/components/select.scss

@@ -112,6 +112,7 @@
 }
 
 .vxe-select--panel-body {
+  position: relative;
   display: flex;
   flex-direction: row;
   flex-grow: 1;
@@ -259,3 +260,79 @@
 .vxe-select--empty-placeholder {
   line-height: var(--vxe-ui-select-current-option-height);
 }
+
+// 滚动条
+.vxe-select--panel-body {
+  &.ov-padding {
+    &.overflow-x {
+      &.sx-pos--top {
+        padding-top: var(--vxe-ui-scrollbar-x-height);
+      }
+      &.sx-pos--bottom {
+        padding-bottom: var(--vxe-ui-scrollbar-x-height);
+      }
+    }
+    &.overflow-y {
+      &.sy-pos--left {
+        padding-left: var(--vxe-ui-scrollbar-y-width);
+      }
+      &.sy-pos--right {
+        padding-right: var(--vxe-ui-scrollbar-y-width);
+      }
+    }
+  }
+  &.ov-x--hidden {
+    & > .vxe-select-option--wrapper {
+      overflow-x: hidden;
+    }
+  }
+  &.ov-y--hidden {
+    & > .vxe-select-option--wrapper {
+      overflow-y: hidden;
+    }
+  }
+  &.is--virtual-scrollbar {
+    &.ov-x--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-x {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-x {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+    &.ov-y--auto-hide {
+      &:hover {
+        & > .vxe-scrollbar {
+          & > .vxe-scrollbar--track-y {
+            opacity: 1;
+          }
+        }
+      }
+      & > .vxe-scrollbar {
+        & > .vxe-scrollbar--track-y {
+          opacity: 0;
+          @include baseMixin.createAnimationTransition(opacity, 0.8s);
+        }
+      }
+    }
+  }
+  & > .vxe-scrollbar {
+    position: unset;
+  }
+  &.is--virtual-scrollbar {
+    & > .vxe-select-option--wrapper {
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+    }
+    & > .vxe-select-option--wrapper::-webkit-scrollbar {
+      display: none;
+    }
+  }
+}

package/styles/components/tooltip.scss

@@ -31,6 +31,7 @@
   .vxe-tooltip--content,
   .vxe-tooltip--scrollbar-content-view {
     padding: 8px 12px;
+    width: max-content;
     max-width: 600px;
     max-height: 800px;
     white-space: pre-line;

package/types/components/card.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
@@ -26,7 +26,7 @@ export namespace VxeCardPropTypes {
   export type Shadow = boolean
   export type Padding = boolean
   export type Size = VxeComponentSizeType
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度

package/types/components/drawer.d.ts

@@ -1,5 +1,5 @@
 import { CreateElement } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
@@ -68,7 +68,7 @@ export namespace VxeDrawerPropTypes {
   export type Padding = boolean
   export type BeforeHideMethod = (params: VxeDrawerDefines.DrawerVisibleParams) => Promise<any>
   export type Slots = VxeDrawerSlots
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度

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

@@ -1,4 +1,4 @@
-import { DefineVxeComponentInstance } from '@vxe-ui/core'
+import { DefineVxeComponentInstance, VxeUseInitVScrollbarResult, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../table'
 import { VxeGanttDefines, VxeGanttConstructor } from '../gantt'
 import { VxeScrollbarPropTypes } from '../scrollbar'
@@ -17,7 +17,7 @@ export type VxeGanttViewConstructor = VxeGanttViewInstance
 interface VxeGanttViewProps {
 }
 
-export interface GanttViewReactData {
+export interface GanttViewReactData extends VxeUseInitVScrollbarReactData {
   // 是否启用了横向 X 可视渲染方式加载
   scrollXLoad: boolean
   // 是否启用了纵向 Y 可视渲染方式加载
@@ -35,10 +35,6 @@ export interface GanttViewReactData {
   lastScrollTime: number
   lazScrollLoading: boolean
 
-  // 滚动条
-  yThumbHeight: number
-  xThumbWidth: number
-
   scrollVMLoading: boolean
   scrollYHeight: number
   scrollYTop: number
@@ -56,7 +52,7 @@ export interface GanttViewReactData {
   viewCellWidth: number
 }
 
-export interface GanttViewInternalData {
+export interface GanttViewInternalData extends VxeUseInitVScrollbarInternalData {
   xeTable: (VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods) | null
   // 渲染所有列
   visibleColumn: VxeGanttDefines.ViewColumn[]
@@ -78,15 +74,6 @@ export interface GanttViewInternalData {
     endIndex: number
   }
 
-  // 滚动条
-  scrollObserver?: ResizeObserver
-  isThumbDrag?: boolean
-  thumbDragOffset: number
-  yThumbTop: number
-  xThumbLeft: number
-  lastScrollLeft: number
-  lastScrollTop: number
-
   // 刷新布局
   rceTimeout?: undefined | number
   rceRunTime?: undefined | number
@@ -183,7 +170,11 @@ export interface VxeGanttViewPrivateMethods {
   updateScrollbar(): void
 }
 
-export interface VxeGanttViewMethods {
+export interface VxeGanttViewMethods extends VxeUseInitVScrollbarResult {
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   refreshData(): Promise<void>
   updateViewData(force?: boolean): Promise<void>
   connectUpdate(params: {

package/types/components/grid.d.ts

@@ -1,6 +1,6 @@
 import { CreateElement } from 'vue'
 import { NormalizedScopedSlot } from 'vue/types/vnode'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentIsVScrollbar, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
 import { VxeToolbarProps, VxeToolbarPropTypes, VxeToolbarSlotTypes } from './toolbar'
 import { VxeTableDefines, VxeTableEmits, VxeTableConstructor, VxeTableProps, TableMethods, VxeTableSlotTypes } from './table'
 import { VxeColumnPropTypes } from './column'
@@ -461,7 +461,8 @@ export interface VxeGridProps<D = any> extends VxeTableProps<D> {
 }
 
 export interface GridPrivateComputed<D = any> {
-  computeSize: VxeGridPropTypes.Size
+  computeSize: VxeComponentSizeType
+  computeIsVScrollbar: VxeComponentIsVScrollbar
   computeProxyOpts: VxeGridPropTypes.ProxyConfig<D>
   computePagerOpts: VxeGridPropTypes.PagerConfig
   computeFormOpts: VxeGridPropTypes.FormConfig

package/types/components/icon-picker.d.ts

@@ -1,5 +1,6 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentIsVScrollbar, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeIconPropTypes } from './icon'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -86,6 +87,17 @@ export namespace VxeIconPickerPropTypes {
     className?: string | ((params: { $iconPicker: VxeIconPickerConstructor }) => string)
   }
   export type Transfer = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeIconPickerProps {
@@ -112,6 +124,14 @@ export interface VxeIconPickerProps {
   placement?: VxeIconPickerPropTypes.Placement
   popupConfig?: VxeIconPickerPropTypes.PopupConfig
   transfer?: VxeIconPickerPropTypes.Transfer
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeIconPickerPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeIconPickerPropTypes.ScrollbarConfig
 }
 
 export interface IconPickerPrivateComputed {

package/types/components/layout-aside.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
@@ -29,7 +29,7 @@ export namespace VxeLayoutAsidePropTypes {
      */
     animation?: boolean
   }
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度

package/types/components/layout-body.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeBacktopProps, VxeBacktopSlotTypes } from './backtop'
 import { VxeScrollbarProps } from './scrollbar'
 
@@ -24,7 +24,7 @@ export namespace VxeLayoutBodyPropTypes {
   export type Padding = boolean
   export type ShowBacktop = boolean
   export interface BacktopConfig extends Omit<VxeBacktopProps, 'target'> {}
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度

package/types/components/layout-container.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -17,11 +17,13 @@ export interface VxeLayoutContainerPrivateRef extends LayoutContainerPrivateRef
 
 export namespace VxeLayoutContainerPropTypes {
   export type Size = VxeComponentSizeType
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export type Vertical = boolean
 }
 
 export interface VxeLayoutContainerProps {
   size?: VxeLayoutContainerPropTypes.Size
+  useScrollbar?: VxeLayoutContainerPropTypes.UseScrollbar
   vertical?: VxeLayoutContainerPropTypes.Vertical
 }
 

package/types/components/list.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 import { VxeScrollbarProps } from './scrollbar'
 
@@ -219,7 +219,7 @@ export namespace VxeListPropTypes {
      */
     enabled?: boolean
   }
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible'> {
     /**
      * 滚动条宽度
@@ -351,6 +351,10 @@ export interface ListInternalData {
 
 export interface ListMethods<D = any> {
   dispatchEvent(type: ValueOf<VxeListEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 加载数据
    * @param data 列表数据

package/types/components/menu.d.ts

@@ -1,5 +1,5 @@
 import { CreateElement } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeComponentPermissionCodeType, VxeComponentSlotType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeComponentPermissionCodeType, VxeComponentSlotType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeLinkPropTypes } from './link'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 import { VxeScrollbarProps } from './scrollbar'
@@ -80,7 +80,7 @@ export namespace VxeMenuPropTypes {
     }): boolean
   }
   export type AppendTo = string | HTMLElement | ((params: {}) => string | HTMLElement)
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends VxeScrollbarProps {}
 }
 

package/types/components/modal.d.ts

@@ -1,5 +1,5 @@
 import { CreateElement } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentEventParams, ValueOf, VxeComponentSlotType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentEventParams, ValueOf, VxeComponentSlotType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
@@ -121,7 +121,7 @@ export namespace VxeModalPropTypes {
     type: ModalEventTypes
   }) => Promise<any>
   export type Slots = VxeModalSlots
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度

package/types/components/scrollbar.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentStyleType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -17,6 +17,7 @@ export interface ScrollbarPrivateRef {
 export interface VxeScrollbarPrivateRef extends ScrollbarPrivateRef { }
 
 export namespace VxeScrollbarPropTypes {
+  export type Size = VxeComponentSizeType
   export type Id = number | string
   export type ViewId = number | string
   export type Theme = '' | 'light' | 'dark'
@@ -70,11 +71,20 @@ export namespace VxeScrollbarPropTypes {
   export type ViewStyle = VxeComponentStyleType
   export type ViewClassName = string
   export type ViewInnerClassName = string
+  /**
+   * 已废弃
+   * @deprecated
+   */
   export type AutoResize = boolean
+  /**
+   * 已废弃
+   * @deprecated
+   */
   export type SyncResize = boolean
 }
 
 export interface VxeScrollbarProps {
+  size?: VxeScrollbarPropTypes.Size
   /**
    * ID
    */
@@ -161,10 +171,12 @@ export interface VxeScrollbarProps {
   viewInnerClassName?: VxeScrollbarPropTypes.ViewInnerClassName
   /**
    * 自动监听元素的变化去重新计算样式
+   * @deprecated
    */
   autoResize?: VxeScrollbarPropTypes.AutoResize
   /**
    * 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来更新内容时可能会用到）
+   * @deprecated
    */
   syncResize?: VxeScrollbarPropTypes.SyncResize
 }
@@ -173,18 +185,9 @@ export interface ScrollbarPrivateComputed {
 }
 export interface VxeScrollbarPrivateComputed extends ScrollbarPrivateComputed { }
 
-export interface ScrollbarReactData {
-  yThumbHeight: number
-  xThumbWidth: number
+export interface ScrollbarReactData extends VxeUseInitVScrollbarReactData {
 }
-export interface ScrollbarInternalData {
-  resizeObserver?: ResizeObserver
-  isThumbDrag?: boolean
-  thumbDragOffset: number
-  yThumbTop: number
-  xThumbLeft: number
-  lastScrollTop: number
-  lastScrollLeft: number
+export interface ScrollbarInternalData extends VxeUseInitVScrollbarInternalData {
 }
 
 export interface ScrollbarMethods {
@@ -221,11 +224,11 @@ export interface ScrollbarMethods {
   /**
    * 获取滚动视图元素
    */
-  getViewElem(): HTMLElement | null
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 获取滚动视图内容包裹元素
    */
-  getViewInnerElem(): HTMLElement | null
+  getScrollViewInnerElem(): HTMLElement | null | undefined
   /**
    * 重新计算样式
    * 对于某些特殊场景可能会用到，比如更新内容

package/types/components/select.d.ts

@@ -1,6 +1,7 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentStyleType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, VxeComponentStyleType, ValueOf, VxeComponentIsVScrollbar, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeOptgroupProps } from './optgroup'
 import { VxeOptionProps, VxeOptionPropTypes } from './option'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable @typescript-eslint/no-empty-interface,no-use-before-define,@typescript-eslint/ban-types */
 
@@ -9,6 +10,7 @@ export type VxeSelectComponent = DefineVxeComponentOptions<VxeSelectProps>
 
 export type VxeSelectInstance = DefineVxeComponentInstance<{
   reactData: SelectReactData
+  internalData: SelectInternalData
 }, VxeSelectProps, VxeSelectPrivateComputed, VxeSelectMethods>
 
 export type VxeSelectConstructor = VxeSelectInstance
@@ -193,6 +195,17 @@ export namespace VxeSelectPropTypes {
    * @deprecated
    */
   export interface ScrollY extends VirtualYConfig {}
+  export type UseScrollbar = VxeComponentIsVScrollbar
+  export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
+    /**
+     * 滚动条宽度
+     */
+    width?: number | string
+    /**
+     * 滚动条高度
+     */
+    height?: number | string
+  }
 }
 
 export interface VxeSelectProps {
@@ -273,6 +286,14 @@ export interface VxeSelectProps {
    * 纵向虚拟滚动配置项
    */
   virtualYConfig?: VxeSelectPropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeSelectPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeSelectPropTypes.ScrollbarConfig
 
   /**
    * 已废弃，被 remote-config.queryMethod 替换
@@ -300,7 +321,7 @@ export interface SelectPrivateComputed {
 }
 export interface VxeSelectPrivateComputed extends SelectPrivateComputed { }
 
-export interface SelectReactData {
+export interface SelectReactData extends VxeUseInitVScrollbarReactData {
   initialized: boolean
   scrollYLoad: boolean
   bodyHeight: number
@@ -322,7 +343,7 @@ export interface SelectReactData {
   isActivated: boolean
 }
 
-export interface SelectInternalData {
+export interface SelectInternalData extends VxeUseInitVScrollbarInternalData {
   isLoaded?: boolean
   synchData: any[]
   fullData: any[]
@@ -346,6 +367,10 @@ export interface SelectInternalData {
 
 export interface SelectMethods {
   dispatchEvent(type: ValueOf<VxeSelectEmits>, params: Record<string, any>, evnt: Event | null): void
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 加载数据
    * @param data 列表数据

package/types/components/table.d.ts

@@ -1,6 +1,6 @@
 import { VNode, CreateElement } from 'vue'
 import { NormalizedScopedSlot } from 'vue/types/vnode'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeGlobalConfig, VxeComponentStyleType, VxeComponentSlotType, VxeGlobalRendererOptions } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeGlobalConfig, VxeComponentStyleType, VxeComponentSlotType, VxeGlobalRendererOptions, VxeComponentIsVScrollbar, VxeUseSizeResult, VxeUseVScrollbarResult, VxeUseInitVScrollbarResult, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeColumnPropTypes, VxeColumnProps, VxeColumnSlotTypes } from './column'
 import { VxeTableExtendCellAreaDefines, VxeTableExtendCellAreaEmits } from './table-plugins'
 import { VxeGridConstructor, VxeGridPrivateMethods } from './grid'
@@ -1392,6 +1392,10 @@ export namespace VxeTablePropTypes {
      * 是否显示底部按钮
      */
     showFooter?: boolean
+    /**
+     * 使用虚拟滚动条
+     */
+    useScrollbar?: VxeTooltipPropTypes.UseScrollbar
   }
   export interface FilterOpts<D = VxeTablePropTypes.Row> extends FilterConfig<D> { }
 
@@ -2987,7 +2991,7 @@ export namespace VxeTablePropTypes {
      */
     overscrollBehavior?: 'contain' | 'none' | ''
   }
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   /**
    * 滚动条配置项
    */
@@ -3965,8 +3969,8 @@ export interface VxeTableProps<D = any> {
 }
 
 export interface TablePrivateComputed<D = any> {
-  computeSize: VxeTablePropTypes.Size
   computeTableId: string
+  computeTableStyle: VxeComponentStyleType
   computeRowField: string
   computeEditDirtyOpts: VxeTablePropTypes.EditDirtyConfig
   computeValidOpts: VxeTablePropTypes.ValidOpts<D>
@@ -4126,9 +4130,9 @@ export interface TablePrivateComputed<D = any> {
    */
   computeSYOpts: VxeTablePropTypes.VirtualYConfig & { gt: number }
 }
-export interface VxeTablePrivateComputed<D = any> extends TablePrivateComputed<D> { }
+export interface VxeTablePrivateComputed<D = any> extends TablePrivateComputed<D>, VxeUseSizeResult, VxeUseVScrollbarResult { }
 
-export interface TableReactData<D = any> {
+export interface TableReactData<D = any> extends VxeUseInitVScrollbarReactData {
   updateColFlag: number
   // 低性能的静态列
   staticColumns: any[]
@@ -4151,10 +4155,6 @@ export interface TableReactData<D = any> {
   // 横向滚动条的高度
   scrollbarHeight: number
 
-  // 滚动条
-  yThumbHeight: number
-  xThumbWidth: number
-
   /**
    * 行高
    * @deprecated
@@ -4353,7 +4353,7 @@ export interface TableReactData<D = any> {
   currColFlag: number
 }
 
-export interface TableInternalData<D = any> {
+export interface TableInternalData<D = any> extends VxeUseInitVScrollbarInternalData {
   tZindex: number
   currKeyField: string
   isCurrDeepKey: boolean
@@ -4398,15 +4398,6 @@ export interface TableInternalData<D = any> {
 
   resizeObserver?: ResizeObserver
 
-  // 滚动条
-  scrollObserver?: ResizeObserver
-  isThumbDrag?: boolean
-  thumbDragOffset: number
-  yThumbTop: number
-  xThumbLeft: number
-  lastScrollTop: number
-  lastScrollLeft: number
-
   // 单选框属性，已选中保留的行
   radioReserveRow: any
   // 复选框属性，已选中保留的行
@@ -4596,6 +4587,10 @@ export interface TableMethods<DT = any> {
    * 获取根元素
    */
   getEl(): HTMLDivElement
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 手动清除表格所有条件，还原到初始状态
    * 对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存
@@ -5603,9 +5598,19 @@ export interface TableMethods<DT = any> {
    */
   getCustomStoreData(): VxeTableDefines.CustomStoreData
 }
-export interface VxeTableMethods<D = any> extends TableMethods<D> { }
+export interface VxeTableMethods<D = any> extends TableMethods<D>, VxeUseInitVScrollbarResult { }
 
 export interface TablePrivateMethods<D = any> {
+  /**
+   * 内部方法
+   * @private
+   */
+  getInternalData(): TableInternalData<D>
+  /**
+   * 内部方法
+   * @private
+   */
+  getReactData(): TableReactData<D>
   /**
    * 内部方法
    * @deprecated
@@ -6010,7 +6015,7 @@ export interface TablePrivateMethods<D = any> {
    * 内部方法
    * @private
    */
-  updateScrollbar(): void
+  updateScrollbar(): Promise<void>
   /**
    * 内部方法
    * @private
@@ -6359,7 +6364,6 @@ export namespace VxeTableDefines {
     style: any
     column: VxeTableDefines.ColumnInfo | null | undefined
     visible: boolean
-    maxHeight: number | string | null
   }
 
   export interface HistoryStackObj<D = any> {

package/types/components/tabs.d.ts

@@ -1,4 +1,4 @@
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeTabPaneProps, VxeTabPaneDefines, VxeTabPanePropTypes } from './tab-pane'
 import { VxeScrollbarProps } from './scrollbar'
 
@@ -106,7 +106,7 @@ export namespace VxeTabsPropTypes {
       option: Omit<VxeTabPaneProps, 'slots'>
     }) => boolean
   }
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   export interface ScrollbarConfig extends Pick<VxeScrollbarProps, 'xConfig' | 'yConfig' | 'padding' | 'autoHide' | 'visible' | 'className' | 'viewAttrs' | 'viewClassName' | 'viewInnerClassName'> {
     /**
      * 滚动条宽度