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

package/lib/table/src/props.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.tableProps = void 0;
 var _ui = require("../../ui");
+var _utils = require("../../ui/src/utils");
 const {
   getConfig
 } = _ui.VxeUI;
@@ -312,6 +313,10 @@ const tableProps = exports.tableProps = {
   virtualXConfig: Object,
   // 纵向虚拟滚动配置项
   virtualYConfig: Object,
+  useScrollbar: {
+    type: Boolean,
+    default: () => (0, _utils.getDefaultConfig)(getConfig().table.useScrollbar, getConfig().useScrollbar)
+  },
   // 滚动条配置项
   scrollbarConfig: Object,
   // 撤销/恢复历史配置项

package/lib/table/src/props.min.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:!0}),exports.tableProps=void 0;var _ui=require("../../ui");let getConfig=_ui.VxeUI.getConfig,tableProps=exports.tableProps={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>null},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:null},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],showCustomHeader:{type:Boolean,default:()=>getConfig().table.showCustomHeader},mergeHeaderCells:Array,mergeCells:Array,mergeFooterCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,currentColumnConfig:Object,cellConfig:Object,headerCellConfig:Object,footerCellConfig:Object,rowConfig:Object,aggregateConfig:Object,aggregateAccuracyConfig:Object,rowGroupConfig:Object,currentRowConfig:Object,dragConfig:Object,rowDragConfig:Object,columnDragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,floatingFilterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,headerTooltipConfig:Object,footerTooltipConfig:Object,exportConfig:[Boolean,Object],importConfig:[Boolean,Object],printConfig:Object,expandConfig:Object,treeConfig:[Boolean,Object],menuConfig:[Boolean,Object],contextMenu:[Boolean,Object],mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:[Boolean,Object],editDirtyConfig:Object,validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:[Boolean,Object],customConfig:Object,scrollX:Object,scrollY:Object,virtualXConfig:Object,virtualYConfig:Object,scrollbarConfig:Object,undoRedoHistoryConfig:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},rendererConfig:Object,params:Object};
+Object.defineProperty(exports,"__esModule",{value:!0}),exports.tableProps=void 0;var _ui=require("../../ui"),_utils=require("../../ui/src/utils");let getConfig=_ui.VxeUI.getConfig,tableProps=exports.tableProps={id:[String,Function],data:Array,height:[Number,String],minHeight:{type:[Number,String],default:()=>null},maxHeight:[Number,String],resizable:{type:Boolean,default:()=>getConfig().table.resizable},stripe:{type:Boolean,default:()=>getConfig().table.stripe},border:{type:[Boolean,String],default:()=>getConfig().table.border},padding:{type:Boolean,default:null},round:{type:Boolean,default:()=>getConfig().table.round},size:{type:String,default:()=>getConfig().table.size||getConfig().size},fit:{type:Boolean,default:()=>getConfig().table.fit},loading:Boolean,align:{type:String,default:()=>getConfig().table.align},headerAlign:{type:String,default:()=>getConfig().table.headerAlign},footerAlign:{type:String,default:()=>getConfig().table.footerAlign},showHeader:{type:Boolean,default:()=>getConfig().table.showHeader},highlightCurrentRow:{type:Boolean,default:()=>getConfig().table.highlightCurrentRow},highlightHoverRow:{type:Boolean,default:()=>getConfig().table.highlightHoverRow},highlightCurrentColumn:{type:Boolean,default:()=>getConfig().table.highlightCurrentColumn},highlightHoverColumn:{type:Boolean,default:()=>getConfig().table.highlightHoverColumn},highlightCell:Boolean,showFooter:Boolean,footerData:Array,footerMethod:Function,rowClassName:[String,Function],cellClassName:[String,Function],headerRowClassName:[String,Function],headerCellClassName:[String,Function],footerRowClassName:[String,Function],footerCellClassName:[String,Function],cellStyle:[Object,Function],headerCellStyle:[Object,Function],footerCellStyle:[Object,Function],rowStyle:[Object,Function],headerRowStyle:[Object,Function],footerRowStyle:[Object,Function],showCustomHeader:{type:Boolean,default:()=>getConfig().table.showCustomHeader},mergeHeaderCells:Array,mergeCells:Array,mergeFooterCells:Array,mergeFooterItems:Array,spanMethod:Function,footerSpanMethod:Function,showOverflow:{type:[Boolean,String],default:()=>getConfig().table.showOverflow},showHeaderOverflow:{type:[Boolean,String],default:()=>getConfig().table.showHeaderOverflow},showFooterOverflow:{type:[Boolean,String],default:()=>getConfig().table.showFooterOverflow},columnKey:Boolean,rowKey:Boolean,rowId:{type:String,default:()=>getConfig().table.rowId},zIndex:Number,emptyText:{type:String,default:()=>getConfig().table.emptyText},keepSource:{type:Boolean,default:()=>getConfig().table.keepSource},autoResize:{type:Boolean,default:()=>getConfig().table.autoResize},syncResize:[Boolean,String,Number],resizeConfig:Object,columnConfig:Object,currentColumnConfig:Object,cellConfig:Object,headerCellConfig:Object,footerCellConfig:Object,rowConfig:Object,aggregateConfig:Object,aggregateAccuracyConfig:Object,rowGroupConfig:Object,currentRowConfig:Object,dragConfig:Object,rowDragConfig:Object,columnDragConfig:Object,resizableConfig:Object,seqConfig:Object,sortConfig:Object,filterConfig:Object,floatingFilterConfig:Object,radioConfig:Object,checkboxConfig:Object,tooltipConfig:Object,headerTooltipConfig:Object,footerTooltipConfig:Object,exportConfig:[Boolean,Object],importConfig:[Boolean,Object],printConfig:Object,expandConfig:Object,treeConfig:[Boolean,Object],menuConfig:[Boolean,Object],contextMenu:[Boolean,Object],mouseConfig:Object,areaConfig:Object,keyboardConfig:Object,clipConfig:Object,fnrConfig:Object,editConfig:[Boolean,Object],editDirtyConfig:Object,validConfig:Object,editRules:Object,loadingConfig:Object,emptyRender:[Boolean,Object],customConfig:Object,scrollX:Object,scrollY:Object,virtualXConfig:Object,virtualYConfig:Object,useScrollbar:{type:Boolean,default:()=>(0,_utils.getDefaultConfig)(getConfig().table.useScrollbar,getConfig().useScrollbar)},scrollbarConfig:Object,undoRedoHistoryConfig:Object,animat:{type:Boolean,default:()=>getConfig().table.animat},delayHover:{type:Number,default:()=>getConfig().table.delayHover},rendererConfig:Object,params:Object};

