vxe-table 3.24.4 → 3.25.0-beta.1

package/packages/table/src/table.ts

@@ -1,6 +1,6 @@
 import { CreateElement } from 'vue'
 import XEUtils from 'xe-utils'
-import { getFuncText, isEnableConf } from '../../ui/src/utils'
+import { getDefaultConfig, getFuncText, hasEnableConf, isEnableConf } from '../../ui/src/utils'
 import { initTpImg, toCssUnit } from '../../ui/src/dom'
 import { createReactData, createInternalData, createHandleGetRowId, getCalcHeight, hasDeepKey } from './util'
 import { VxeUI } from '../../ui'
@@ -26,7 +26,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods } from 'vxe-pc-ui'
+import type { VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType, VxeModalConstructor, VxeModalMethods, VxeScrollbarProps } from 'vxe-pc-ui'
 import type { VxeTableConstructor, VxeTablePrivateMethods, VxeTablePropTypes, TableInternalData, TableReactData, VxeTableDefines } from '../../../types'
 
 const { warnLog, errLog } = createComponentLog('table')
@@ -121,10 +121,15 @@ function renderViewFixed (h: CreateElement, $xeTable: VxeTableConstructor & VxeT
   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, {
@@ -484,7 +489,11 @@ function renderViewport (h: CreateElement, $xeTable: VxeTableConstructor & VxeTa
     }]
   }, [
     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'}`
+      ]
     }, [
       /**
          * 表头
@@ -591,6 +600,9 @@ export default {
     const reactData = createReactData()
 
     return {
+      ...({} as {
+        scrollDefaultConf: VxeScrollbarProps
+      }),
       xID,
       ...reactData,
 
@@ -718,17 +730,15 @@ export default {
     },
     computeScrollbarXOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const props = $xeTable
 
       const scrollbarOpts = $xeTable.computeScrollbarOpts
-      return Object.assign({}, scrollbarOpts.x, props.scrollbarConfig?.x || {})
+      return scrollbarOpts.x ? Object.assign({}, scrollbarOpts.x, scrollbarOpts.xConfig) : (scrollbarOpts.xConfig || {})
     },
     computeScrollbarYOpts () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
-      const props = $xeTable
 
       const scrollbarOpts = $xeTable.computeScrollbarOpts
-      return Object.assign({}, scrollbarOpts.y, props.scrollbarConfig?.y || {})
+      return scrollbarOpts.y ? Object.assign({}, scrollbarOpts.y, scrollbarOpts.yConfig) : (scrollbarOpts.yConfig || {})
     },
     computeScrollbarXToTop () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -1289,17 +1299,21 @@ export default {
     },
     computeTableStyle () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
+      const scrollDefaultConf = ($xeTable as any).scrollDefaultConf
 
       const scrollbarOpts = $xeTable.computeScrollbarOpts
-      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 = $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 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
     },
     computeTableRowExpandedList () {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
@@ -1738,11 +1752,12 @@ export default {
     const props = $xeTable
     const internalData = $xeTable as unknown as TableInternalData
 
+    ($xeTable as any).scrollDefaultConf = Object.assign({}, getConfig().scrollbar)
     XEUtils.assign(internalData, createInternalData())
 
     handleKeyField($xeTable)
 
-    const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource } = props
+    const { editConfig, exportConfig, importConfig, treeConfig, minHeight, keepSource, areaConfig } = props
     const { scrollXStore, scrollYStore } = internalData
     const columnOpts = $xeTable.computeColumnOpts
     const columnDragOpts = $xeTable.computeColumnDragOpts
@@ -1764,6 +1779,7 @@ export default {
     const areaOpts = $xeTable.computeAreaOpts
     const sortOpts = $xeTable.computeSortOpts
     const filterOpts = $xeTable.computeFilterOpts
+    const scrollbarOpts = $xeTable.computeScrollbarOpts
     const { groupFields } = aggregateOpts
 
     if (props.rowId) {
@@ -1842,13 +1858,13 @@ export default {
     //   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'])
     }
 
@@ -1863,8 +1879,8 @@ export default {
     if (rowOpts.height && !this.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) {
@@ -1984,10 +2000,10 @@ export default {
     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'])
     // }
 
@@ -2007,17 +2023,24 @@ export default {
     // }
 
     // 检查是否有安装需要的模块
-    if (props.editConfig && !$xeTable.insert) {
-      errLog('vxe.error.reqModule', ['Edit'])
-    }
-    if (props.editRules && !$xeTable.validate) {
-      errLog('vxe.error.reqModule', ['Validator'])
-    }
-    if ((checkboxOpts.range || props.keyboardConfig || props.mouseConfig) && !$xeTable.handleCellMousedownEvent) {
-      errLog('vxe.error.reqModule', ['Keyboard'])
+    // if (props.editConfig && !$xeTable.insert) {
+    //   errLog('vxe.error.reqModule', ['Edit'])
+    // }
+    // if (props.editRules && !$xeTable.validate) {
+    //   errLog('vxe.error.reqModule', ['Validator'])
+    // }
+    // if ((checkboxOpts.range || hasEnableConf(keyboardConfig, keyboardOpts) || hasEnableConf(mouseConfig, mouseOpts)) && !$xeTable.handleCellMousedownEvent) {
+    //   errLog('vxe.error.reqModule', ['Keyboard'])
+    // }
+    // 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 ((props.printConfig || props.importConfig || props.exportConfig) && !$xeTable.exportData) {
-      errLog('vxe.error.reqModule', ['Export'])
+    if (scrollbarOpts.y) {
+      warnLog('vxe.error.delProp', ['scrollbar-config.y', 'scrollbar-config.yConfig'])
     }
 
     Object.assign(scrollYStore, {
@@ -2248,7 +2271,7 @@ export default {
 
     const { xID } = $xeTable
 
-    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 { leftList, rightList } = columnStore
     const loadingSlot = slots.loading
@@ -2275,10 +2298,13 @@ export default {
     const isContentMenu = $xeTable.computeIsContentMenu
     const currLoading = reactData.isColLoading || reactData.isRowLoading || loading
     const resizableOpts = $xeTable.computeResizableOpts
-    const isArea = mouseConfig && mouseOpts.area
+    const isArea = hasEnableConf(mouseConfig, mouseOpts) && mouseOpts.area
     const columnDragOpts = $xeTable.computeColumnDragOpts
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft
+    const exportOpts = $xeTable.computeExportOpts
+    const importOpts = $xeTable.computeImportOpts
+    const printOpts = $xeTable.computePrintOpts
     const { isCrossTableDrag } = rowDragOpts
     const tbOns: {
       contextmenu: (...args: any[]) => void
@@ -2293,13 +2319,13 @@ export default {
     }
     return h('div', {
       ref: 'refElem',
-      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
+      class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, useScrollbar ? 'is--virtual-scrollbar' : 'is--native-scrollbar', `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
         [`size--${vSize}`]: vSize,
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
         '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,
@@ -2515,7 +2541,7 @@ export default {
       /**
        * 导入
        */
-      initStore.import && this.importConfig
+      initStore.import && hasEnableConf(importConfig, importOpts)
         ? h(TableImportPanelComponent, {
           key: 'it',
           props: {
@@ -2527,7 +2553,7 @@ export default {
       /**
        * 导出
        */
-      initStore.export && (this.exportConfig || this.printConfig)
+      initStore.export && (hasEnableConf(exportConfig, exportOpts) || hasEnableConf(printConfig, printOpts))
         ? h(TableExportPanelComponent, {
           key: 'et',
           props: {

package/packages/table/src/util.ts

@@ -2,7 +2,7 @@ import XEUtils from 'xe-utils'
 import { ColumnInfo } from './columnInfo'
 import { isScale, isPx, queryElement } from '../../ui/src/dom'
 import { createComponentLog } from '../../ui/src/log'
-import { eqEmptyValue } from '../../ui/src/utils'
+import { eqEmptyValue, hasEnableConf } from '../../ui/src/utils'
 
 import type { VxeTableDefines, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePrivateMethods, VxeTablePropTypes } from '../../../types'
 
@@ -949,6 +949,9 @@ export function clearTableDefaultStatus ($xeTable: VxeTableConstructor & VxeTabl
   const props = $xeTable
   const internalData = $xeTable as unknown as TableInternalData
 
+  const { keyboardConfig, mouseConfig } = props
+  const mouseOpts = $xeTable.computeMouseOpts
+  const keyboardOpts = $xeTable.computeKeyboardOpts
   internalData.initStatus = false
   const actionList = [
     $xeTable.clearSort(),
@@ -968,12 +971,12 @@ export function clearTableDefaultStatus ($xeTable: VxeTableConstructor & VxeTabl
       $xeTable.clearFilter()
     )
   }
-  if ($xeTable.clearSelected && (props.keyboardConfig || props.mouseConfig)) {
+  if ($xeTable.clearSelected && (hasEnableConf(keyboardConfig, keyboardOpts) || hasEnableConf(mouseConfig, mouseOpts))) {
     actionList.push(
       $xeTable.clearSelected()
     )
   }
-  if ($xeTable.clearCellAreas && props.mouseConfig) {
+  if ($xeTable.clearCellAreas && hasEnableConf(mouseConfig, mouseOpts)) {
     actionList.push(
       $xeTable.clearCellAreas(),
       $xeTable.clearCopyCellArea()

package/packages/ui/index.ts

@@ -270,16 +270,14 @@ VxeUI.setConfig({
       oSize: 0
     },
     scrollbarConfig: {
-      // width: 14,
-      // height: 14,
-      x: {
-        // position: 'bottom',
-        visible: true
-      },
-      y: {
-        // position: 'right',
-        visible: true
-      }
+      // xConfig: {
+      //   // position: 'bottom',
+      //   // visible: true
+      // },
+      // yConfig: {
+      //   // position: 'right',
+      //   // visible: true
+      // }
     },
     undoRedoHistoryConfig: {
       stackSize: 50

package/packages/ui/src/utils.ts

@@ -8,6 +8,16 @@ export function isEnableConf (conf: any): boolean {
   return conf && conf.enabled !== false
 }
 
+/**
+ * 用于开关类型的配置项
+ * 局部启用规则：conf={}
+ * 局部禁用规则：conf={enabled:false}
+ * 全局默认启用规则：conf.enabled=true
+ */
+export function hasEnableConf (conf: any, opts: any): boolean {
+  return opts && (conf ? opts.enabled !== false : opts.enabled)
+}
+
 export function isEmptyValue (cellValue: any) {
   return cellValue === null || cellValue === undefined || cellValue === ''
 }