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

package/es/table/src/table.js

@@ -1,7 +1,7 @@
 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';
@@ -24,7 +24,7 @@ import keyboardMixin from '../module/keyboard/mixin';
 import validatorMixin from '../module/validator/mixin';
 import customMixin from '../module/custom/mixin';
 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, merges) {
     const internalData = $xeTable;
     internalData.mergeBodyList = [];
@@ -95,6 +95,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;
     const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
     const isFixedLeft = fixedType === 'left';
@@ -103,10 +105,15 @@ function renderViewFixed(h, $xeTable, fixedType) {
     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}`, {
+        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, {
@@ -398,6 +405,7 @@ function renderScrollX(h, $xeTable) {
 }
 function renderScrollY(h, $xeTable) {
     return h('div', {
+        key: 'vsy',
         ref: 'refScrollYVirtualElem',
         class: 'vxe-table--scroll-y-virtual'
     }, [
@@ -436,12 +444,15 @@ 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;
     const { overscrollBehavior: overscrollYBehavior } = scrollbarYOpts;
     const { leftList, rightList } = columnStore;
     const osXBehavior = XEUtils.eqNull(overscrollXBehavior) ? scrollbarOpts.overscrollBehavior : overscrollXBehavior;
     const osYBehavior = XEUtils.eqNull(overscrollYBehavior) ? scrollbarOpts.overscrollBehavior : overscrollYBehavior;
     return h('div', {
+        key: 'tvw',
         ref: 'refTableViewportElem',
         class: ['vxe-table--viewport-wrapper', {
                 [`x-ob--${osXBehavior}`]: osXBehavior,
@@ -449,7 +460,11 @@ function renderViewport(h, $xeTable) {
             }]
     }, [
         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'}`
+            ]
         }, [
             /**
                * 表头
@@ -496,9 +511,10 @@ function renderViewport(h, $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
         ? [
@@ -510,6 +526,84 @@ function renderBody(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
+                        }
+                    })
+                ])
+        ])
+    ]);
+}
 export default {
     name: 'VxeTable',
     mixins: [
@@ -553,7 +647,7 @@ export default {
         const reactData = createReactData();
         return Object.assign(Object.assign({ xID }, reactData), { 
             // 私有属性
-            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, kfFlag: 0, layoutReFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal });
+            reScrollFlag: 0, reLayoutFlag: 0, footFlag: 0, kfFlag: 0, layoutReFlag: 0, mergeFooteCellFlag: 0, crossTableDragRowInfo: crossTableDragRowGlobal, scrollDefaultConf: Object.assign({}, getConfig().scrollbar) });
     },
     computed: Object.assign(Object.assign({}, {}), { tableId() {
             return this.computeTableId;
@@ -656,18 +750,54 @@ export 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.toNumber(getDefaultConfig(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.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+        },
+        computeScrollXVisible() {
+            const $xeTable = this;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+            return getDefaultConfig(scrollbarXOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollYVisible() {
+            const $xeTable = this;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+            return getDefaultConfig(scrollbarYOpts.visible, scrollbarOpts.visible);
+        },
+        computeScrollXAutoHide() {
+            const $xeTable = this;
+            const scrollDefaultConf = $xeTable.scrollDefaultConf;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarXOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
+        },
+        computeScrollYAutoHide() {
+            const $xeTable = this;
+            const scrollDefaultConf = $xeTable.scrollDefaultConf;
+            const scrollbarOpts = $xeTable.computeScrollbarOpts;
+            const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
+            return getDefaultConfig(getDefaultConfig(scrollbarYOpts.autoHide, scrollbarOpts.autoHide), scrollDefaultConf.autoHide);
         },
         computeScrollbarXToTop() {
             const $xeTable = this;
@@ -679,6 +809,25 @@ export 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;
@@ -724,6 +873,11 @@ export default {
             }
             return cellOpts;
         },
+        computeCellHeitht() {
+            const $xeTable = this;
+            const cellOpts = $xeTable.computeCellOpts;
+            return cellOpts.height;
+        },
         computeHeaderCellOpts() {
             const $xeTable = this;
             const $xeGantt = $xeTable.$xeGantt;
@@ -1189,16 +1343,16 @@ export default {
         },
         computeTableStyle() {
             const $xeTable = this;
-            const scrollbarOpts = $xeTable.computeScrollbarOpts;
-            const { width, height } = scrollbarOpts;
-            const tStys = {};
-            if (width) {
-                tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width);
+            const barWidth = $xeTable.computeScrollYWidth;
+            const barHeight = $xeTable.computeScrollXHeight;
+            const stys = {};
+            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;
@@ -1399,17 +1553,6 @@ export default {
         },
         computeVxeLanguage() {
             return 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: {
         data(value) {
@@ -1450,55 +1593,98 @@ export 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++;
+        },
+        computeScrollXHeight() {
+            const $xeTable = this;
+            $xeTable.reScrollFlag++;
+            $xeTable.reLayoutFlag++;
         },
-        computeScrollbarVisible() {
-            this.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++;
@@ -1622,6 +1808,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) {
             warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
@@ -1870,6 +2057,12 @@ export 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,
@@ -1936,6 +2129,8 @@ export default {
             warnLog('vxe.error.reqProp', ['tooltip-config']);
         }
         $xeTable.$nextTick(() => {
+            const { useScrollbar, autoResize } = props;
+            const { elemStore } = internalData;
             // 使用已安装的组件，如果未安装则不渲染
             const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
             const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -1979,15 +2174,34 @@ export default {
                     errLog('vxe.error.reqComp', ['vxe-tooltip']);
                 }
             }
-            if (this.autoResize) {
+            const el = $xeTable.$refs.refElem;
+            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;
             }
         });
         if (virtualYOpts.mode !== 'scroll') {
@@ -2018,7 +2232,7 @@ export default {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { _sToTime } = internalData;
+        const { scrollObserver, resizeObserver, _sToTime } = internalData;
         if (_sToTime) {
             clearTimeout(_sToTime);
         }
@@ -2038,8 +2252,11 @@ export 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();
@@ -2073,7 +2290,7 @@ export default {
         const slots = $xeTable.$scopedSlots;
         const reactData = $xeTable;
         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;
@@ -2117,7 +2334,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,
@@ -2185,15 +2402,17 @@ 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/es/table/src/util.js

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

package/es/table/style.css

@@ -4024,4 +4024,34 @@ div.vxe-table--tooltip-wrapper.vxe-table--valid-error.old-cell-valid {
 }
 .vxe-table--footer-wrapper.body--wrapper {
   outline: 0;
+}
+
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-padding.overflow-x.sx-pos--top > .vxe-table--viewport-wrapper {
+  padding-top: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-padding.overflow-x.sx-pos--bottom > .vxe-table--viewport-wrapper {
+  padding-bottom: var(--vxe-ui-scrollbar-x-height);
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-padding.overflow-y.sy-pos--left > .vxe-table--viewport-wrapper {
+  padding-left: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-padding.overflow-y.sy-pos--right > .vxe-table--viewport-wrapper {
+  padding-right: var(--vxe-ui-scrollbar-y-width);
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-x--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 1;
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-x--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-x {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-y--auto-hide:hover > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 1;
+}
+.vxe-table--layout-wrapper.is--virtual-scrollbar.ov-y--auto-hide > .vxe-scrollbar > .vxe-scrollbar--track-y {
+  opacity: 0;
+  transition: opacity 0.8s ease-in-out;
+}
+.vxe-table--layout-wrapper > .vxe-scrollbar {
+  position: unset;
 }