vxe-table 4.22.4 → 4.23.0-beta.1

package/packages/table/src/table.ts

@@ -2,7 +2,7 @@ import { h, ComponentPublicInstance, reactive, ref, Ref, provide, inject, nextTi
 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'
@@ -60,6 +60,8 @@ export default defineVxeComponent({
 
     const browseObj = XEUtils.browse()
 
+    const scrollDefaultConf = Object.assign({}, getConfig().scrollbar)
+
     // 使用已安装的组件，如果未安装则不渲染
     const VxeUILoadingComponent = VxeUI.getComponent('VxeLoading')
     const VxeUITooltipComponent = VxeUI.getComponent('VxeTooltip')
@@ -227,12 +229,12 @@ export default defineVxeComponent({
 
     const computeScrollbarXOpts = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
-      return Object.assign({}, scrollbarOpts.x, props.scrollbarConfig?.x || {})
+      return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {})
     })
 
     const computeScrollbarYOpts = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
-      return Object.assign({}, scrollbarOpts.y, props.scrollbarConfig?.y || {})
+      return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {})
     })
 
     const computeScrollbarXToTop = computed(() => {
@@ -638,15 +640,18 @@ export default defineVxeComponent({
 
     const computeTableStyle = computed(() => {
       const scrollbarOpts = computeScrollbarOpts.value
-      const { width, height } = scrollbarOpts
-      const tStys: VxeComponentStyleType = {}
-      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: VxeComponentStyleType = {}
+      if (barWidth || barHeight) {
+        stys['--vxe-ui-table-view-scrollbar-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-scrollbar-y-width'] = toCssUnit(barWidth || barHeight)
+        stys['--vxe-ui-table-view-scrollbar-height'] = toCssUnit(barHeight || barWidth)
+        stys['--vxe-ui-scrollbar-x-height'] = toCssUnit(barHeight || barWidth)
       }
-      return tStys
+      return stys
     })
 
     const computeTableRowExpandedList = computed(() => {
@@ -2600,7 +2605,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'])
@@ -2609,24 +2613,26 @@ export default defineVxeComponent({
         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'
       }
@@ -2873,7 +2879,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) {
@@ -3469,15 +3475,19 @@ 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
@@ -3904,12 +3914,13 @@ export default defineVxeComponent({
      * @param {Array} datas 数据
      */
     const loadTableData = (datas: any[], isReload: boolean, isReset: boolean) => {
-      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 = []
@@ -3997,7 +4008,7 @@ export default defineVxeComponent({
       if (keepSource) {
         $xeTable.cacheSourceMap(fullData)
       }
-      if ($xeTable.clearCellAreas && props.mouseConfig) {
+      if ($xeTable.clearCellAreas && hasEnableConf(mouseConfig, mouseOpts)) {
         $xeTable.clearCellAreas()
         $xeTable.clearCopyCellArea()
       }
@@ -6956,7 +6967,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()
@@ -8205,7 +8216,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()
@@ -8465,6 +8476,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
@@ -8557,7 +8569,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()
@@ -8649,7 +8661,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) {
             evnt.stopPropagation()
@@ -8658,7 +8670,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
@@ -8735,7 +8747,7 @@ export default defineVxeComponent({
             } else {
               $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) {
             // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -8743,7 +8755,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
@@ -8754,7 +8766,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') {
@@ -8777,7 +8789,7 @@ export default defineVxeComponent({
             internalData.keyCtxTimeout = setTimeout(() => {
               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) {
               // 如果是激活编辑状态，则取消编辑
@@ -8897,7 +8909,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) {
@@ -8913,7 +8925,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
@@ -8961,7 +8973,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
@@ -8990,7 +9002,7 @@ export default defineVxeComponent({
                 dispatchEvent('cell-delete-value', params, evnt)
               }
             }
-          } 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
               // 如果是删除键
@@ -9021,7 +9033,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) {
@@ -9038,7 +9050,7 @@ export default defineVxeComponent({
                 .then(() => $xeTable.scrollToRow(parentRow))
                 .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
@@ -9050,7 +9062,7 @@ export default defineVxeComponent({
                 $xeTable.handleUndoStackEvent(evnt)
               }
             }
-          } 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) {
@@ -9102,7 +9114,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)
           }
         }
@@ -9119,7 +9131,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)
           }
         }
@@ -9136,7 +9148,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)
           }
         }
@@ -9658,11 +9670,23 @@ export default defineVxeComponent({
        */
       getParentElem () {
         const el = refElem.value
-        if ($xeGGWrapper) {
-          const gridEl = $xeGGWrapper.getRefMaps().refElem.value
-          return gridEl ? gridEl.parentNode as HTMLElement : null
+        if (!el) {
+          return null
         }
-        return el ? el.parentNode as HTMLElement : 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()
+        }
+        // 如果是虚拟滚动条
+        if (parentEl && hasClass(parentEl, 'vxe-scrollbar--view-inner')) {
+          return parentEl.parentElement
+        }
+        return parentEl
       },
       /**
        * 获取父容器的高度
@@ -9670,23 +9694,30 @@ export default defineVxeComponent({
       getParentHeight () {
         const { height } = props
         const el = refElem.value
-        if (el) {
-          const parentElem = el.parentNode as HTMLElement
-          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)
       },
       /**
        * 获取需要排除的高度
@@ -10357,7 +10388,8 @@ export default defineVxeComponent({
        */
       handleCustom () {
         const { mouseConfig } = props
-        if (mouseConfig) {
+        const mouseOpts = computeMouseOpts.value
+        if (hasEnableConf(mouseConfig, mouseOpts)) {
           if ($xeTable.clearSelected) {
             $xeTable.clearSelected()
           }
@@ -11490,7 +11522,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) {
@@ -11566,7 +11598,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()
@@ -12315,6 +12347,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
@@ -12487,7 +12520,7 @@ export default defineVxeComponent({
             })
 
             $xeTable.handleClearStack()
-            if (mouseConfig) {
+            if (hasEnableConf(mouseConfig, mouseOpts)) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected()
               }
@@ -13036,14 +13069,14 @@ export default defineVxeComponent({
 
         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
           }
@@ -13651,10 +13684,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}`, {
-          [`x-ob--${osXBehavior}`]: osXBehavior,
-          [`y-ob--${osYBehavior}`]: osYBehavior
-        }]
+        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, {
@@ -13974,7 +14012,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'}`
+          ]
         }, [
           /**
            * 表头
@@ -14032,7 +14074,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
@@ -14060,10 +14102,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: {
         onContextmenu: (...args: any[]) => void
@@ -14078,13 +14123,13 @@ export default defineVxeComponent({
       }
       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,
           '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,
@@ -14298,7 +14343,7 @@ export default defineVxeComponent({
         /**
          * 导入
          */
-        initStore.import && props.importConfig
+        initStore.import && hasEnableConf(importConfig, importOpts)
           ? h(TableImportPanelComponent, {
             key: 'it',
             defaultOptions: reactData.importParams,
@@ -14308,7 +14353,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,
@@ -14673,7 +14718,7 @@ export default defineVxeComponent({
     })
 
     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
@@ -14696,6 +14741,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) {
@@ -14791,13 +14837,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 as any).isAllExpand)) {
+      if (hasEnableConf(exportConfig, exportOpts) && XEUtils.isBoolean((exportOpts as any).isAllExpand)) {
         warnLog('vxe.error.delProp', ['isAllExpand', 'isTreeAllExpanded'])
       }
 
@@ -14812,8 +14858,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) {
@@ -14901,10 +14947,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'])
       // }
 
@@ -14930,13 +14976,20 @@ 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,