vxe-table 3.25.0-beta.0 → 3.25.0-beta.2

package/packages/table/src/table.ts

@@ -1,8 +1,8 @@
 import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
-import { getFuncText, hasEnableConf, isEnableConf } from '../../ui/src/utils'
+import { getDefaultConfig, getFuncText, hasEnableConf, isEnableConf } from '../../ui/src/utils'
 import { initTpImg, toCssUnit } from '../../ui/src/dom'
-import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util'
+import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey, getRefElem } from './util'
 import { VxeUI } from '../../ui'
 import methods from './methods'
 import TableBodyComponent from './body'
@@ -31,7 +31,7 @@ import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes, Ta
 
 const { warnLog, errLog } = createComponentLog('table')
 
-const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
+const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, domUtils, globalMixins, renderEmptyElement } = VxeUI
 
 function handleUpdateMergeBodyCells ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) {
   const internalData = $xeTable as unknown as TableInternalData
@@ -113,6 +113,8 @@ function renderViewFixed (h: CreateElement, $xeTable: VxeTableConstructor & VxeT
   const scrollbarOpts = $xeTable.computeScrollbarOpts
   const scrollbarXOpts = $xeTable.computeScrollbarXOpts
   const scrollbarYOpts = $xeTable.computeScrollbarYOpts
+  const scrollXVisible = $xeTable.computeScrollXVisible
+  const scrollYVisible = $xeTable.computeScrollYVisible
   const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts
   const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts
   const isFixedLeft = fixedType === 'left'
@@ -121,10 +123,15 @@ function renderViewFixed (h: CreateElement, $xeTable: VxeTableConstructor & VxeT
   const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior
   return h('div', {
     ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
-    class: [`vxe-table--fixed-${fixedType}-wrapper`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
-      [`x-ob--${osXBehavior}`]: osXBehavior,
-      [`y-ob--${osYBehavior}`]: osYBehavior
-    }]
+    class: [
+      `vxe-table--fixed-${fixedType}-wrapper`,
+      `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+      `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`,
+      {
+        [`x-ob--${osXBehavior}`]: osXBehavior,
+        [`y-ob--${osYBehavior}`]: osYBehavior
+      }
+    ]
   }, [
     showHeader
       ? h(TableHeaderComponent, {
@@ -430,6 +437,7 @@ function renderScrollX (h: CreateElement, $xeTable: VxeTableConstructor & VxeTab
 
 function renderScrollY (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   return h('div', {
+    key: 'vsy',
     ref: 'refScrollYVirtualElem',
     class: 'vxe-table--scroll-y-virtual'
   }, [
@@ -470,6 +478,8 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
   const scrollbarOpts = $xeTable.computeScrollbarOpts
   const scrollbarXOpts = $xeTable.computeScrollbarXOpts
   const scrollbarYOpts = $xeTable.computeScrollbarYOpts
+  const scrollXVisible = $xeTable.computeScrollXVisible
+  const scrollYVisible = $xeTable.computeScrollYVisible
   const { overscrollBehavior: overscrollXBehavior } = scrollbarXOpts
   const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts
   const { leftList, rightList } = columnStore
@@ -477,6 +487,7 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
   const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior
 
   return h('div', {
+    key: 'tvw',
     ref: 'refTableViewportElem',
     class: ['vxe-table--viewport-wrapper', {
       [`x-ob--${osXBehavior}`]: osXBehavior,
@@ -484,7 +495,11 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
     }]
   }, [
     h('div', {
-      class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
+      class: [
+        'vxe-table--main-wrapper',
+        `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+        `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`
+      ]
     }, [
       /**
          * 表头
@@ -532,9 +547,10 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
   ])
 }
 
-function renderBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+function renderNativeBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
   const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
   return h('div', {
+    key: 'lnb',
     class: 'vxe-table--layout-wrapper'
   }, scrollbarYToLeft
     ? [
@@ -547,6 +563,87 @@ function renderBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTableP
       ])
 }
 
+function renderVirtualBody (h: CreateElement, $xeTable: VxeTableConstructor & VxeTablePrivateMethods) {
+  const props = $xeTable
+  const reactData = $xeTable as unknown as TableReactData
+  const internalData = $xeTable as unknown as TableInternalData
+  const $xeGantt = $xeTable.$xeGantt
+  const $xeGanttView = internalData.xeGanttView
+
+  const { useScrollbar } = props
+  const { xThumbWidth, yThumbHeight } = reactData
+  const scrollbarOpts = $xeTable.computeScrollbarOpts
+  const scrollXAutoHide = $xeTable.computeScrollXAutoHide
+  const scrollYAutoHide = $xeTable.computeScrollYAutoHide
+  const scrollXVisible = $xeTable.computeScrollXVisible
+  const scrollYVisible = $xeTable.computeScrollYVisible
+  const scrollbarXToTop = $xeTable.computeScrollbarXToTop
+  const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+  const scrollbarWrapperClss = $xeTable.computeScrollbarWrapperClss
+  const hideXScroll = scrollXVisible === false || scrollXVisible === 'hidden'
+  const hideYScroll = scrollYVisible === false || scrollYVisible === 'hidden'
+
+  return h('div', {
+    key: 'lvb',
+    class: ['vxe-table--layout-wrapper', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+      'is--virtual-scrollbar': useScrollbar,
+      'ov-padding': useScrollbar && scrollbarOpts.padding,
+      'ov-x--auto-hide': useScrollbar && scrollXAutoHide,
+      'ov-y--auto-hide': useScrollbar && scrollYAutoHide,
+      'overflow-y': yThumbHeight,
+      'overflow-x': xThumbWidth
+    }]
+  }, [
+    renderViewport(h, $xeTable),
+    h('div', {
+      class: scrollbarWrapperClss
+    }, [
+      hideXScroll
+        ? renderEmptyElement($xeTable)
+        : h('div', {
+          ref: 'refTrackXElem',
+          class: 'vxe-scrollbar--track-x',
+          on: {
+            click: ($xeTable as any).clickTrackXEvent
+          }
+        }, [
+          h('div', {
+            ref: 'refThumbXElem',
+            class: 'vxe-scrollbar--thumb-x',
+            on: {
+              pointerdown: ($xeTable as any).pointerdownThumbXEvent,
+              pointermove: ($xeTable as any).pointermoveThumbXEvent,
+              pointerup: ($xeTable as any).cleatPointerThumbEvent,
+              pointercancel: ($xeTable as any).cleatPointerThumbEvent,
+              lostpointercapture: ($xeTable as any).cleatPointerThumbEvent
+            }
+          })
+        ]),
+      hideYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)
+        ? renderEmptyElement($xeTable)
+        : h('div', {
+          ref: 'refTrackYElem',
+          class: 'vxe-scrollbar--track-y',
+          on: {
+            click: ($xeTable as any).clickTrackYEvent
+          }
+        }, [
+          h('div', {
+            ref: 'refThumbYElem',
+            class: 'vxe-scrollbar--thumb-y',
+            on: {
+              pointerdown: ($xeTable as any).pointerdownThumbYEvent,
+              pointermove: ($xeTable as any).pointermoveThumbYEvent,
+              pointerup: ($xeTable as any).cleatPointerThumbEvent,
+              pointercancel: ($xeTable as any).cleatPointerThumbEvent,
+              lostpointercapture: ($xeTable as any).cleatPointerThumbEvent
+            }
+          })
+        ])
+    ])
+  ])
+}
+
 export default {
   name: 'VxeTable',
   mixins: [
@@ -601,7 +698,8 @@ export default {
       kfFlag: 0,
       layoutReFlag: 0,
       mergeFooteCellFlag: 0,
-      crossTableDragRowInfo: crossTableDragRowGlobal
+      crossTableDragRowInfo: crossTableDragRowGlobal,
+      scrollDefaultConf: Object.assign({}, getConfig().scrollbar)
     }
   },
   computed: {
@@ -718,17 +816,61 @@ export default {
     },
     computeScrollbarXOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const props = $xeTable
 
       const scrollbarOpts = $xeTable.computeScrollbarOpts
-      return Object.assign({}, scrollbarOpts.x, props.scrollbarConfig?.x || {})
+      return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {})
     },
     computeScrollbarYOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const props = $xeTable
 
       const scrollbarOpts = $xeTable.computeScrollbarOpts
-      return Object.assign({}, scrollbarOpts.y, props.scrollbarConfig?.y || {})
+      return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {})
+    },
+    computeScrollXHeight () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const scrollDefaultConf = ($xeTable as any).scrollDefaultConf
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts
+      return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height))
+    },
+    computeScrollYWidth () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const scrollDefaultConf = ($xeTable as any).scrollDefaultConf
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts
+      return XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width))
+    },
+    computeScrollXVisible () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts
+      return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollYVisible () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts
+      return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible)
+    },
+    computeScrollXAutoHide () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const scrollDefaultConf = ($xeTable as any).scrollDefaultConf
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts
+      return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide)
+    },
+    computeScrollYAutoHide () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const scrollDefaultConf = ($xeTable as any).scrollDefaultConf
+
+      const scrollbarOpts = $xeTable.computeScrollbarOpts
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts
+      return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide)
     },
     computeScrollbarXToTop () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -742,6 +884,26 @@ export default {
       const scrollbarYOpts = $xeTable.computeScrollbarYOpts
       return scrollbarYOpts.position === 'left'
     },
+    computeScrollbarWrapperClss () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const reactData = $xeTable as unknown as TableReactData
+
+      const { yThumbHeight, xThumbWidth } = reactData
+      const scrollbarXToTop = $xeTable.computeScrollbarXToTop
+      const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+      const scrollXVisible = $xeTable.computeScrollXVisible
+      const scrollYVisible = $xeTable.computeScrollYVisible
+      return domUtils.buildClass([
+        'vxe-scrollbar is--virtual',
+        `ov-x--${scrollXVisible === false ? 'hidden' : 'visible'}`,
+        `ov-y--${scrollYVisible === false ? 'hidden' : 'visible'}`,
+        `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`,
+        `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`
+      ], {
+        'overflow-y': yThumbHeight,
+        'overflow-x': xThumbWidth
+      })
+    },
     computeScrollYThreshold () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
@@ -793,6 +955,12 @@ export default {
       }
       return cellOpts
     },
+    computeCellHeitht () {
+      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+
+      const cellOpts = $xeTable.computeCellOpts
+      return cellOpts.height
+    },
     computeHeaderCellOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
       const $xeGantt = $xeTable.$xeGantt
@@ -1290,16 +1458,16 @@ export default {
     computeTableStyle () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
-      const scrollbarOpts = $xeTable.computeScrollbarOpts
-      const { width, height } = scrollbarOpts
-      const tStys: VxeComponentStyleType = {}
-      if (width) {
-        tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width)
+      const barWidth = $xeTable.computeScrollYWidth
+      const barHeight = $xeTable.computeScrollXHeight
+      const stys: VxeComponentStyleType = {}
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(barHeight || barWidth)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
-      if (height) {
-        tStys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(height)
-      }
-      return tStys
+      return stys
     },
     computeTableRowExpandedList () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -1516,19 +1684,6 @@ export default {
     },
     computeVxeLanguage () {
       return VxeUI.getLanguage()
-    },
-    computeScrollbarVisible () {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-
-      const scrollbarXOpts = $xeTable.computeScrollbarXOpts
-      const scrollbarYOpts = $xeTable.computeScrollbarYOpts
-      return `${scrollbarXOpts.visible}${scrollbarYOpts.visible}`
-    },
-    computeCellConfHeitht () {
-      const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-
-      const cellOpts = $xeTable.computeCellOpts
-      return cellOpts.height
     }
   } as any,
   watch: {
@@ -1572,57 +1727,118 @@ export default {
     },
 
     computeSize () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     showHeader () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     showFooter () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     showHeaderOverflow () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     showOverflow () {
       const $xeTable = this
 
       updateColumnAllOverflow($xeTable)
-      this.reLayoutFlag++
+      $xeTable.reLayoutFlag++
     },
     showFooterOverflow () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     overflowX () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     overflowY () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     height () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     maxHeight () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
+    },
+    computeVxeLanguage () {
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     computeScrollbarXToTop () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
     },
     computeScrollbarYToLeft () {
-      this.reLayoutFlag++
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
     },
-    computeVxeLanguage () {
-      this.reLayoutFlag++
+    computeScrollXVisible () {
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
+    },
+    computeScrollYVisible () {
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
     },
-    computeScrollbarVisible () {
-      this.reLayoutFlag++
+    computeScrollXHeight () {
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
     },
-    computeCellConfHeitht () {
-      this.reLayoutFlag++
+    computeScrollYWidth () {
+      const $xeTable = this
+
+      $xeTable.reScrollFlag++
+      $xeTable.reLayoutFlag++
+    },
+    computeCellHeitht () {
+      const $xeTable = this
+
+      $xeTable.reLayoutFlag++
     },
     reLayoutFlag () {
       const $xeTable = this
 
-      $xeTable.$nextTick(() => $xeTable.recalculate(true))
+      $xeTable.$nextTick(() => {
+        $xeTable.recalculate(true)
+      })
+    },
+    reScrollFlag () {
+      const $xeTable = this
+
+      $xeTable.$nextTick(() => {
+        $xeTable.updateScrollbar()
+        $xeTable.$nextTick(() => {
+          $xeTable.updateScrollbar()
+        })
+      })
     },
 
     footerData () {
@@ -1764,6 +1980,7 @@ export default {
     const areaOpts = $xeTable.computeAreaOpts
     const sortOpts = $xeTable.computeSortOpts
     const filterOpts = $xeTable.computeFilterOpts
+    const scrollbarOpts = $xeTable.computeScrollbarOpts
     const { groupFields } = aggregateOpts
 
     if (props.rowId) {
@@ -2020,6 +2237,13 @@ export default {
     //   errLog('vxe.error.reqModule', ['Export'])
     // }
 
+    if (scrollbarOpts.x) {
+      warnLog('vxe.error.delProp', ['scrollbar-config.x', 'scrollbar-config.xConfig'])
+    }
+    if (scrollbarOpts.y) {
+      warnLog('vxe.error.delProp', ['scrollbar-config.y', 'scrollbar-config.yConfig'])
+    }
+
     Object.assign(scrollYStore, {
       startIndex: 0,
       endIndex: 1,
@@ -2094,6 +2318,9 @@ export default {
     }
 
     $xeTable.$nextTick(() => {
+      const { useScrollbar, autoResize } = props
+      const { elemStore } = internalData
+
       // 使用已安装的组件，如果未安装则不渲染
       const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
       const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
@@ -2139,15 +2366,34 @@ export default {
         }
       }
 
-      if (this.autoResize) {
+      const el = $xeTable.$refs.refElem as HTMLDivElement
+      if (useScrollbar) {
+        const viewInnerEl = getRefElem(elemStore['main-body-table'])
+        const scrollObserver = globalResize.create(() => {
+          $xeTable.reScrollFlag++
+        })
+        if (el) {
+          scrollObserver.observe(el)
+        }
+        if (viewInnerEl) {
+          scrollObserver.observe(viewInnerEl)
+        }
+        internalData.scrollObserver = scrollObserver
+      }
+      if (autoResize) {
+        const parentEl = $xeTable.getParentElem()
         const resizeObserver = globalResize.create(() => {
-          if (this.autoResize) {
-            this.layoutReFlag++
+          if (props.autoResize) {
+            $xeTable.handleResizeEvent()
           }
         })
-        resizeObserver.observe(this.$el)
-        resizeObserver.observe(this.getParentElem())
-        this.$resize = resizeObserver
+        if (el) {
+          resizeObserver.observe(el)
+        }
+        if (parentEl) {
+          resizeObserver.observe(parentEl)
+        }
+        internalData.resizeObserver = resizeObserver
       }
     })
 
@@ -2182,7 +2428,7 @@ export default {
     const reactData = $xeTable as unknown as TableReactData
     const internalData = $xeTable as unknown as TableInternalData
 
-    const { _sToTime } = internalData
+    const { scrollObserver, resizeObserver, _sToTime } = internalData
     if (_sToTime) {
       clearTimeout(_sToTime)
     }
@@ -2205,8 +2451,11 @@ export default {
       tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent)
     }
 
-    if (this.$resize) {
-      this.$resize.disconnect()
+    if (scrollObserver) {
+      scrollObserver.disconnect()
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect()
     }
 
     $xeTable.closeTooltip()
@@ -2248,7 +2497,7 @@ export default {
 
     const { xID } = $xeTable
 
-    const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
+    const { loading, stripe, useScrollbar, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules, importConfig, exportConfig, printConfig } = props
     const { isGroup, overflowX, overflowY, scrollXLoad, scrollYLoad, tableData, initStore, isRowGroupStatus, columnStore, filterStore, customStore, tooltipStore } = reactData
     const { leftList, rightList } = columnStore
     const loadingSlot = slots.loading
@@ -2296,7 +2545,7 @@ export default {
     }
     return h('div', {
       ref: 'refElem',
-      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
         [`size--${vSize}`]: vSize,
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
@@ -2364,15 +2613,20 @@ export default {
       h('div', {
         key: 'tw',
         class: 'vxe-table--render-wrapper'
-      }, scrollbarXToTop
-        ? [
-            renderScrollX(h, $xeTable),
-            renderBody(h, $xeTable)
-          ]
-        : [
-            renderBody(h, $xeTable),
-            renderScrollX(h, $xeTable)
-          ]),
+      }, useScrollbar
+        ? [renderVirtualBody(h, $xeTable)]
+        : (
+            scrollbarXToTop
+              ? [
+                  renderScrollX(h, $xeTable),
+                  renderNativeBody(h, $xeTable)
+                ]
+              : [
+                  renderNativeBody(h, $xeTable),
+                  renderScrollX(h, $xeTable)
+                ]
+          )
+      ),
       /**
        * 空数据
        */

package/packages/table/src/util.ts

@@ -49,9 +49,17 @@ export function createInternalData (): TableInternalData {
     currentRow: null,
     currentCol: null,
 
-    // 最后滚动位置
-    lastScrollLeft: 0,
+    // resizeObserver: undefined,
+
+    // 滚动条
+    // scrollObserver: undefined,
+    // isThumbDrag: false,
+    thumbDragOffset: 0,
+    yThumbTop: 0,
+    xThumbLeft: 0,
     lastScrollTop: 0,
+    lastScrollLeft: 0,
+
     // 单选框属性，已选中保留的行
     radioReserveRow: null,
     // 复选框属性，已选中保留的行集合
@@ -199,6 +207,11 @@ export function createReactData (): TableReactData {
     scrollbarWidth: 0,
     // 横向滚动条的高度
     scrollbarHeight: 0,
+
+    // 滚动条
+    yThumbHeight: 0,
+    xThumbWidth: 0,
+
     // 行高
     rowHeight: 0,
     // 表格父容器的高度

package/packages/ui/index.ts

@@ -270,16 +270,14 @@ VxeUI.setConfig({
       oSize: 0
     },
     scrollbarConfig: {
-      // width: 14,
-      // height: 14,
-      x: {
-        // position: 'bottom',
-        visible: true
-      },
-      y: {
-        // position: 'right',
-        visible: true
-      }
+      // xConfig: {
+      //   // position: 'bottom',
+      //   // visible: true
+      // },
+      // yConfig: {
+      //   // position: 'right',
+      //   // visible: true
+      // }
     },
     undoRedoHistoryConfig: {
       stackSize: 50