package/lib/table/src/scrollbar.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getScrollFromClick = getScrollFromClick;
+exports.getScrollFromDrag = getScrollFromDrag;
+exports.getThumbOffsetSize = getThumbOffsetSize;
+exports.getThumbSize = getThumbSize;
+/**
+ * 计算滚动条滑块的长度
+ */
+function getThumbSize(viewportSize, contentSize, trackSize) {
+  if (contentSize <= viewportSize) {
+    return 0;
+  }
+  const ratio = viewportSize / contentSize;
+  const ideal = trackSize * ratio;
+  return Math.max(20, Math.min(ideal, trackSize));
+}
+/**
+ * 计算滚动条滑块的偏移位置
+ */
+function getThumbOffsetSize(offsetSize, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0) {
+    return 0;
+  }
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxThumbOffset <= 0) {
+    return 0;
+  }
+  const clamped = Math.min(Math.max(offsetSize, 0), maxScroll);
+  const ratio = clamped / maxScroll;
+  return ratio * maxThumbOffset;
+}
+/**
+ * 根据点击轨道的位置，计算滑块的偏移位置
+ */
+function getScrollFromClick(clickPosition, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxThumbOffset = trackSize - thumbSize;
+  const maxScroll = contentSize - viewportSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = clickPosition - thumbSize / 2;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  const scrollOffset = thumbOffset / maxThumbOffset * maxScroll;
+  return scrollOffset;
+}
+/**
+ * 拖拽 thumb 时，根据鼠标位置计算滑块的偏移位置
+ */
+function getScrollFromDrag(pointerPosition, dragOffset, viewportSize, contentSize, trackSize, thumbSize) {
+  const maxScroll = contentSize - viewportSize;
+  const maxThumbOffset = trackSize - thumbSize;
+  if (maxScroll <= 0 || maxThumbOffset <= 0) {
+    return 0;
+  }
+  let thumbOffset = pointerPosition - dragOffset;
+  thumbOffset = Math.min(Math.max(thumbOffset, 0), maxThumbOffset);
+  return thumbOffset / maxThumbOffset * maxScroll;
+}

package/lib/table/src/scrollbar.min.js

