vxe-table 3.9.0-rc.8 → 3.9.0

package/packages/table/src/table.ts

@@ -23,6 +23,8 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
+import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
+
 const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins } = VxeUI
 
 /**
@@ -124,6 +126,9 @@ export default {
     }
   },
   inject: {
+    $xeTabs: {
+      default: null
+    },
     $xeGrid: {
       default: null
     },
@@ -351,6 +356,9 @@ export default {
     }
   },
   computed: {
+    ...({} as {
+      $xeTabs(): (VxeTabsConstructor & VxeTabsPrivateMethods) | null
+    }),
     tableId () {
       const { id } = this
       if (id) {
@@ -362,13 +370,22 @@ export default {
       return ''
     },
     validOpts () {
-      return Object.assign({ message: 'default' }, getConfig().table.validConfig, this.validConfig)
+      return this.computeValidOpts
+    },
+    computeValidOpts () {
+      return Object.assign({ message: 'default' }, XEUtils.clone(getConfig().table.validConfig, true), this.validConfig)
     },
     sXOpts () {
-      return Object.assign({}, getConfig().table.scrollX, this.scrollX)
+      return this.computeSXOpts
+    },
+    computeSXOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.scrollX, true), this.scrollX)
     },
     sYOpts () {
-      return Object.assign({}, getConfig().table.scrollY, this.scrollY)
+      return this.computeSYOpts
+    },
+    computeSYOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.scrollY, true), this.scrollY)
     },
     rowHeightMaps () {
       return {
@@ -379,28 +396,52 @@ export default {
       }
     },
     columnOpts () {
-      return Object.assign({}, getConfig().table.columnConfig, this.columnConfig)
+      return this.computeColumnOpts
+    },
+    computeColumnOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.columnConfig, true), this.columnConfig)
     },
     rowOpts () {
-      return Object.assign({}, getConfig().table.rowConfig, this.rowConfig)
+      return this.computeRowOpts
+    },
+    computeRowOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.rowConfig, true), this.rowConfig)
     },
     resizeOpts () {
-      return Object.assign({}, getConfig().table.resizeConfig, this.resizeConfig)
+      return this.computeResizeOpts
+    },
+    computeResizeOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.resizeConfig, true), this.resizeConfig)
     },
     resizableOpts () {
-      return Object.assign({}, getConfig().table.resizableConfig, this.resizableConfig)
+      return this.computeResizableOpts
+    },
+    computeResizableOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.resizableConfig, true), this.resizableConfig)
     },
     seqOpts () {
-      return Object.assign({ startIndex: 0 }, getConfig().table.seqConfig, this.seqConfig)
+      return this.computeSeqOpts
+    },
+    computeSeqOpts () {
+      return Object.assign({ startIndex: 0 }, XEUtils.clone(getConfig().table.seqConfig, true), this.seqConfig)
     },
     radioOpts () {
-      return Object.assign({}, getConfig().table.radioConfig, this.radioConfig)
+      return this.computeRadioOpts
+    },
+    computeRadioOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.radioConfig, true), this.radioConfig)
     },
     checkboxOpts () {
-      return Object.assign({}, getConfig().table.checkboxConfig, this.checkboxConfig)
+      return this.computeCheckboxOpts
+    },
+    computeCheckboxOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.checkboxConfig, true), this.checkboxConfig)
     },
     tooltipOpts () {
-      return Object.assign({}, getConfig().tooltip, getConfig().table.tooltipConfig, this.tooltipConfig)
+      return this.computeTooltipOpts
+    },
+    computeTooltipOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().tooltip, true), XEUtils.clone(getConfig().table.tooltipConfig, true), this.tooltipConfig)
     },
     tipConfig () {
       return { ...this.tooltipOpts }
@@ -409,32 +450,52 @@ export default {
       return Object.assign({ isArrow: false }, this.tooltipOpts)
     },
     editOpts () {
-      return Object.assign({}, getConfig().table.editConfig, this.editConfig)
+      return this.computeEditOpts
+    },
+    computeEditOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.editConfig, true), this.editConfig)
     },
     sortOpts () {
-      return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, this.sortConfig)
+      return this.computeSortOpts
+    },
+    computeSortOpts () {
+      return Object.assign({ orders: ['asc', 'desc', null] }, XEUtils.clone(getConfig().table.sortConfig, true), this.sortConfig)
     },
     filterOpts () {
-      return Object.assign({}, getConfig().table.filterConfig, this.filterConfig)
+      return this.computeFilterOpts
+    },
+    computeFilterOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.filterConfig, true), this.filterConfig)
     },
     mouseOpts () {
-      return Object.assign({}, getConfig().table.mouseConfig, this.mouseConfig)
+      return this.computeMouseOpts
+    },
+    computeMouseOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.mouseConfig, true), this.mouseConfig)
     },
     areaOpts () {
-      return Object.assign({}, getConfig().table.areaConfig, this.areaConfig)
+      return this.computeAreaOpts
+    },
+    computeAreaOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.areaConfig, true), this.areaConfig)
     },
     keyboardOpts () {
-      return Object.assign({}, getConfig().table.keyboardConfig, this.keyboardConfig)
+      return this.computeKeyboardOpts
+    },
+    computeKeyboardOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.keyboardConfig, true), this.keyboardConfig)
     },
     clipOpts () {
-      return Object.assign({}, getConfig().table.clipConfig, this.clipConfig)
+      return this.computeClipOpts
+    },
+    computeClipOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.clipConfig, true), this.clipConfig)
     },
     fnrOpts () {
-      return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig)
+      return this.computeFNROpts
     },
-    hasTip () {
-      return true
-      // return VXETable._tooltip
+    computeFNROpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.fnrConfig, true), this.fnrConfig)
     },
     headerCtxMenu () {
       const headerOpts = this.ctxMenuOpts.header
@@ -451,9 +512,6 @@ export default {
     isCtxMenu () {
       return !!((this.contextMenu || this.menuConfig) && isEnableConf(this.ctxMenuOpts) && (this.headerCtxMenu.length || this.bodyCtxMenu.length || this.footerCtxMenu.length))
     },
-    ctxMenuOpts () {
-      return Object.assign({}, getConfig().table.menuConfig, this.contextMenu, this.menuConfig)
-    },
     ctxMenuList () {
       const rest: any[] = []
       this.ctxMenuStore.list.forEach((list: any[]) => {
@@ -463,36 +521,63 @@ export default {
       })
       return rest
     },
+    ctxMenuOpts () {
+      return this.computeMenuOpts
+    },
+    computeMenuOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.menuConfig, true), this.contextMenu, this.menuConfig)
+    },
     exportOpts () {
-      return Object.assign({}, getConfig().table.exportConfig, this.exportConfig)
+      return this.computeExportOpts
+    },
+    computeExportOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.exportConfig, true), this.exportConfig)
     },
     importOpts () {
-      return Object.assign({}, getConfig().table.importConfig, this.importConfig)
+      return this.computeImportOpts
+    },
+    computeImportOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.importConfig, true), this.importConfig)
     },
     printOpts () {
-      return Object.assign({}, getConfig().table.printConfig, this.printConfig)
+      return this.computePrintOpts
+    },
+    computePrintOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.printConfig, true), this.printConfig)
     },
     expandOpts () {
-      return Object.assign({}, getConfig().table.expandConfig, this.expandConfig)
+      return this.computeExpandOpts
+    },
+    computeExpandOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.expandConfig, true), this.expandConfig)
     },
     treeOpts () {
-      return Object.assign({}, getConfig().table.treeConfig, this.treeConfig)
+      return this.computeTreeOpts
+    },
+    computeTreeOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.treeConfig, true), this.treeConfig)
     },
     emptyOpts () {
-      return Object.assign({}, getConfig().table.emptyRender, this.emptyRender)
+      return this.computeEmptyOpts
+    },
+    computeEmptyOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.emptyRender, true), this.emptyRender)
     },
     loadingOpts () {
-      return Object.assign({}, getConfig().table.loadingConfig, this.loadingConfig)
+      return this.computeLoadingOpts
+    },
+    computeLoadingOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.loadingConfig, true), this.loadingConfig)
     },
     cellOffsetWidth () {
       return this.border ? Math.max(2, Math.ceil(this.scrollbarWidth / this.tableColumn.length)) : 1
     },
-    computeCustomOpts () {
-      return Object.assign({}, getConfig().table.customConfig, this.customConfig)
-    },
     customOpts () {
       return this.computeCustomOpts
     },
+    computeCustomOpts () {
+      return Object.assign({}, XEUtils.clone(getConfig().table.customConfig, true), this.customConfig)
+    },
     autoWidthColumnList () {
       const { tableColumn, visibleColumn } = this
       return tableColumn.length || visibleColumn.length ? visibleColumn.filter((column: any) => column.width === 'auto' || column.minWidth === 'auto') : []
@@ -544,6 +629,12 @@ export default {
         return true
       }
       return false
+    },
+    tabsResizeFlag () {
+      const $xeTable = this
+      const $xeTabs = $xeTable.$xeTabs
+
+      return $xeTabs ? $xeTabs.reactData.resizeFlag : null
     }
   } as any,
   watch: {
@@ -605,6 +696,9 @@ export default {
         })
       }
     },
+    tabsResizeFlag () {
+      this.handleGlobalResizeEvent()
+    },
     mergeCells (value: any) {
       this.clearMergeCells()
       this.$nextTick(() => this.setMergeCells(value))
@@ -664,7 +758,7 @@ export default {
       fullColumnFieldData: {}
     })
 
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       if (this.rowId) {
         warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField'])
       }
@@ -714,7 +808,7 @@ export default {
       }
     }
 
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       const customOpts = this.customOpts
       if (!this.id && this.customConfig && (customOpts.storage === true || (customOpts.storage && customOpts.storage.resizable) || (customOpts.storage && customOpts.storage.visible))) {
         errLog('vxe.error.reqProp', ['id'])
@@ -755,7 +849,7 @@ export default {
     }
 
     // v4 中只支持对象类型
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       // 在 v3.0 中废弃 context-menu
       if (this.contextMenu) {
         warnLog('vxe.error.delProp', ['context-menu', 'menu-config'])
@@ -799,7 +893,7 @@ export default {
     }
 
     // 检查是否有安装需要的模块
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       if (this.editConfig && !this._insert) {
         errLog('vxe.error.reqModule', ['Edit'])
       }
@@ -846,7 +940,10 @@ export default {
     this.preventEvent(null, 'created')
   },
   mounted () {
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    const $xeTable = this
+    const props = $xeTable
+
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       const { $listeners } = this
       if (!this.menuConfig && ($listeners['menu-click'] || $listeners['cell-menu'] || $listeners['header-cell-menu'] || $listeners['footer-cell-menu'])) {
         warnLog('vxe.error.reqProp', ['menu-config'])
@@ -855,12 +952,34 @@ export default {
         warnLog('vxe.error.reqProp', ['tooltip-config'])
       }
     }
+
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      // 使用已安装的组件，如果未安装则不渲染
+      const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
+      const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
+
+      $xeTable.$nextTick(() => {
+        if (props.loading) {
+          if (!VxeUILoadingComponent) {
+            errLog('vxe.error.reqComp', ['vxe-loading'])
+          }
+        }
+        if ((props.showOverflow === true || props.showOverflow === 'tooltip') ||
+          (props.showHeaderOverflow === true || props.showHeaderOverflow === 'tooltip') ||
+          (props.showFooterOverflow === true || props.showFooterOverflow === 'tooltip') ||
+          props.tooltipConfig || props.editRules) {
+          if (!VxeUITooltipComponent) {
+            errLog('vxe.error.reqComp', ['vxe-tooltip'])
+          }
+        }
+      })
+    }
     if (this.autoResize) {
       const handleWrapperResize = this.resizeOpts.refreshDelay ? XEUtils.throttle(() => this.recalculate(true), this.resizeOpts.refreshDelay, { leading: true, trailing: true }) : null
       const resizeObserver = globalResize.create(handleWrapperResize
         ? () => {
             if (this.autoResize) {
-              requestAnimationFrame(handleWrapperResize)
+              handleWrapperResize()
             }
           }
         : () => {
@@ -902,6 +1021,10 @@ export default {
     this.preventEvent(null, 'destroyed')
   },
   render (h: CreateElement) {
+    // 使用已安装的组件，如果未安装则不渲染
+    const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
+    const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
+
     const {
       _e,
       $scopedSlots,
@@ -920,7 +1043,7 @@ export default {
       treeConfig,
       mouseConfig,
       mouseOpts,
-      vSize,
+      computeSize,
       validOpts,
       showFooter,
       overflowX,
@@ -940,7 +1063,6 @@ export default {
       ctxMenuStore,
       ctxMenuOpts,
       footerTableData,
-      hasTip,
       columnOpts,
       rowOpts,
       checkboxOpts,
@@ -949,6 +1071,7 @@ export default {
     } = this
     const { leftList, rightList } = columnStore
     const currLoading = this._isLoading || loading
+    const vSize = computeSize
     return h('div', {
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
@@ -968,6 +1091,7 @@ export default {
         'is--fixed-left': leftList.length,
         'is--fixed-right': rightList.length,
         'is--animat': !!this.animat,
+        'is--padding': this.padding,
         'is--round': this.round,
         'is--stripe': !treeConfig && stripe,
         'is--loading': currLoading,
@@ -1081,14 +1205,16 @@ export default {
       /**
        * 加载中
        */
