vxe-pc-ui 4.20.8 → 4.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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -33,7 +33,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 { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -74,7 +74,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
-import { VxeComponentBaseOptions, DefineVxeComponentInstance } from '@vxe-ui/core'
+import { VxeComponentBaseOptions, DefineVxeComponentInstance, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 import { VxeTableConstructor, VxeTableMethods, VxeTablePrivateMethods } from '../table'
 import { VxeGanttDefines } from '../gantt'
 import { VxeScrollbarPropTypes } from '../scrollbar'
@@ -20,7 +20,7 @@ export type VxeGanttViewInstance = DefineVxeComponentInstance<VxeGanttViewProps,
 interface VxeGanttViewProps {
 }
 
-export interface GanttViewReactData {
+export interface GanttViewReactData extends VxeUseInitVScrollbarReactData {
   // 是否启用了横向 X 可视渲染方式加载
   scrollXLoad: boolean
   // 是否启用了纵向 Y 可视渲染方式加载
@@ -38,10 +38,6 @@ export interface GanttViewReactData {
   lastScrollTime: number
   lazScrollLoading: boolean
 
-  // 滚动条
-  yThumbHeight: number
-  xThumbWidth: number
-
   scrollVMLoading: boolean
   scrollYHeight: number
   scrollYTop: number
@@ -59,7 +55,7 @@ export interface GanttViewReactData {
   viewCellWidth: number
 }
 
-export interface GanttViewInternalData {
+export interface GanttViewInternalData extends VxeUseInitVScrollbarInternalData {
   xeTable: (VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods) | null
   // 渲染所有列
   visibleColumn: VxeGanttDefines.ViewColumn[]
@@ -81,15 +77,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
@@ -190,6 +177,10 @@ export interface VxeGanttViewPrivateMethods {
 }
 
 export interface VxeGanttViewMethods {
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   refreshData(): Promise<void>
   updateViewData(force?: boolean): Promise<void>
   connectUpdate(params: {

package/types/components/grid.d.ts

@@ -1,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentIsVScrollbar, VxeComponentSlotType, ValueOf } from '@vxe-ui/core'
 import { VxeToolbarInstance, VxeToolbarProps, VxeToolbarPropTypes, VxeToolbarSlotTypes } from './toolbar'
 import { VxeTableDefines, VxeTablePrivateMethods, VxeTableEmits, VxeTableConstructor, VxeTableProps, TableMethods, VxeTableSlotTypes } from './table'
 import { VxeColumnPropTypes } from './column'
@@ -469,6 +469,8 @@ export interface VxeGridProps<D = any> extends VxeTableProps<D> {
 }
 
 export interface GridPrivateComputed<D = any> {
+  computeSize: ComputedRef<VxeComponentSizeType>
+  computeIsVScrollbar: ComputedRef<VxeComponentIsVScrollbar>
   computeProxyOpts: ComputedRef<VxeGridPropTypes.ProxyConfig<D>>
   computePagerOpts: ComputedRef<VxeGridPropTypes.PagerOpts>
   computeFormOpts: ComputedRef<VxeGridPropTypes.FormOpts>

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

@@ -1,6 +1,7 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentIsVScrollbar, VxeComponentEventParams, ValueOf, VxeComponentStyleType, VxeComponentSizeType } from '@vxe-ui/core'
 import { VxeIconPropTypes } from './icon'
+import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -93,6 +94,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 type VxeIconPickerProps = {
@@ -119,6 +131,14 @@ export type 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,5 +1,5 @@
 import { RenderFunction, ComputedRef, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType,VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -36,7 +36,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeBacktopProps, VxeBacktopSlotTypes } from './backtop'
 import { VxeScrollbarProps } from './scrollbar'
 
@@ -31,7 +31,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -24,11 +24,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 import { VxeScrollbarProps } from './scrollbar'
 
@@ -227,7 +227,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'> {
     /**
      * 滚动条宽度
@@ -359,6 +359,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 { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSlotType, VxeComponentStyleType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentPermissionCodeType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSlotType, VxeComponentStyleType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentPermissionCodeType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeLinkPropTypes } from './link'
 import { VxeContextMenuPropTypes, VxeContextMenuDefines } from './context-menu'
 import { VxeScrollbarProps } from './scrollbar'
@@ -86,7 +86,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 { RenderFunction, SetupContext, Ref, ComputedRef } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSlotType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentSizeType, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSlotType, VxeComponentIsVScrollbar } from '@vxe-ui/core'
 import { VxeScrollbarProps } from './scrollbar'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
@@ -127,7 +127,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentStyleType } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, ValueOf, VxeComponentSizeType, VxeComponentStyleType, VxeUseInitVScrollbarReactData, VxeUseInitVScrollbarInternalData } from '@vxe-ui/core'
 
 /* eslint-disable no-use-before-define,@typescript-eslint/ban-types */
 
@@ -24,6 +24,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'
@@ -77,11 +78,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
    */
@@ -168,10 +178,12 @@ export interface VxeScrollbarProps {
   viewInnerClassName?: VxeScrollbarPropTypes.ViewInnerClassName
   /**
    * 自动监听元素的变化去重新计算样式
+   * @deprecated
    */
   autoResize?: VxeScrollbarPropTypes.AutoResize
   /**
    * 自动跟随某个属性的变化去重新计算表格，和手动调用 recalculate 方法是一样的效果（对于通过某个属性来更新内容时可能会用到）
+   * @deprecated
    */
   syncResize?: VxeScrollbarPropTypes.SyncResize
 }
@@ -180,18 +192,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 {
@@ -228,11 +231,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,7 +1,8 @@
 import { RenderFunction, SetupContext, Ref } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, VxeComponentStyleType, ValueOf } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, 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 no-use-before-define,@typescript-eslint/ban-types */
 
@@ -14,6 +15,7 @@ export interface VxeSelectConstructor extends VxeComponentBaseOptions, VxeSelect
   props: VxeSelectProps
   context: SetupContext<VxeSelectEmits>
   reactData: SelectReactData
+  internalData: SelectInternalData
   getRefMaps(): SelectPrivateRef
   getComputeMaps(): SelectPrivateComputed
   renderVN: RenderFunction
@@ -200,6 +202,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 {
@@ -280,6 +293,14 @@ export interface VxeSelectProps {
    * 纵向虚拟滚动配置项
    */
   virtualYConfig?: VxeSelectPropTypes.VirtualYConfig
+  /**
+   * 使用虚拟滚动条
+   */
+  useScrollbar?: VxeSelectPropTypes.UseScrollbar
+  /**
+   * 滚动条配置项
+   */
+  scrollbarConfig?: VxeSelectPropTypes.ScrollbarConfig
 
   /**
    * 已废弃，被 remote-config.queryMethod 替换
@@ -307,7 +328,7 @@ export interface SelectPrivateComputed {
 }
 export interface VxeSelectPrivateComputed extends SelectPrivateComputed { }
 
-export interface SelectReactData {
+export interface SelectReactData extends VxeUseInitVScrollbarReactData {
   initialized: boolean
   scrollYLoad: boolean
   bodyHeight: number
@@ -329,7 +350,7 @@ export interface SelectReactData {
   isActivated: boolean
 }
 
-export interface SelectInternalData {
+export interface SelectInternalData extends VxeUseInitVScrollbarInternalData {
   isLoaded?: boolean
   synchData: any[]
   fullData: any[]
@@ -353,6 +374,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,5 +1,5 @@
 import { RenderFunction, SetupContext, Ref, ComputedRef, ComponentPublicInstance, VNode } from 'vue'
-import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeGlobalConfig, VxeComponentStyleType, VxeComponentSlotType, VxeComponentAlignType, VxeGlobalRendererOptions } from '@vxe-ui/core'
+import { DefineVxeComponentApp, DefineVxeComponentOptions, DefineVxeComponentInstance, VxeComponentBaseOptions, VxeComponentEventParams, VxeComponentSizeType, ValueOf, VxeGlobalConfig, VxeComponentStyleType, VxeComponentSlotType, VxeComponentAlignType, 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 } from './grid'
@@ -1426,6 +1426,10 @@ export namespace VxeTablePropTypes {
      * 是否显示底部按钮
      */
     showFooter?: boolean
+    /**
+     * 使用虚拟滚动条
+     */
+    useScrollbar?: VxeTooltipPropTypes.UseScrollbar
   }
   export interface FilterOpts<D = VxeTablePropTypes.Row> extends FilterConfig<D> { }
 
@@ -3019,7 +3023,7 @@ export namespace VxeTablePropTypes {
      */
     overscrollBehavior?: 'contain' | 'none' | ''
   }
-  export type UseScrollbar = boolean
+  export type UseScrollbar = VxeComponentIsVScrollbar
   /**
    * 滚动条配置项
    */
@@ -3994,8 +3998,10 @@ export interface VxeTableProps<D = any> {
 }
 
 export interface TablePrivateComputed<D = any> {
-  computeSize: ComputedRef<VxeTablePropTypes.Size>
+  computeSize: ComputedRef<VxeComponentSizeType>
+  computeIsVScrollbar: ComputedRef<VxeComponentIsVScrollbar>
   computeTableId: ComputedRef<string>
+  computeTableStyle: ComputedRef<VxeComponentStyleType>
   computeRowField: ComputedRef<string>
   computeEditDirtyOpts: ComputedRef<VxeTablePropTypes.EditDirtyConfig>
   computeValidOpts: ComputedRef<VxeTablePropTypes.ValidOpts<D>>
@@ -4107,9 +4113,9 @@ export interface TablePrivateComputed<D = any> {
    */
   computeSYOpts: ComputedRef<VxeTablePropTypes.VirtualYConfig & { gt: number }>
 }
-export interface VxeTablePrivateComputed extends TablePrivateComputed { }
+export interface VxeTablePrivateComputed extends TablePrivateComputed, VxeUseSizeResult, VxeUseVScrollbarResult { }
 
-export interface TableReactData<D = any> {
+export interface TableReactData<D = any> extends VxeUseInitVScrollbarReactData {
   updateColFlag: number
   // 低性能的静态列
   staticColumns: any[]
@@ -4132,10 +4138,6 @@ export interface TableReactData<D = any> {
   // 横向滚动条的高度
   scrollbarHeight: number
 
-  // 滚动条
-  yThumbHeight: number
-  xThumbWidth: number
-
   /**
    * 行高
    * @deprecated
@@ -4334,7 +4336,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
@@ -4379,15 +4381,6 @@ export interface TableInternalData<D = any> {
 
   resizeObserver?: ResizeObserver
 
-  // 滚动条
-  scrollObserver?: ResizeObserver
-  isThumbDrag?: boolean
-  thumbDragOffset: number
-  yThumbTop: number
-  xThumbLeft: number
-  lastScrollTop: number
-  lastScrollLeft: number
-
   // 单选框属性，已选中保留的行
   radioReserveRow: any
   // 复选框属性，已选中保留的行
@@ -4576,6 +4569,10 @@ export interface TableMethods<DT = any> {
    * 获取根元素
    */
   getEl(): HTMLDivElement
+  /**
+   * 获取滚动视图元素
+   */
+  getScrollViewElem(): HTMLElement | null | undefined
   /**
    * 手动清除表格所有条件，还原到初始状态
    * 对于增删改查的场景中可能会用到，比如在数据保存之后清除表格缓存
@@ -5588,9 +5585,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
@@ -5988,7 +5995,7 @@ export interface TablePrivateMethods<D = any> {
    * 内部方法
    * @private
    */
-  updateScrollbar(): void
+  updateScrollbar(): Promise<void>
   /**
    * 内部方法
    * @private
@@ -6337,7 +6344,6 @@ export namespace VxeTableDefines {
     style: any
     column: VxeTableDefines.ColumnInfo | null | undefined
     visible: boolean
-    maxHeight: number | string | null
   }
 
   export interface HistoryStackObj<D = any> {