vxe-table 3.25.0-beta.1 → 3.25.0-beta.3

package/es/table/src/table.js

@@ -1,7 +1,7 @@
 import XEUtils from 'xe-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';
@@ -105,8 +107,8 @@ function renderViewFixed(h, $xeTable, fixedType) {
         ref: isFixedLeft ? 'refLeftContainer' : 'refRightContainer',
         class: [
             `vxe-table--fixed-${fixedType}-wrapper`,
-            `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
-            `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+            `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+            `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`,
             {
                 [`x-ob--${osXBehavior}`]: osXBehavior,
                 [`y-ob--${osYBehavior}`]: osYBehavior
@@ -403,6 +405,7 @@ function renderScrollX(h, $xeTable) {
 }
 function renderScrollY(h, $xeTable) {
     return h('div', {
+        key: 'vsy',
         ref: 'refScrollYVirtualElem',
         class: 'vxe-table--scroll-y-virtual'
     }, [
@@ -441,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,
@@ -456,8 +462,8 @@ function renderViewport(h, $xeTable) {
         h('div', {
             class: [
                 'vxe-table--main-wrapper',
-                `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
-                `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`
+                `sx--${(scrollXVisible === false || scrollXVisible === 'hidden') ? 'hidden' : 'visible'}`,
+                `sy--${(scrollYVisible === false || scrollYVisible === 'hidden') ? 'hidden' : 'visible'}`
             ]
         }, [
             /**
@@ -505,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
         ? [
@@ -519,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: [
@@ -560,9 +645,9 @@ export default {
     data() {
         const xID = XEUtils.uniqueId();
         const reactData = createReactData();
-        return Object.assign(Object.assign(Object.assign(Object.assign({}, {}), { xID }), reactData), { 
+        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;
@@ -674,6 +759,46 @@ export default {
             const scrollbarOpts = $xeTable.computeScrollbarOpts;
             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;
             const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
@@ -684,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;
@@ -729,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;
@@ -843,7 +992,8 @@ export default {
         computeTooltipOpts() {
             const $xeTable = this;
             const props = $xeTable;
-            return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
+            const { useScrollbar } = props;
+            return Object.assign({ useScrollbar }, getConfig().tooltip, getConfig().table.tooltipConfig, props.tooltipConfig);
         },
         tipConfig() {
             return Object.assign({}, this.tooltipOpts);
@@ -1194,12 +1344,8 @@ export default {
         },
         computeTableStyle() {
             const $xeTable = this;
-            const scrollDefaultConf = $xeTable.scrollDefaultConf;
-            const scrollbarOpts = $xeTable.computeScrollbarOpts;
-            const scrollbarXOpts = $xeTable.computeScrollbarXOpts;
-            const scrollbarYOpts = $xeTable.computeScrollbarYOpts;
-            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width);
-            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height);
+            const barWidth = $xeTable.computeScrollYWidth;
+            const barHeight = $xeTable.computeScrollXHeight;
             const stys = {};
             if (barWidth || barHeight) {
                 stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight);
@@ -1408,17 +1554,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) {
@@ -1459,55 +1594,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++;
         },
-        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++;
@@ -1607,7 +1785,6 @@ export default {
         const $xeTable = this;
         const props = $xeTable;
         const internalData = $xeTable;
-        $xeTable.scrollDefaultConf = Object.assign({}, getConfig().scrollbar);
         XEUtils.assign(internalData, createInternalData());
         handleKeyField($xeTable);
         const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props;
@@ -1953,6 +2130,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');
@@ -1996,15 +2175,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') {
@@ -2035,7 +2233,7 @@ export default {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
-        const { _sToTime } = internalData;
+        const { scrollObserver, resizeObserver, _sToTime } = internalData;
         if (_sToTime) {
             clearTimeout(_sToTime);
         }
@@ -2055,8 +2253,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();
@@ -2202,15 +2403,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)
+                    ])),
             /**
              * 空数据
              */
@@ -2387,7 +2590,8 @@ export default {
                         ref: 'refCommTooltip',
                         props: {
                             isArrow: false,
-                            enterable: false
+                            enterable: false,
+                            useScrollbar
                         }
                     })
                     : renderEmptyElement($xeTable),
@@ -2414,7 +2618,8 @@ export default {
                             maxHeight: tableTipConfig.maxHeight,
                             placement: tableTipConfig.placement,
                             defaultPlacement: tableTipConfig.defaultPlacement,
-                            popupClassName: tableTipConfig.popupClassName
+                            popupClassName: tableTipConfig.popupClassName,
+                            useScrollbar: tableTipConfig.useScrollbar
                         },
                         scopedSlots: currTooltipSlot
                             ? {
@@ -2457,7 +2662,8 @@ export default {
                             theme: validTipConfig.theme,
                             enterable: validTipConfig.enterable,
                             enterDelay: validTipConfig.enterDelay,
-                            leaveDelay: validTipConfig.leaveDelay
+                            leaveDelay: validTipConfig.leaveDelay,
+                            useScrollbar
                         }
                     })
                     : renderEmptyElement($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;
 }