vxe-table 4.22.4 → 4.23.0-beta.1

package/es/table/src/table.js

@@ -2,7 +2,7 @@ import { h, reactive, ref, provide, inject, nextTick, Teleport, onActivated, onD
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, wheelScrollTopTo, wheelScrollLeftTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement, hasAxternalInputTarget } from '../../ui/src/dom';
-import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils';
+import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue, hasEnableConf, getDefaultConfig } from '../../ui/src/utils';
 import { VxeUI } from '../../ui';
 import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, getColReMaxWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn, getRowMaxHeight, handleCustomStoreConfig, encodeRowid } from './util';
 import { getSlotVNs } from '../../ui/src/vn';
@@ -44,6 +44,7 @@ export default defineVxeComponent({
         const { slots, emit } = context;
         const xID = XEUtils.uniqueId();
         const browseObj = XEUtils.browse();
+        const scrollDefaultConf = Object.assign({}, getConfig().scrollbar);
         // 使用已安装的组件，如果未安装则不渲染
         const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading');
         const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip');
@@ -186,14 +187,12 @@ export default defineVxeComponent({
             return Object.assign({}, getConfig().table.scrollbarConfig, props.scrollbarConfig);
         });
         const computeScrollbarXOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            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 || {});
         });
         const computeScrollbarYOpts = computed(() => {
-            var _a;
             const scrollbarOpts = computeScrollbarOpts.value;
-            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 || {});
         });
         const computeScrollbarXToTop = computed(() => {
             const scrollbarXOpts = computeScrollbarXOpts.value;
@@ -540,15 +539,18 @@ export default defineVxeComponent({
         });
         const computeTableStyle = computed(() => {
             const scrollbarOpts = computeScrollbarOpts.value;
-            const { width, height } = scrollbarOpts;
-            const tStys = {};
-            if (width) {
-                tStys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(width);
-            }
-            if (height) {
-                tStys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(height);
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
+            const barWidth = getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width);
+            const barHeight = getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height);
+            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);
             }
-            return tStys;
+            return stys;
         });
         const computeTableRowExpandedList = computed(() => {
             const { tableData, rowExpandedFlag, expandColumn, rowGroupExpandedFlag, treeExpandedFlag } = reactData;
@@ -2461,7 +2463,6 @@ export default defineVxeComponent({
             const isHeaderRenderOptimize = computeIsHeaderRenderOptimize.value;
             const isBodyRenderOptimize = computeIsBodyRenderOptimize.value;
             const isFooterRenderOptimize = computeIsFooterRenderOptimize.value;
-            const scrollbarOpts = computeScrollbarOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
             const bodyTableElem = getRefElem(elemStore['main-body-table']);
@@ -2469,24 +2470,26 @@ export default defineVxeComponent({
                 emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
-            const scrollbarXConf = scrollbarOpts.x || {};
-            const scrollbarYConf = scrollbarOpts.y || {};
+            const scrollbarXOpts = computeScrollbarXOpts.value;
+            const scrollbarYOpts = computeScrollbarYOpts.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-            if (scrollbarXConf.visible === 'visible' || $xeGanttView) {
+            const hideXScroll = scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden';
+            if (!hideXScroll || $xeGanttView) {
                 osbHeight = scrollbarHeight;
                 xScrollbarVisible = 'visible';
             }
-            else if (scrollbarXConf.visible === 'hidden' || scrollbarXConf.visible === false) {
+            else if (hideXScroll) {
                 osbHeight = 0;
                 xScrollbarVisible = 'hidden';
             }
             let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-            if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
+            const showYScroll = !(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden');
+            if (!showYScroll || (($xeGantt && $xeGanttView && $xeGantt.reactData.showRightView) && !scrollbarYToLeft)) {
                 osbWidth = 0;
                 yScrollbarVisible = 'hidden';
             }
-            else if (scrollbarYConf.visible === 'visible') {
+            else if (showYScroll) {
                 osbWidth = scrollbarWidth;
                 yScrollbarVisible = 'visible';
             }
@@ -2720,7 +2723,7 @@ export default defineVxeComponent({
             if (currentRow) {
                 $xeTable.setCurrentRow(currentRow);
             }
-            if (mouseConfig && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
+            if (hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.selected && editStore.selected.row && editStore.selected.column) {
                 $xeTable.addCellSelectedClass();
             }
             if ($xeGanttView && $xeGanttView.handleUpdateStyle) {
@@ -3307,14 +3310,18 @@ export default defineVxeComponent({
             let overflowY = false;
             let overflowX = false;
             if (bodyWrapperElem) {
+                const scrollbarXOpts = computeScrollbarXOpts.value;
+                const scrollbarYOpts = computeScrollbarYOpts.value;
+                const barWidth = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarYOpts.width, scrollbarOpts.width), scrollDefaultConf.width));
+                const barHeight = XEUtils.toNumber(getDefaultConfig(getDefaultConfig(scrollbarXOpts.height, scrollbarOpts.height), scrollDefaultConf.height));
                 overflowY = scrollYHeight > bodyWrapperElem.clientHeight;
                 if (yHandleEl) {
-                    reactData.scrollbarWidth = scrollbarOpts.width || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
+                    reactData.scrollbarWidth = (barWidth || barHeight) || (yHandleEl.offsetWidth - yHandleEl.clientWidth) || 14;
                 }
                 reactData.overflowY = overflowY;
                 overflowX = scrollXWidth > bodyWrapperElem.clientWidth;
                 if (xHandleEl) {
-                    reactData.scrollbarHeight = scrollbarOpts.height || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
+                    reactData.scrollbarHeight = (barHeight || barWidth) || (xHandleEl.offsetHeight - xHandleEl.clientHeight) || 14;
                 }
                 const hHeight = headerTableElem ? headerTableElem.clientHeight : 0;
                 const fHeight = footerTableElem ? footerTableElem.clientHeight : 0;
@@ -3724,12 +3731,13 @@ export default defineVxeComponent({
          * @param {Array} datas 数据
          */
         const loadTableData = (datas, isReload, isReset) => {
-            const { keepSource, treeConfig, rowGroupConfig, aggregateConfig } = props;
+            const { keepSource, treeConfig, rowGroupConfig, aggregateConfig, mouseConfig } = props;
             const { rowGroupList, scrollYLoad: oldScrollYLoad } = reactData;
             const { initStatus, scrollYStore, scrollXStore, lastScrollLeft, lastScrollTop } = internalData;
             const rowOpts = computeRowOpts.value;
             const treeOpts = computeTreeOpts.value;
             const expandOpts = computeExpandOpts.value;
+            const mouseOpts = computeMouseOpts.value;
             const { transform } = treeOpts;
             const childrenField = treeOpts.children || treeOpts.childrenField;
             let treeData = [];
@@ -3819,7 +3827,7 @@ export default defineVxeComponent({
             if (keepSource) {
                 $xeTable.cacheSourceMap(fullData);
             }
-            if ($xeTable.clearCellAreas && props.mouseConfig) {
+            if ($xeTable.clearCellAreas && hasEnableConf(mouseConfig, mouseOpts)) {
                 $xeTable.clearCellAreas();
                 $xeTable.clearCopyCellArea();
             }
@@ -6776,7 +6784,7 @@ export default defineVxeComponent({
             setCurrentColumn(fieldOrColumn) {
                 const { mouseConfig } = props;
                 const mouseOpts = computeMouseOpts.value;
-                const isMouseSelected = mouseConfig && mouseOpts.selected;
+                const isMouseSelected = hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.selected;
                 const column = handleFieldOrColumn($xeTable, fieldOrColumn);
                 if (column) {
                     $xeTable.clearCurrentColumn();
@@ -8023,7 +8031,7 @@ export default defineVxeComponent({
             updateCellAreas() {
                 const { mouseConfig } = props;
                 const mouseOpts = computeMouseOpts.value;
-                if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreaEvent) {
+                if (hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleRecalculateCellAreaEvent) {
                     return $xeTable.handleRecalculateCellAreaEvent();
                 }
                 return nextTick();
@@ -8282,6 +8290,7 @@ export default defineVxeComponent({
             const editOpts = computeEditOpts.value;
             const validOpts = computeValidOpts.value;
             const areaOpts = computeAreaOpts.value;
+            const mouseOpts = computeMouseOpts.value;
             const { actived } = editStore;
             const $validTooltip = refValidTooltip.value;
             const tableFilter = refTableFilter.value;
@@ -8378,7 +8387,7 @@ export default defineVxeComponent({
                     }
                 }
             }
-            else if (mouseConfig) {
+            else if (hasEnableConf(mouseConfig, mouseOpts)) {
                 if (!getEventTargetNode(evnt, el).flag && !($xeGGWrapper && getEventTargetNode(evnt, $xeGGWrapper.getRefMaps().refElem.value).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.getRefMaps().refElem.value).flag) && !($xeToolbar && getEventTargetNode(evnt, $xeToolbar.getRefMaps().refElem.value).flag)) {
                     if ($xeTable.clearSelected) {
                         $xeTable.clearSelected();
@@ -8465,7 +8474,7 @@ export default defineVxeComponent({
             if (isEsc) {
                 $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
                     dispatchEvent('keydown-start', {}, evnt);
-                    if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
+                    if (hasEnableConf(keyboardConfig, keyboardOpts) && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
                         $xeTable.handleKdClAreaEvent(evnt);
                     }
                     else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
@@ -8475,7 +8484,7 @@ export default defineVxeComponent({
                             $xeTable.closeMenu();
                         }
                         $xeTable.closeFilter();
-                        if (keyboardConfig && keyboardOpts.isEsc) {
+                        if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isEsc) {
                             // 如果是激活编辑状态，则取消编辑
                             if (actived.row) {
                                 const params = actived.args;
@@ -8552,7 +8561,7 @@ export default defineVxeComponent({
                             $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selected', isRightArrow, true, menuList);
                         }
                     }
-                    else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
+                    else if (hasEnableConf(keyboardConfig, keyboardOpts) && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
                         $xeTable.handleKdClAreaEvent(evnt);
                     }
                     else if (isEsc) {
@@ -8561,7 +8570,7 @@ export default defineVxeComponent({
                             $xeTable.closeMenu();
                         }
                         $xeTable.closeFilter();
-                        if (keyboardConfig && keyboardOpts.isEsc) {
+                        if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isEsc) {
                             // 如果是激活编辑状态，则取消编辑
                             if (actived.row) {
                                 const params = actived.args;
@@ -8573,7 +8582,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (isSpacebar && keyboardConfig && keyboardOpts.isChecked && selectRow && selectColumn && (selectColumn.type === 'checkbox' || selectColumn.type === 'radio')) {
+                    else if (isSpacebar && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isChecked && selectRow && selectColumn && (selectColumn.type === 'checkbox' || selectColumn.type === 'radio')) {
                         // 空格键支持选中复选框
                         evnt.preventDefault();
                         if (selectColumn.type === 'checkbox') {
@@ -8600,7 +8609,7 @@ export default defineVxeComponent({
                             internalData._keyCtx = false;
                         }, 1000);
                     }
-                    else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selectRow || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
+                    else if (isEnter && !isAltKey && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isEnter && (selectRow || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
                         // 退出选中
                         if (isControlKey) {
                             // 如果是激活编辑状态，则取消编辑
@@ -8728,7 +8737,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (operArrow && keyboardConfig && keyboardOpts.isArrow) {
+                    else if (operArrow && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isArrow) {
                         if (!isEditStatus) {
                             // 如果按下了方向键
                             if (mouseOpts.selected && selectRow && selectColumn) {
@@ -8746,7 +8755,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (isTab && keyboardConfig && keyboardOpts.isTab) {
+                    else if (isTab && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isTab) {
                         // 如果按下了 Tab 键切换
                         if (selectRow || actived.row) {
                             const activeRow = selectRow || actived.row;
@@ -8796,7 +8805,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selectRow || selectColumn)) {
+                    else if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selectRow || selectColumn)) {
                         // 如果是删除键
                         if (!isEditStatus) {
                             const { delMethod } = keyboardOpts;
@@ -8827,7 +8836,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selectRow || selectColumn)) {
+                    else if (hasBackspaceKey && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isBack && isEnableConf(editConfig) && (selectRow || selectColumn)) {
                         if (!isEditStatus) {
                             const { backMethod } = keyboardOpts;
                             // 如果是删除键
@@ -8860,7 +8869,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (hasBackspaceKey && keyboardConfig && treeConfig && keyboardOpts.isBack && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
+                    else if (hasBackspaceKey && hasEnableConf(keyboardConfig, keyboardOpts) && treeConfig && keyboardOpts.isBack && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
                         // 如果树形表格回退键关闭当前行返回父节点
                         const { parent: parentRow } = XEUtils.findTree(internalData.afterTreeFullData, item => item === currentRow, { children: childrenField });
                         if (parentRow) {
@@ -8878,7 +8887,7 @@ export default defineVxeComponent({
                                 .then(() => $xeTable.triggerCurrentRowEvent(evnt, params));
                         }
                     }
-                    else if (keyboardConfig && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasAxternalInputTarget(evnt.target)) {
+                    else if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isUndoRedo && isControlKey && (isZ || isY) && !hasAxternalInputTarget(evnt.target)) {
                         if (evnt.target) {
                             if (isY || (hasShiftKey && isZ)) {
                                 // 恢复被撤销的操作：Ctrl + Y 或 Ctrl + Shift + Z
@@ -8892,7 +8901,7 @@ export default defineVxeComponent({
                             }
                         }
                     }
-                    else if (keyboardConfig && isEnableConf(editConfig) && keyboardOpts.isEdit && !isControlKey && (isSpacebar || isProcess || evnt.key === 'Process' || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
+                    else if (hasEnableConf(keyboardConfig, keyboardOpts) && isEnableConf(editConfig) && keyboardOpts.isEdit && !isControlKey && (isSpacebar || isProcess || evnt.key === 'Process' || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
                         const { editMode, editMethod } = keyboardOpts;
                         // 启用编辑后，空格键功能将失效
                         // if (isSpacebar) {
@@ -8944,7 +8953,7 @@ export default defineVxeComponent({
             const { actived } = editStore;
             if (isActivated && !filterStore.visible) {
                 if (!(actived.row || actived.column)) {
-                    if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handlePeClAreaEvent) {
+                    if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isClip && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handlePeClAreaEvent) {
                         $xeTable.handlePeClAreaEvent(evnt);
                     }
                 }
@@ -8960,7 +8969,7 @@ export default defineVxeComponent({
             const { actived } = editStore;
             if (isActivated && !filterStore.visible) {
                 if (!(actived.row || actived.column)) {
-                    if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCyClAreaEvent) {
+                    if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isClip && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleCyClAreaEvent) {
                         $xeTable.handleCyClAreaEvent(evnt);
                     }
                 }
@@ -8976,7 +8985,7 @@ export default defineVxeComponent({
             const { actived } = editStore;
             if (isActivated && !filterStore.visible) {
                 if (!(actived.row || actived.column)) {
-                    if (keyboardConfig && keyboardOpts.isClip && mouseConfig && mouseOpts.area && $xeTable.handleCutCellAreaEvent) {
+                    if (hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isClip && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleCutCellAreaEvent) {
                         $xeTable.handleCutCellAreaEvent(evnt);
                     }
                 }
@@ -9483,11 +9492,24 @@ export default defineVxeComponent({
              */
             getParentElem() {
                 const el = refElem.value;
-                if ($xeGGWrapper) {
-                    const gridEl = $xeGGWrapper.getRefMaps().refElem.value;
-                    return gridEl ? gridEl.parentNode : null;
+                if (!el) {
+                    return null;
+                }
+                const parentEl = el.parentElement;
+                if (!parentEl) {
+                    return null;
+                }
+                if ($xeGantt && hasClass(parentEl, 'vxe-gantt--table-wrapper')) {
+                    return $xeGantt.getParentElem();
+                }
+                else if ($xeGrid && hasClass(parentEl, 'vxe-grid--table-wrapper')) {
+                    return $xeGrid.getParentElem();
                 }
-                return el ? el.parentNode : null;
+                // 如果是虚拟滚动条
+                if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+                    return parentEl.parentElement;
+                }
+                return parentEl;
             },
             /**
              * 获取父容器的高度
@@ -9495,25 +9517,32 @@ export default defineVxeComponent({
             getParentHeight() {
                 const { height } = props;
                 const el = refElem.value;
-                if (el) {
-                    const parentElem = el.parentNode;
-                    let parentPaddingSize = 0;
-                    let parentWrapperHeight = 0;
-                    if (parentElem) {
-                        if ($xeGantt && hasClass(parentElem, 'vxe-gantt--table-wrapper')) {
-                            parentWrapperHeight = $xeGantt.getParentHeight();
-                        }
-                        else if ($xeGrid && hasClass(parentElem, 'vxe-grid--table-wrapper')) {
-                            parentWrapperHeight = $xeGrid.getParentHeight();
-                        }
-                        else {
-                            parentWrapperHeight = parentElem.clientHeight;
-                            parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentElem) : 0;
-                        }
+                if (!el) {
+                    return 0;
+                }
+                let parentEl = el.parentElement;
+                let parentPaddingSize = 0;
+                let parentWrapperHeight = 0;
+                if (!parentEl) {
+                    return 0;
+                }
+                if ($xeGantt && hasClass(parentEl, 'vxe-gantt--table-wrapper')) {
+                    parentWrapperHeight = $xeGantt.getParentHeight();
+                }
+                else if ($xeGrid && hasClass(parentEl, 'vxe-grid--table-wrapper')) {
+                    parentWrapperHeight = $xeGrid.getParentHeight();
+                }
+                else {
+                    // 如果是虚拟滚动条
+                    if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+                        parentEl = parentEl.parentElement;
+                    }
+                    if (parentEl) {
+                        parentWrapperHeight = parentEl.clientHeight;
+                        parentPaddingSize = height === '100%' || height === 'auto' ? getPaddingTopBottomSize(parentEl) : 0;
                     }
-                    return Math.floor(parentWrapperHeight - parentPaddingSize);
                 }
-                return 0;
+                return Math.floor(parentWrapperHeight - parentPaddingSize);
             },
             /**
              * 获取需要排除的高度
@@ -10180,7 +10209,8 @@ export default defineVxeComponent({
              */
             handleCustom() {
                 const { mouseConfig } = props;
-                if (mouseConfig) {
+                const mouseOpts = computeMouseOpts.value;
+                if (hasEnableConf(mouseConfig, mouseOpts)) {
                     if ($xeTable.clearSelected) {
                         $xeTable.clearSelected();
                     }
@@ -11338,7 +11368,7 @@ export default defineVxeComponent({
                 const { field, sortable, order } = column;
                 if (sortable) {
                     const params = { $table: $xeTable, $event: evnt, column, field, property: field, order, sortList: $xeTable.getSortColumns(), sortTime: column.sortTime };
-                    if (mouseConfig && mouseOpts.area && $xeTable.handleSortEvent) {
+                    if (hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleSortEvent) {
                         $xeTable.handleSortEvent(evnt, params);
                     }
                     if (!order) {
@@ -11415,7 +11445,7 @@ export default defineVxeComponent({
                         $xeTable.handleHeaderCellDragMousedownEvent(evnt, params);
                     }
                 }
-                if (!triggerDrag && mouseConfig && mouseOpts.area && $xeTable.handleHeaderCellAreaMouseDnEvent) {
+                if (!triggerDrag && hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area && $xeTable.handleHeaderCellAreaMouseDnEvent) {
                     $xeTable.handleHeaderCellAreaMouseDnEvent(evnt, Object.assign({ cell, triggerSort, triggerFilter }, params));
                 }
                 $xeTable.focus();
@@ -12156,6 +12186,7 @@ export default defineVxeComponent({
             handleColDragSwapEvent(evnt, isSyncColumn, dragCol, prevDragCol, prevDragPos, prevDragToChild) {
                 const { mouseConfig } = props;
                 const columnDragOpts = computeColumnDragOpts.value;
+                const mouseOpts = computeMouseOpts.value;
                 const { animation, isPeerDrag, isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod, dragToChildMethod } = columnDragOpts;
                 const { collectColumn, fullColumnIdData } = internalData;
                 const el = refElem.value;
@@ -12318,7 +12349,7 @@ export default defineVxeComponent({
                             }
                         });
                         $xeTable.handleClearStack();
-                        if (mouseConfig) {
+                        if (hasEnableConf(mouseConfig, mouseOpts)) {
                             if ($xeTable.clearSelected) {
                                 $xeTable.clearSelected();
                             }
@@ -12856,14 +12887,14 @@ export default defineVxeComponent({
                 const isRollY = overflowY && scrollTop !== lastScrollTop;
                 if (isRollX) {
                     // 如果禁用滚动
-                    if (scrollbarXOpts.visible === 'hidden') {
+                    if (scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
                 }
                 if (isRollY) {
                     // 如果禁用滚动
-                    if (scrollbarYOpts.visible === 'hidden') {
+                    if (scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') {
                         evnt.preventDefault();
                         return;
                     }
@@ -13460,10 +13491,15 @@ export default defineVxeComponent({
             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--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                    {
                         [`x-ob--${osXBehavior}`]: osXBehavior,
                         [`y-ob--${osYBehavior}`]: osYBehavior
-                    }]
+                    }
+                ]
             }, [
                 showHeader
                     ? h(TableHeaderComponent, {
@@ -13772,7 +13808,11 @@ export default defineVxeComponent({
                     }]
             }, [
                 h('div', {
-                    class: ['vxe-table--main-wrapper', `sx--${scrollbarXOpts.visible}`, `sy--${scrollbarYOpts.visible}`]
+                    class: [
+                        'vxe-table--main-wrapper',
+                        `sx--${(scrollbarXOpts.visible === false || scrollbarXOpts.visible === 'hidden') ? 'hidden' : 'visible'}`,
+                        `sy--${(scrollbarYOpts.visible === false || scrollbarYOpts.visible === 'hidden') ? 'hidden' : 'visible'}`
+                    ]
                 }, [
                     /**
                      * 表头
@@ -13828,7 +13868,7 @@ export default defineVxeComponent({
                 ]);
         };
         const renderVN = () => {
-            const { loading, stripe, showHeader, height, treeConfig, mouseConfig, showFooter, highlightCell, highlightHoverRow, highlightHoverColumn, editConfig, editRules } = 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 { teleportToWrapperElem, popupToWrapperElem, customPopupToElem } = internalData;
             const { leftList, rightList } = columnStore;
@@ -13856,10 +13896,13 @@ export default defineVxeComponent({
             const isContentMenu = computeIsContentMenu.value;
             const currLoading = reactData.isColLoading || reactData.isRowLoading || loading;
             const resizableOpts = computeResizableOpts.value;
-            const isArea = mouseConfig && mouseOpts.area;
+            const isArea = hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area;
             const columnDragOpts = computeColumnDragOpts.value;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const exportOpts = computeExportOpts.value;
+            const importOpts = computeImportOpts.value;
+            const printOpts = computePrintOpts.value;
             const { isCrossTableDrag } = rowDragOpts;
             const tbOns = {
                 onKeydown: keydownEvent,
@@ -13868,13 +13911,13 @@ export default defineVxeComponent({
             if (isCrossTableDrag && !tableData.length) {
                 tbOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
             }
-            return h('div', Object.assign({ ref: refElem, class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+            return h('div', Object.assign({ ref: refElem, 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,
                         'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete',
                         'cell--highlight': highlightCell,
-                        'cell--selected': mouseConfig && mouseOpts.selected,
+                        'cell--selected': hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.selected,
                         'cell--area': isArea,
                         'header-cell--area': isArea && areaOpts.selectCellByHeader,
                         'body-cell--area': isArea && areaOpts.selectCellByBody,
@@ -14084,7 +14127,7 @@ export default defineVxeComponent({
                 /**
                  * 导入
                  */
-                initStore.import && props.importConfig
+                initStore.import && hasEnableConf(importConfig, importOpts)
                     ? h(TableImportPanelComponent, {
                         key: 'it',
                         defaultOptions: reactData.importParams,
@@ -14094,7 +14137,7 @@ export default defineVxeComponent({
                 /**
                  * 导出
                  */
-                initStore.export && (props.exportConfig || props.printConfig)
+                initStore.export && (hasEnableConf(exportConfig, exportOpts) || hasEnableConf(printConfig, printOpts))
                     ? h(TableExportPanelComponent, {
                         key: 'et',
                         defaultOptions: reactData.exportParams,
@@ -14436,7 +14479,7 @@ export default defineVxeComponent({
             $xeTable.preventEvent(null, 'deactivated', { $table: $xeTable });
         });
         onMounted(() => {
-            const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource } = props;
+            const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props;
             const { scrollXStore, scrollYStore } = internalData;
             const columnOpts = computeColumnOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
@@ -14459,6 +14502,7 @@ export default defineVxeComponent({
             const areaOpts = computeAreaOpts.value;
             const sortOpts = computeSortOpts.value;
             const filterOpts = computeFilterOpts.value;
+            const scrollbarOpts = computeScrollbarOpts.value;
             const { groupFields } = aggregateOpts;
             if ($xeGantt) {
                 const { refClassifyWrapperElem } = $xeGantt.getRefMaps();
@@ -14550,13 +14594,13 @@ export default defineVxeComponent({
             //   warnLog('vxe.error.delProp', ['scroll-x', 'virtual-x-config'])
             // }
             // 检查导入导出类型，如果自定义导入导出方法，则不校验类型
-            if (importConfig && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(XEUtils.keys(importOpts._typeMaps), importOpts.types)) {
+            if (hasEnableConf(importConfig, importOpts) && importOpts.types && !importOpts.importMethod && !XEUtils.includeArrays(XEUtils.keys(importOpts._typeMaps), importOpts.types)) {
                 warnLog('vxe.error.errProp', [`export-config.types=${importOpts.types.join(',')}`, importOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(importOpts._typeMaps), type)).join(',') || XEUtils.keys(importOpts._typeMaps).join(',')]);
             }
-            if (exportConfig && exportOpts.types && !exportOpts.exportMethod && !XEUtils.includeArrays(XEUtils.keys(exportOpts._typeMaps), exportOpts.types)) {
+            if (hasEnableConf(exportConfig, exportOpts) && exportOpts.types && !exportOpts.exportMethod && !XEUtils.includeArrays(XEUtils.keys(exportOpts._typeMaps), exportOpts.types)) {
                 warnLog('vxe.error.errProp', [`export-config.types=${exportOpts.types.join(',')}`, exportOpts.types.filter((type) => XEUtils.includes(XEUtils.keys(exportOpts._typeMaps), type)).join(',') || XEUtils.keys(exportOpts._typeMaps).join(',')]);
             }
-            if (exportConfig && XEUtils.isBoolean(exportOpts.isAllExpand)) {
+            if (hasEnableConf(exportConfig, exportOpts) && XEUtils.isBoolean(exportOpts.isAllExpand)) {
                 warnLog('vxe.error.delProp', ['isAllExpand', 'isTreeAllExpanded']);
             }
             if (!props.id) {
@@ -14570,8 +14614,8 @@ export default defineVxeComponent({
             if (rowOpts.height && !props.showOverflow) {
                 warnLog('vxe.error.notProp', ['table.show-overflow']);
             }
-            if (!$xeTable.triggerClAreaMnEvent) {
-                if (props.areaConfig) {
+            if (!$xeTable.triggerClAaMnEvent) {
+                if (hasEnableConf(areaConfig, areaOpts)) {
                     warnLog('vxe.error.notProp', ['area-config']);
                 }
                 if (props.clipConfig) {
@@ -14657,10 +14701,10 @@ export default defineVxeComponent({
             if (columnOpts.currentMethod) {
                 warnLog('vxe.error.delProp', ['row-config.currentMethod', 'current-column-config.beforeSelectMethod']);
             }
-            // if ((rowOpts.isCurrent || highlightCurrentRow) && props.keyboardConfig && keyboardOpts.isArrow && !XEUtils.isBoolean(currentRowOpts.isFollowSelected)) {
+            // if ((rowOpts.isCurrent || highlightCurrentRow) && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isArrow && !XEUtils.isBoolean(currentRowOpts.isFollowSelected)) {
             //   warnLog('vxe.error.notConflictProp', ['row-config.isCurrent & keyboard-config.isArrow', 'current-row-config.isFollowSelected'])
             // }
-            // if ((columnOpts.isCurrent || highlightCurrentColumn) && props.keyboardConfig && keyboardOpts.isArrow && !XEUtils.isBoolean(currentColumnOpts.isFollowSelected)) {
+            // if ((columnOpts.isCurrent || highlightCurrentColumn) && hasEnableConf(keyboardConfig, keyboardOpts) && keyboardOpts.isArrow && !XEUtils.isBoolean(currentColumnOpts.isFollowSelected)) {
             //   warnLog('vxe.error.notConflictProp', ['column-config.isCurrent & keyboard-config.isArrow', 'current-column-config.isFollowSelected'])
             // }
             // 如果不支持虚拟滚动
@@ -14684,12 +14728,18 @@ export default defineVxeComponent({
             // if (props.editRules && !$xeTable.validate) {
             //   errLog('vxe.error.reqModule', ['Validator'])
             // }
-            // if ((checkboxOpts.range || props.keyboardConfig || props.mouseConfig) && !$xeTable.handleCellMousedownEvent) {
+            // if ((checkboxOpts.range || hasEnableConf(keyboardConfig, keyboardOpts) || hasEnableConf(mouseConfig, mouseOpts)) && !$xeTable.handleCellMousedownEvent) {
             //   errLog('vxe.error.reqModule', ['Keyboard'])
             // }
-            // if ((props.printConfig || props.importConfig || props.exportConfig) && !$xeTable.exportData) {
+            // 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: 0,