@@ -0,0 +1 @@
+function getThumbSize(t,e,r){return e<=t?0:Math.max(20,Math.min(r*(t/e),r))}function getThumbOffsetSize(t,e,r,o,m){r-=e;return r<=0||(e=o-m)<=0?0:Math.min(Math.max(t,0),r)/r*e}function getScrollFromClick(t,e,r,o,m){o-=m,r-=e;return r<=0||o<=0?0:(e=t-m/2,(e=Math.min(Math.max(e,0),o))/o*r)}function getScrollFromDrag(t,e,r,o,m,i){o-=r,r=m-i;return o<=0||r<=0?0:(m=t-e,(m=Math.min(Math.max(m,0),r))/r*o)}Object.defineProperty(exports,"__esModule",{value:!0}),exports.getScrollFromClick=getScrollFromClick,exports.getScrollFromDrag=getScrollFromDrag,exports.getThumbOffsetSize=getThumbOffsetSize,exports.getThumbSize=getThumbSize;

package/lib/table/src/table.js

@@ -41,6 +41,7 @@ const {
   renderer,
   globalResize,
   globalEvents,
+  domUtils,
   globalMixins,
   renderEmptyElement
 } = _ui.VxeUI;
@@ -130,6 +131,8 @@ function renderViewFixed(h, $xeTable, fixedType) {
   const scrollbarOpts = $xeTable.computeScrollbarOpts;
   const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
   const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+  const scrollXVisible = $xeTable.computeScrollXVisible;
+  const scrollYVisible = $xeTable.computeScrollYVisible;
   const {
     overscrollBehavior: overscrollXBehavior
   } = scrollbarXOpts;
@@ -142,7 +145,7 @@ function renderViewFixed(h, $xeTable, fixedType) {
   const osYBehavior = _xeUtils.default.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
   return h('div', {
     ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
-    class: [`vxe-table--fixed-${fixedType}-wrapper`, `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`, {
+    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
     }]
@@ -434,6 +437,7 @@ function renderScrollX(h, $xeTable) {
 }
 function renderScrollY(h, $xeTable) {
   return h('div', {
+    key: 'vsy',
     ref: 'refScrollYVirtualElem',
     class: 'vxe-table--scroll-y-virtual'
   }, [h('div', {
@@ -474,6 +478,8 @@ function renderViewport(h, $xeTable) {
   const scrollbarOpts = $xeTable.computeScrollbarOpts;
   const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
   const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+  const scrollXVisible = $xeTable.computeScrollXVisible;
+  const scrollYVisible = $xeTable.computeScrollYVisible;
   const {
     overscrollBehavior: overscrollXBehavior
   } = scrollbarXOpts;
@@ -487,13 +493,14 @@ function renderViewport(h, $xeTable) {
   const osXBehavior = _xeUtils.default.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior;
   const osYBehavior = _xeUtils.default.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
   return h('div', {
+    key: 'tvw',
     ref: 'refTableViewportElem',
     class: ['vxe-table--viewport-wrapper', {
       [`x-ob--${osXBehavior}`]: osXBehavior,
       [`y-ob--${osYBehavior}`]: osYBehavior
     }]
   }, [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'}`]
   }, [
   /**
      * 表头
@@ -529,12 +536,82 @@ function renderViewport(h, $xeTable) {
     class: 'vxe-table--fixed-wrapper'
   }, [leftList && leftList.length && overflowX ? renderViewFixed(h, $xeTable, 'left') : renderEmptyElement($xeTable), rightList && rightList.length && overflowX ? renderViewFixed(h, $xeTable, 'right') : renderEmptyElement($xeTable)]), renderRowExpandedVNs(h, $xeTable)]);
 }
-function renderBody(h, $xeTable) {
+function renderNativeBody(h, $xeTable) {
   const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
   return h('div', {
+    key: 'lnb',
     class: 'vxe-table--layout-wrapper'
   }, scrollbarYToLeft ? [renderScrollY(h, $xeTable), renderViewport(h, $xeTable)] : [renderViewport(h, $xeTable), renderScrollY(h, $xeTable)]);
 }
+function renderVirtualBody(h, $xeTable) {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const internalData = $xeTable;
+  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.clickTrackXEvent
+    }
+  }, [h('div', {
+    ref: 'refThumbXElem',
+    class: 'vxe-scrollbar--thumb-x',
+    on: {
+      pointerdown: $xeTable.pointerdownThumbXEvent,
+      pointermove: $xeTable.pointermoveThumbXEvent,
+      pointerup: $xeTable.cleatPointerThumbEvent,
+      pointercancel: $xeTable.cleatPointerThumbEvent,
+      lostpointercapture: $xeTable.cleatPointerThumbEvent
+    }
+  })]), hideYScroll || $xeGantt && $xeGanttView && $xeGantt.reactData.showRightView && !scrollbarYToLeft ? renderEmptyElement($xeTable) : h('div', {
+    ref: 'refTrackYElem',
+    class: 'vxe-scrollbar--track-y',
+    on: {
+      click: $xeTable.clickTrackYEvent
+    }
+  }, [h('div', {
+    ref: 'refThumbYElem',
+    class: 'vxe-scrollbar--thumb-y',
+    on: {
+      pointerdown: $xeTable.pointerdownThumbYEvent,
+      pointermove: $xeTable.pointermoveThumbYEvent,
+      pointerup: $xeTable.cleatPointerThumbEvent,
+      pointercancel: $xeTable.cleatPointerThumbEvent,
+      lostpointercapture: $xeTable.cleatPointerThumbEvent
+    }
+  })])])]);
+}
 var _default = exports.default = {
   name: 'VxeTable',
   mixins: [globalMixins.sizeMixin, _mixin.default, _mixin2.default, _mixin3.default, _mixin4.default, _mixin5.default, _mixin6.default, _mixin7.default],
@@ -577,7 +654,8 @@ var _default = exports.default = {
       kfFlag: 0,
       layoutReFlag: 0,
       mergeFooteCellFlag: 0,
-      crossTableDragRowInfo: _store.crossTableDragRowGlobal
+      crossTableDragRowInfo: _store.crossTableDragRowGlobal,
+      scrollDefaultConf: Object.assign({}, getConfig().scrollbar)
     });
   },
   computed: Object.assign(Object.assign({}, {}), {
@@ -696,18 +774,54 @@ var _default = exports.default = {
       return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
     },
     computeScrollbarXOpts() {
-      var _a;
       const $xeTable = this;
-      const props = $xeTable;
       const scrollbarOpts = $xeTable.computeScrollbarOpts;
-      return Object.assign({}, scrollbarOpts.x, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.x) || {});
+      return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : scrollbarOpts.xConfig || {};
     },
     computeScrollbarYOpts() {
-      var _a;
       const $xeTable = this;
-      const props = $xeTable;
       const scrollbarOpts = $xeTable.computeScrollbarOpts;
-      return Object.assign({}, scrollbarOpts.y, ((_a = props.scrollbarConfig) === null || _a === void 0 ? void 0 : _a.y) || {});
+      return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : scrollbarOpts.yConfig || {};
+    },
+    computeScrollXHeight() {
+      const $xeTable = this;
+      const scrollDefaultConf = $xeTable.scrollDefaultConf;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+      return _xeUtils.default.toNumber((0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
+    },
+    computeScrollYWidth() {
+      const $xeTable = this;
+      const scrollDefaultConf = $xeTable.scrollDefaultConf;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+      return _xeUtils.default.toNumber((0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+    },
+    computeScrollXVisible() {
+      const $xeTable = this;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)(scrollbarXOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollYVisible() {
+      const $xeTable = this;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+      return (0, _utils.getDefaultConfig)(scrollbarYOpts.visible, scrollbarOpts.visible);
+    },
+    computeScrollXAutoHide() {
+      const $xeTable = this;
+      const scrollDefaultConf = $xeTable.scrollDefaultConf;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+    },
+    computeScrollYAutoHide() {
+      const $xeTable = this;
+      const scrollDefaultConf = $xeTable.scrollDefaultConf;
+      const scrollbarOpts = $xeTable.computeScrollbarOpts;
+      const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+      return (0, _utils.getDefaultConfig)((0, _utils.getDefaultConfig)(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
     },
     computeScrollbarXToTop() {
       const $xeTable = this;
@@ -719,6 +833,22 @@ var _default = exports.default = {
       const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
       return scrollbarYOpts.position === 'left';
     },
+    computeScrollbarWrapperClss() {
+      const $xeTable = this;
+      const reactData = $xeTable;
+      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;
       const virtualYOpts = $xeTable.computeVirtualYOpts;
@@ -766,6 +896,11 @@ var _default = exports.default = {
       }
       return cellOpts;
     },
+    computeCellHeitht() {
+      const $xeTable = this;
+      const cellOpts = $xeTable.computeCellOpts;
+      return cellOpts.height;
+    },
     computeHeaderCellOpts() {
       const $xeTable = this;
       const $xeGantt = $xeTable.$xeGantt;
@@ -1286,19 +1421,16 @@ var _default = exports.default = {
     },
     computeTableStyle() {
       const $xeTable = this;
-      const scrollbarOpts = $xeTable.computeScrollbarOpts;
-      const {
-        width,
-        height
-      } = scrollbarOpts;
-      const tStys = {};
-      if (width) {
-        tStys['--vxe-ui-table-view-scrollbar-width'] = (0, _dom.toCssUnit)(width);
-      }
-      if (height) {
-        tStys['--vxe-ui-table-view-scrollbar-height'] = (0, _dom.toCssUnit)(height);
+      const barWidth = $xeTable.computeScrollYWidth;
+      const barHeight = $xeTable.computeScrollXHeight;
+      const stys = {};
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-table-view-scrollbar-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
+        stys['--vxe-ui-scrollbar-y-width'] = (0, _dom.toCssUnit)(barWidth || barHeight);
+        stys['--vxe-ui-table-view-scrollbar-height'] = (0, _dom.toCssUnit)(barHeight || barWidth);
+        stys['--vxe-ui-scrollbar-x-height'] = (0, _dom.toCssUnit)(barHeight || barWidth);
       }
-      return tStys;
+      return stys;
     },
     computeTableRowExpandedList() {
       const $xeTable = this;
@@ -1556,17 +1688,6 @@ var _default = exports.default = {
     },
     computeVxeLanguage() {
       return _ui.VxeUI.getLanguage();
-    },
-    computeScrollbarVisible() {
-      const $xeTable = this;
-      const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
-      const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
-      return `${scrollbarXOpts.visible}${scrollbarYOpts.visible}`;
-    },
-    computeCellConfHeitht() {
-      const $xeTable = this;
-      const cellOpts = $xeTable.computeCellOpts;
-      return cellOpts.height;
     }
   }),
   watch: {
@@ -1614,55 +1735,98 @@ var _default = exports.default = {
       this.$nextTick().then(() => this.refreshColumn());
     },
     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++;
+    },
+    computeScrollYWidth() {
+      const $xeTable = this;
+      $xeTable.reScrollFlag++;
+      $xeTable.reLayoutFlag++;
     },
-    computeCellConfHeitht() {
-      this.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() {
       this.footFlag++;
@@ -1800,6 +1964,7 @@ var _default = exports.default = {
     const areaOpts = $xeTable.computeAreaOpts;
     const sortOpts = $xeTable.computeSortOpts;
     const filterOpts = $xeTable.computeFilterOpts;
+    const scrollbarOpts = $xeTable.computeScrollbarOpts;
     const {
       groupFields
     } = aggregateOpts;
@@ -2050,6 +2215,12 @@ var _default = exports.default = {
     // if ((hasEnableConf(printConfig, printOpts) || hasEnableConf(importConfig, importOpts) || hasEnableConf(exportConfig, exportOpts)) && !$xeTable.exportData) {
     //   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,
@@ -2118,6 +2289,13 @@ var _default = exports.default = {
       warnLog('vxe.error.reqProp', ['tooltip-config']);
     }
     $xeTable.$nextTick(() => {
+      const {
+        useScrollbar,
+        autoResize
+      } = props;
+      const {
+        elemStore
+      } = internalData;
       // 使用已安装的组件，如果未安装则不渲染
       const VxeUILoadingComponent = _ui.VxeUI.getComponent('VxeLoading');
       const VxeUITooltipComponent = _ui.VxeUI.getComponent('VxeTooltip');
@@ -2165,15 +2343,34 @@ var _default = exports.default = {
           errLog('vxe.error.reqComp', ['vxe-tooltip']);
         }
       }
-      if (this.autoResize) {
+      const el = $xeTable.$refs.refElem;
+      if (useScrollbar) {
+        const viewInnerEl = (0, _util.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;
       }
     });
     if (virtualYOpts.mode !== 'scroll') {
@@ -2209,6 +2406,8 @@ var _default = exports.default = {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const {
+      scrollObserver,
+      resizeObserver,
       _sToTime
     } = internalData;
     if (_sToTime) {
@@ -2230,8 +2429,11 @@ var _default = exports.default = {
     if (tableViewportEl) {
       tableViewportEl.removeEventListener('wheel', $xeTable.triggerBodyWheelEvent);
     }
-    if (this.$resize) {
-      this.$resize.disconnect();
+    if (scrollObserver) {
+      scrollObserver.disconnect();
+    }
+    if (resizeObserver) {
+      resizeObserver.disconnect();
     }
     $xeTable.closeTooltip();
     $xeTable.closeFilter();
@@ -2270,6 +2472,7 @@ var _default = exports.default = {
     const {
       loading,
       stripe,
+      useScrollbar,
       showHeader,
       height,
       treeConfig,
@@ -2345,7 +2548,7 @@ var _default = exports.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,
@@ -2406,7 +2609,7 @@ var _default = exports.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)]),
     /**
      * 空数据
      */