vxe-table 3.9.0-rc.9 → 3.9.1

package/packages/table/src/props.ts

@@ -1,5 +1,8 @@
+import { PropType } from 'vue'
 import { VxeUI } from '../../ui'
 
+import type { VxeTablePropTypes } from '../../../types'
+
 const { getConfig } = VxeUI
 
 export default {
@@ -10,39 +13,89 @@ export default {
   // 表格的高度
   height: [Number, String],
   // 表格的最小高度
-  minHeight: { type: [Number, String], default: () => getConfig().table.minHeight },
+  minHeight: {
+    type: [Number, String],
+    default: () => getConfig().table.minHeight
+  },
   // 表格的最大高度
   maxHeight: [Number, String],
   // 已废弃，被 column-config.resizable 替换
-  resizable: { type: Boolean, default: () => getConfig().table.resizable },
+  resizable: {
+    type: Boolean,
+    default: () => getConfig().table.resizable
+  },
   // 是否带有斑马纹
-  stripe: { type: Boolean, default: () => getConfig().table.stripe },
+  stripe: {
+    type: Boolean,
+    default: () => getConfig().table.stripe
+  },
   // 是否带有边框
-  border: { type: [Boolean, String], default: () => getConfig().table.border },
+  border: {
+    type: [Boolean, String],
+    default: () => getConfig().table.border
+  },
+  // 单元格是否有边距
+  padding: {
+    type: Boolean as PropType<VxeTablePropTypes.Padding>,
+    default: () => getConfig().table.padding
+  },
   // 是否圆角边框
-  round: { type: Boolean, default: () => getConfig().table.round },
+  round: {
+    type: Boolean,
+    default: () => getConfig().table.round
+  },
   // 表格的尺寸
-  size: { type: String, default: () => getConfig().table.size || getConfig().size },
+  size: {
+    type: String,
+    default: () => getConfig().table.size || getConfig().size
+  },
   // 列的宽度是否自撑开（可能会被废弃的参数，不要使用）
-  fit: { type: Boolean, default: () => getConfig().table.fit },
+  fit: {
+    type: Boolean,
+    default: () => getConfig().table.fit
+  },
   // 表格是否加载中
   loading: Boolean,
   // 所有的列对其方式
-  align: { type: String, default: () => getConfig().table.align },
+  align: {
+    type: String,
+    default: () => getConfig().table.align
+  },
   // 所有的表头列的对齐方式
-  headerAlign: { type: String, default: () => getConfig().table.headerAlign },
+  headerAlign: {
+    type: String,
+    default: () => getConfig().table.headerAlign
+  },
   // 所有的表尾列的对齐方式
-  footerAlign: { type: String, default: () => getConfig().table.footerAlign },
+  footerAlign: {
+    type: String,
+    default: () => getConfig().table.footerAlign
+  },
   // 是否显示表头
-  showHeader: { type: Boolean, default: () => getConfig().table.showHeader },
+  showHeader: {
+    type: Boolean,
+    default: () => getConfig().table.showHeader
+  },
   // 已废弃，被 row-config.isCurrent 替换
-  highlightCurrentRow: { type: Boolean, default: () => getConfig().table.highlightCurrentRow },
+  highlightCurrentRow: {
+    type: Boolean,
+    default: () => getConfig().table.highlightCurrentRow
+  },
   // 已废弃，被 row-config.isHover 替换
-  highlightHoverRow: { type: Boolean, default: () => getConfig().table.highlightHoverRow },
+  highlightHoverRow: {
+    type: Boolean,
+    default: () => getConfig().table.highlightHoverRow
+  },
   // 已废弃，被 column-config.isCurrent 替换
-  highlightCurrentColumn: { type: Boolean, default: () => getConfig().table.highlightCurrentColumn },
+  highlightCurrentColumn: {
+    type: Boolean,
+    default: () => getConfig().table.highlightCurrentColumn
+  },
   // 已废弃，被 column-config.isHover 替换
-  highlightHoverColumn: { type: Boolean, default: () => getConfig().table.highlightHoverColumn },
+  highlightHoverColumn: {
+    type: Boolean,
+    default: () => getConfig().table.highlightHoverColumn
+  },
   // 已废弃，直接删除
   highlightCell: Boolean,
   // 是否显示表尾合计

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) {
@@ -489,10 +497,6 @@ export default {
     computeFNROpts () {
       return Object.assign({}, getConfig().table.fnrConfig, this.fnrConfig)
     },
-    hasTip () {
-      return true
-      // return VXETable._tooltip
-    },
     headerCtxMenu () {
       const headerOpts = this.ctxMenuOpts.header
       return headerOpts && headerOpts.options ? headerOpts.options : []
@@ -625,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: {
@@ -686,6 +696,9 @@ export default {
         })
       }
     },
+    tabsResizeFlag () {
+      this.handleGlobalResizeEvent()
+    },
     mergeCells (value: any) {
       this.clearMergeCells()
       this.$nextTick(() => this.setMergeCells(value))
@@ -745,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'])
       }
@@ -795,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'])
@@ -836,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'])
@@ -880,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'])
       }
@@ -927,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'])
@@ -936,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()
             }
           }
         : () => {
@@ -983,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,
@@ -1001,7 +1043,7 @@ export default {
       treeConfig,
       mouseConfig,
       mouseOpts,
-      vSize,
+      computeSize,
       validOpts,
       showFooter,
       overflowX,
@@ -1021,7 +1063,6 @@ export default {
       ctxMenuStore,
       ctxMenuOpts,
       footerTableData,
-      hasTip,
       columnOpts,
       rowOpts,
       checkboxOpts,
@@ -1030,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,
@@ -1049,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,
@@ -1162,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(),
       /**
        * 自定义列
        */
@@ -1230,8 +1275,8 @@ export default {
         /**
          * 通用提示
          */
-        hasTip
-          ? h('vxe-tooltip', {
+        VxeUITooltipComponent
+          ? h(VxeUITooltipComponent, {
             ref: 'commTip',
             props: {
               isArrow: false,
@@ -1242,8 +1287,8 @@ export default {
         /**
          * 工具提示
          */
-        hasTip
-          ? h('vxe-tooltip', {
+        VxeUITooltipComponent
+          ? h(VxeUITooltipComponent, {
             ref: 'tooltip',
             props: Object.assign({}, this.tipConfig, this.tooltipStore.currOpts)
           })
@@ -1251,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: {

package/styles/components/table.scss

@@ -130,6 +130,26 @@
     }
   }
 }
+.vxe-body--column {
+  &.col--height {
+    &.col--active {
+      & > .vxe-cell {
+        height: 100%;
+      }
+    }
+    & > .vxe-cell {
+      & > .vxe-textarea,
+      & > .vxe-default-textarea {
+        height: 100%;
+      }
+    }
+  }
+  .vxe-cell--label {
+    &.is--textarea {
+      white-space: pre-line;
+    }
+  }
+}
 
 .vxe-table--checkbox-range,
 .vxe-table--cell-main-area,
@@ -456,12 +476,12 @@
   //   vertical-align: middle;
   // }
   .vxe-cell--required-icon {
-    margin-right: 0.1em;
+    padding-right: 0.1em;
   }
   .vxe-cell--edit-icon,
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
-    margin-right: 0.2em;
+    padding: 0.2em;
   }
   .vxe-cell-title-prefix-icon,
   .vxe-cell-title-suffix-icon {
@@ -512,12 +532,12 @@
   font-family: var(--vxe-ui-font-family);
   direction: ltr;
   .vxe-table--body-wrapper {
-    table {
+    & > table {
       background-color: var(--vxe-ui-layout-background-color);
     }
   }
   .vxe-table--footer-wrapper {
-    table {
+    & > table {
       background-color: var(--vxe-ui-table-footer-background-color);
     }
   }
@@ -678,15 +698,25 @@
       }
     }
   }
+  &.is--padding {
+    .vxe-body--column {
+      &:not(.col--ellipsis) {
+        padding: var(--vxe-ui-table-column-padding-default);
+      }
+    }
+  }
+  .vxe-header--column,
+  .vxe-footer--column {
+    &:not(.col--ellipsis) {
+      padding: var(--vxe-ui-table-column-padding-default);
+    }
+  }
   .vxe-header--column,
   .vxe-body--column,
   .vxe-footer--column {
     position: relative;
     line-height: var(--vxe-ui-table-row-line-height);
     text-align: left;
-    &:not(.col--ellipsis) {
-      padding: var(--vxe-ui-table-column-padding-default);
-    }
     &.col--current {
       background-color: var(--vxe-ui-table-column-current-background-color);
       // .vxe-tree--btn-wrapper {
@@ -731,6 +761,27 @@
   .vxe-table--footer-wrapper {
     border-top: var(--vxe-ui-table-border-width) solid var(--vxe-ui-table-border-color);
   }
+  // &.border--default,
+  // &.border--full,
+  // &.border--inner,
+  // &.border--outer {
+  //   .vxe-body--row {
+  //     &:last-child {
+  //       & > .vxe-body--column {
+  //         & > .vxe-cell {
+  //           border-bottom: 1px solid transparent;
+  //         }
+  //       }
+  //     }
+  //   }
+  //   .vxe-body--column {
+  //     &:first-child {
+  //       & > .vxe-cell {
+  //         border-left: 1px solid transparent;
+  //       }
+  //     }
+  //   }
+  // }
   &.border--default,
   &.border--full,
   &.border--outer {
@@ -883,11 +934,16 @@
       }
     }
   }
+
+  &.is--padding {
+    .vxe-cell {
+      padding-left: var(--vxe-ui-table-cell-padding-left);
+      padding-right: var(--vxe-ui-table-cell-padding-right);
+    }
+  }
   .vxe-cell {
     white-space: pre-line;
     word-break: break-all;
-    padding-left: var(--vxe-ui-table-cell-padding-left);
-    padding-right: var(--vxe-ui-table-cell-padding-right);
   }
 
   // 单元格占位符
@@ -1146,6 +1202,7 @@
     }
   }
 
+
   /*溢出列*/
   .vxe-header--column,
   .vxe-body--column,
@@ -1159,8 +1216,10 @@
           white-space: nowrap;
         }
       }
-      & > .vxe-cell {
-        max-height: var(--vxe-ui-table-row-height-default);
+      &:not(.col--height) {
+        & > .vxe-cell {
+          max-height: var(--vxe-ui-table-row-height-default);
+        }
       }
     }
   }
@@ -1170,8 +1229,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %MediumColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-medium);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-medium);
+          }
         }
       }
     }
@@ -1188,8 +1249,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %SmallColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-small);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-small);
+          }
         }
       }
     }
@@ -1206,8 +1269,10 @@
     .vxe-footer--column {
       &.col--ellipsis {
         @extend %MiniColumnHeight;
-        & > .vxe-cell {
-          max-height: var(--vxe-ui-table-row-height-mini);
+        &:not(.col--height) {
+          & > .vxe-cell {
+            max-height: var(--vxe-ui-table-row-height-mini);
+          }
         }
       }
     }

package/types/all.d.ts

@@ -7,6 +7,7 @@ declare global {
      * @deprecated
      */
     VXETable: VxeUIExport;
+    VxeUITable: VxeUIExport;
   }
 }