-      h('vxe-loading', {
-        class: 'vxe-table--loading',
-        props: {
-          value: currLoading,
-          icon: loadingOpts.icon,
-          text: loadingOpts.text
-        }
-      }, this.callSlot($scopedSlots.loading, {}, h)),
+      VxeUILoadingComponent
+        ? h(VxeUILoadingComponent, {
+          class: 'vxe-table--loading',
+          props: {
+            value: currLoading,
+            icon: loadingOpts.icon,
+            text: loadingOpts.text
+          }
+        }, this.callSlot($scopedSlots.loading, {}, h))
+        : _e(),
       /**
        * 自定义列
        */
@@ -1149,8 +1275,8 @@ export default {
         /**
          * 通用提示
          */
-        hasTip
-          ? h('vxe-tooltip', {
+        VxeUITooltipComponent
+          ? h(VxeUITooltipComponent, {
             ref: 'commTip',
             props: {
               isArrow: false,
@@ -1161,8 +1287,8 @@ export default {
         /**
          * 工具提示
          */
-        hasTip
-          ? h('vxe-tooltip', {
+        VxeUITooltipComponent
+          ? h(VxeUITooltipComponent, {
             ref: 'tooltip',
             props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
           })
@@ -1170,8 +1296,8 @@ export default {
         /**
          * 校验提示
          */
-        hasTip && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
-          ? h('vxe-tooltip', {
+        VxeUITooltipComponent && this.editRules && validOpts.showMessage && (validOpts.message === 'default' ? !height : validOpts.message === 'tooltip')
+          ? h(VxeUITooltipComponent, {
             ref: 'validTip',
             class: [{
               'old-cell-valid': editRules && getConfig().cellVaildMode === 'obsolete'

package/packages/table/src/util.ts

@@ -151,7 +151,7 @@ export function assembleColumn (_vm: any) {
   const groupConfig = $xecolumn ? $xecolumn.columnConfig : null
   columnConfig.slots = _vm.$scopedSlots
   if (groupConfig) {
-    if (process.env.VUE_APP_VXE_TABLE_ENV === 'development') {
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
       if ($xecolumn.$options._componentTag === 'vxe-table-column') {
         errLog('vxe.error.groupTag', [`<vxe-table-colgroup title=${$xecolumn.title} ...>`, `<vxe-table-column title=${$xecolumn.title} ...>`])
       } else if ($xecolumn.$options._componentTag === 'vxe-column') {
@@ -271,7 +271,8 @@ function countTreeExpand (prevRow: any, params: any) {
 }
 
 export function getOffsetSize ($xetable: any) {
-  return lineOffsetSizes[$xetable.vSize] || 0
+  const vSize = $xetable.computeSize
+  return lineOffsetSizes[vSize] || 0
 }
 
 export function calcTreeLine (params: any, items: any, rIndex: any) {

package/packages/toolbar/src/toolbar.ts

@@ -71,37 +71,37 @@ export default defineVxeComponent({
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.refresh, props.refresh) as VxeToolbarPropTypes.RefreshOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.refresh, true), props.refresh) as VxeToolbarPropTypes.RefreshOpts
     },
     computeImportOpts () {
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.import, props.import) as VxeToolbarPropTypes.ImportOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.import, true), props.import) as VxeToolbarPropTypes.ImportOpts
     },
     computeExportOpts () {
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.export, props.export) as VxeToolbarPropTypes.ExportOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.export, true), props.export) as VxeToolbarPropTypes.ExportOpts
     },
     computePrintOpts () {
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.print, props.print) as VxeToolbarPropTypes.PrintOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.print, true), props.print) as VxeToolbarPropTypes.PrintOpts
     },
     computeZoomOpts () {
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.zoom, props.zoom) as VxeToolbarPropTypes.ZoomOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.zoom, true), props.zoom) as VxeToolbarPropTypes.ZoomOpts
     },
     computeCustomOpts () {
       const $xeToolbar = this
       const props = $xeToolbar
 
-      return Object.assign({}, getConfig().toolbar.custom, props.custom) as VxeToolbarPropTypes.CustomOpts
+      return Object.assign({}, XEUtils.clone(getConfig().toolbar.custom, true), props.custom) as VxeToolbarPropTypes.CustomOpts
     },
     computeTableCustomOpts (this: any) {
       const $xeToolbar = this
@@ -357,7 +357,12 @@ export default defineVxeComponent({
                 circle: child.circle,
                 round: child.round,
                 status: child.status,
-                content: child.name
+                content: child.name,
+                title: child.title,
+                routerLink: child.routerLink,
+                permissionCode: child.permissionCode,
+                prefixTooltip: child.prefixTooltip,
+                suffixTooltip: child.suffixTooltip
               },
               on: {
                 click: ({ $event }: any) => isBtn ? $xeToolbar.btnEvent($event, child) : $xeToolbar.tolEvent($event, child)
@@ -411,7 +416,11 @@ export default defineVxeComponent({
                       round: item.round,
                       status: item.status,
                       content: item.name,
+                      title: item.title,
+                      routerLink: item.routerLink,
                       permissionCode: item.permissionCode,
+                      prefixTooltip: item.prefixTooltip,
+                      suffixTooltip: item.suffixTooltip,
                       destroyOnClose: item.destroyOnClose,
                       placement: item.placement,
                       transfer: item.transfer
@@ -479,6 +488,11 @@ export default defineVxeComponent({
                       round: item.round,
                       status: item.status,
                       content: item.name,
+                      title: item.title,
+                      routerLink: item.routerLink,
+                      permissionCode: item.permissionCode,
+                      prefixTooltip: item.prefixTooltip,
+                      suffixTooltip: item.suffixTooltip,
                       destroyOnClose: item.destroyOnClose,
                       placement: item.placement,
                       transfer: item.transfer

package/packages/ui/index.ts

@@ -17,6 +17,7 @@ VxeUI.setConfig({
     animat: true,
     delayHover: 250,
     autoResize: true,
+    padding: true,
     minHeight: 144,
     // keepSource: false,
     // showOverflow: null,
@@ -108,7 +109,8 @@ VxeUI.setConfig({
     editConfig: {
       // mode: 'cell',
       showIcon: true,
-      showAsterisk: true
+      showAsterisk: true,
+      autoFocus: true
     },
     importConfig: {
       _typeMaps: {