vxe-table 4.7.64 → 4.7.66

package/packages/table/render/index.ts

@@ -436,14 +436,14 @@ function oldFilterRender (renderOpts: any, params: any) {
 
 function handleFilterMethod ({ option, row, column }: any) {
   const { data } = option
-  const cellValue = XEUtils.get(row, column.property)
+  const cellValue = XEUtils.get(row, column.field)
   /* eslint-disable eqeqeq */
   return cellValue == data
 }
 
 function handleInputFilterMethod ({ option, row, column }: any) {
   const { data } = option
-  const cellValue = XEUtils.get(row, column.property)
+  const cellValue = XEUtils.get(row, column.field)
   /* eslint-disable eqeqeq */
   return XEUtils.toValueString(cellValue).indexOf(data) > -1
 }
@@ -501,7 +501,7 @@ function oldSelectEditRender (renderOpts: any, params: any) {
 
 function getSelectCellValue (renderOpts: any, { row, column }: any) {
   const { options, optionGroups, optionProps = {}, optionGroupProps = {} } = renderOpts
-  const cellValue = XEUtils.get(row, column.property)
+  const cellValue = XEUtils.get(row, column.field)
   let selectItem: any
   const labelProp = optionProps.label || 'label'
   const valueProp = optionProps.value || 'value'
@@ -536,7 +536,7 @@ function handleExportSelectMethod (params: any) {
 
 function getTreeSelectCellValue (renderOpts: any, { row, column }: any) {
   const { options, optionProps = {} } = renderOpts
-  const cellValue = XEUtils.get(row, column.property)
+  const cellValue = XEUtils.get(row, column.field)
   const labelProp = optionProps.label || 'label'
   const valueProp = optionProps.value || 'value'
   const childrenProp = optionProps.children || 'children'
@@ -564,23 +564,23 @@ function handleExportTreeSelectMethod (params: any) {
  */
 renderer.mixin({
   input: {
-    autofocus: 'input',
-    renderEdit: nativeEditRender,
-    renderDefault: nativeEditRender,
-    renderFilter: nativeFilterRender,
-    defaultFilterMethod: handleInputFilterMethod
+    tableAutoFocus: 'input',
+    renderTableEdit: nativeEditRender,
+    renderTableDefault: nativeEditRender,
+    renderTableFilter: nativeFilterRender,
+    tableFilterDefaultMethod: handleInputFilterMethod
   },
   textarea: {
-    autofocus: 'textarea',
-    renderEdit: nativeEditRender
+    tableAutoFocus: 'textarea',
+    renderTableEdit: nativeEditRender
   },
   select: {
-    renderEdit: nativeSelectEditRender,
-    renderDefault: nativeSelectEditRender,
-    renderCell (renderOpts, params) {
+    renderTableEdit: nativeSelectEditRender,
+    renderTableDefault: nativeSelectEditRender,
+    renderTableCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts, params) {
+    renderTableFilter (renderOpts, params) {
       const { column } = params
       return column.filters.map((option, oIndex) => {
         return h('select', {
@@ -592,17 +592,17 @@ renderer.mixin({
         renderOpts.optionGroups ? renderNativeOptgroups(renderOpts, params, renderNativeOptions) : renderNativeOptions(renderOpts.options, renderOpts, params))
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    exportMethod: handleExportSelectMethod
+    tableFilterDefaultMethod: handleFilterMethod,
+    tableExportMethod: handleExportSelectMethod
   },
   VxeInput: {
-    autofocus: 'input',
-    renderEdit: defaultEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().input?.digits || 2
-      let cellValue = XEUtils.get(row, column.property)
+      let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
         switch (props.type) {
           case 'date':
@@ -619,18 +619,18 @@ renderer.mixin({
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
-    renderDefault: defaultEditRender,
-    renderFilter: defaultFilterRender,
-    defaultFilterMethod: handleInputFilterMethod
+    renderTableDefault: defaultEditRender,
+    renderTableFilter: defaultFilterRender,
+    tableFilterDefaultMethod: handleInputFilterMethod
   },
   VxeNumberInput: {
-    autofocus: 'input',
-    renderEdit: defaultEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().numberInput?.digits || 2
-      let cellValue = XEUtils.get(row, column.property)
+      let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
         switch (props.type) {
           case 'float':
@@ -640,17 +640,17 @@ renderer.mixin({
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
-    renderDefault: defaultEditRender,
-    renderFilter: defaultFilterRender,
-    defaultFilterMethod: handleInputFilterMethod
+    renderTableDefault: defaultEditRender,
+    renderTableFilter: defaultFilterRender,
+    tableFilterDefaultMethod: handleInputFilterMethod
   },
   VxeDatePicker: {
-    autofocus: 'input',
-    renderEdit: defaultEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
-      let cellValue = XEUtils.get(row, column.property)
+      let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
         switch (props.type) {
           case 'date':
@@ -664,18 +664,18 @@ renderer.mixin({
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
-    renderDefault: defaultEditRender,
-    renderFilter: defaultFilterRender,
-    defaultFilterMethod: handleFilterMethod
+    renderTableDefault: defaultEditRender,
+    renderTableFilter: defaultFilterRender,
+    tableFilterDefaultMethod: handleFilterMethod
   },
   VxeTextarea: {
-    autofocus: 'VxeTextarea'
+    tableAutoFocus: 'VxeTextarea'
   },
   VxeButton: {
-    renderDefault: buttonCellRender
+    renderTableDefault: buttonCellRender
   },
   VxeButtonGroup: {
-    renderDefault (renderOpts, params) {
+    renderTableDefault (renderOpts, params) {
       const { options } = renderOpts
       return [
         h(getDefaultComponent(renderOpts), {
@@ -687,13 +687,13 @@ renderer.mixin({
     }
   },
   VxeSelect: {
-    autofocus: 'input',
-    renderEdit: defaultSelectEditRender,
-    renderDefault: defaultSelectEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultSelectEditRender,
+    renderTableDefault: defaultSelectEditRender,
+    renderTableCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts, params) {
+    renderTableFilter (renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       return column.filters.map((option, oIndex) => {
@@ -705,35 +705,46 @@ renderer.mixin({
         })
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    exportMethod: handleExportSelectMethod
+    tableFilterDefaultMethod: handleFilterMethod,
+    tableExportMethod: handleExportSelectMethod
   },
   VxeTreeSelect: {
-    autofocus: 'input',
-    renderEdit: defaultTreeSelectEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultTreeSelectEditRender,
+    renderTableCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getTreeSelectCellValue(renderOpts, params))
     },
-    exportMethod: handleExportTreeSelectMethod
+    tableExportMethod: handleExportTreeSelectMethod
+  },
+  VxeIconPicker: {
+    tableAutoFocus: 'input',
+    renderTableEdit: defaultEditRender,
+    renderTableCell (renderOpts, params) {
+      const { row, column } = params
+      const cellValue = XEUtils.get(row, column.field)
+      return h('i', {
+        class: cellValue
+      })
+    }
   },
   VxeRadioGroup: {
-    renderDefault: radioAndCheckboxEditRender
+    renderTableDefault: radioAndCheckboxEditRender
   },
   VxeCheckboxGroup: {
-    renderDefault: radioAndCheckboxEditRender
+    renderTableDefault: radioAndCheckboxEditRender
   },
   VxeSwitch: {
-    autofocus: 'button',
-    renderEdit: defaultEditRender,
-    renderDefault: defaultEditRender
+    tableAutoFocus: 'button',
+    renderTableEdit: defaultEditRender,
+    renderTableDefault: defaultEditRender
   },
   VxeUpload: {
-    renderEdit: defaultEditRender,
-    renderCell: defaultEditRender,
-    renderDefault: defaultEditRender
+    renderTableEdit: defaultEditRender,
+    renderTableCell: defaultEditRender,
+    renderTableDefault: defaultEditRender
   },
   VxeImage: {
-    renderDefault (renderOpts, params) {
+    renderTableDefault (renderOpts, params) {
       const { row, column } = params
       const { props } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -747,7 +758,7 @@ renderer.mixin({
     }
   },
   VxeImageGroup: {
-    renderDefault (renderOpts, params) {
+    renderTableDefault (renderOpts, params) {
       const { row, column } = params
       const { props } = renderOpts
       const cellValue = getCellValue(row, column)
@@ -763,13 +774,13 @@ renderer.mixin({
 
   // 以下已废弃
   $input: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: oldEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: '.vxe-input--inner',
+    renderTableEdit: oldEditRender,
+    renderTableCell (renderOpts, params) {
       const { props = {} } = renderOpts
       const { row, column } = params
       const digits = props.digits || getConfig().input?.digits || 2
-      let cellValue = XEUtils.get(row, column.property)
+      let cellValue = XEUtils.get(row, column.field)
       if (cellValue) {
         switch (props.type) {
           case 'date':
@@ -785,27 +796,27 @@ renderer.mixin({
       }
       return getCellLabelVNs(renderOpts, params, cellValue)
     },
-    renderDefault: oldEditRender,
-    renderFilter: oldFilterRender,
-    defaultFilterMethod: handleInputFilterMethod
+    renderTableDefault: oldEditRender,
+    renderTableFilter: oldFilterRender,
+    tableFilterDefaultMethod: handleInputFilterMethod
   },
   $textarea: {
-    autofocus: '.vxe-textarea--inner'
+    tableAutoFocus: '.vxe-textarea--inner'
   },
   $button: {
-    renderDefault: oldButtonEditRender
+    renderTableDefault: oldButtonEditRender
   },
   $buttons: {
-    renderDefault: oldButtonsEditRender
+    renderTableDefault: oldButtonsEditRender
   },
   $select: {
-    autofocus: '.vxe-input--inner',
-    renderEdit: oldSelectEditRender,
-    renderDefault: oldSelectEditRender,
-    renderCell (renderOpts, params) {
+    tableAutoFocus: '.vxe-input--inner',
+    renderTableEdit: oldSelectEditRender,
+    renderTableDefault: oldSelectEditRender,
+    renderTableCell (renderOpts, params) {
       return getCellLabelVNs(renderOpts, params, getSelectCellValue(renderOpts, params))
     },
-    renderFilter (renderOpts, params) {
+    renderTableFilter (renderOpts, params) {
       const { column } = params
       const { options, optionProps, optionGroups, optionGroupProps } = renderOpts
       return column.filters.map((option, oIndex) => {
@@ -817,19 +828,19 @@ renderer.mixin({
         })
       })
     },
-    defaultFilterMethod: handleFilterMethod,
-    exportMethod: handleExportSelectMethod
+    tableFilterDefaultMethod: handleFilterMethod,
+    tableExportMethod: handleExportSelectMethod
   },
   $radio: {
-    autofocus: '.vxe-radio--input'
+    tableAutoFocus: '.vxe-radio--input'
   },
   $checkbox: {
-    autofocus: '.vxe-checkbox--input'
+    tableAutoFocus: '.vxe-checkbox--input'
   },
   $switch: {
-    autofocus: '.vxe-switch--button',
-    renderEdit: oldEditRender,
-    renderDefault: oldEditRender
+    tableAutoFocus: '.vxe-switch--button',
+    renderTableEdit: oldEditRender,
+    renderTableDefault: oldEditRender
   }
   // 以上已废弃
 })

package/packages/table/src/table.ts

@@ -18,7 +18,7 @@ import TableImportPanelComponent from '../module/export/import-panel'
 import TableExportPanelComponent from '../module/export/export-panel'
 import TableMenuPanelComponent from '../module/menu/panel'
 
-import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent } from 'vxe-pc-ui'
+import type { VxeLoadingComponent, VxeTooltipInstance, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
 import type { VxeGridConstructor, VxeGridPrivateMethods, VxeTableConstructor, TableReactData, TableInternalData, VxeTablePropTypes, VxeToolbarConstructor, TablePrivateMethods, VxeTablePrivateRef, VxeTablePrivateComputed, VxeTablePrivateMethods, TableMethods, VxeTableMethods, VxeTableDefines, VxeTableProps, VxeColumnPropTypes } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, createEvent, globalResize, interceptor, hooks, globalEvents, GLOBAL_EVENT_KEYS, useFns } = VxeUI
@@ -40,6 +40,8 @@ export default defineComponent({
     const VxeUILoadingComponent = VxeUI.getComponent<VxeLoadingComponent>('VxeLoading')
     const VxeUITooltipComponent = VxeUI.getComponent<VxeTooltipComponent>('VxeTooltip')
 
+    const $xeTabs = inject<(VxeTabsConstructor & VxeTabsPrivateMethods) | null>('$xeTabs', null)
+
     const { computeSize } = useFns.useSize(props)
 
     const reactData = reactive<TableReactData>({
@@ -3273,6 +3275,11 @@ export default defineComponent({
         const fullColumnFieldData = internalData.fullColumnFieldData
         return field && fullColumnFieldData[field] ? fullColumnFieldData[field].column : null
       },
+      getParentColumn (fieldOrColumn) {
+        const fullColumnIdData = internalData.fullColumnIdData
+        const column = handleFieldOrColumn($xeTable, fieldOrColumn)
+        return column && column.parentId && fullColumnIdData[column.parentId] ? fullColumnIdData[column.parentId].column : null
+      },
       /**
        * 获取当前表格的列
        * 收集到的全量列、全量表头列、处理条件之后的全量表头列、当前渲染中的表头列
@@ -3551,10 +3558,14 @@ export default defineComponent({
        * 计算单元格列宽，动态分配可用剩余空间
        * 支持 width=? width=?px width=?% min-width=? min-width=?px min-width=?%
        */
-      recalculate (refull?: boolean) {
+      recalculate (reFull?: boolean) {
+        const el = refElem.value
+        if (!el || !el.clientWidth) {
+          return nextTick()
+        }
         calcCellWidth()
         autoCellWidth()
-        if (refull === true) {
+        if (reFull === true) {
           // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
           return computeScrollLoad().then(() => {
             autoCellWidth()
@@ -5251,6 +5262,10 @@ export default defineComponent({
       if ($xeTable.closeMenu) {
         $xeTable.closeMenu()
       }
+      const el = refElem.value
+      if (!el || !el.clientWidth) {
+        return nextTick()
+      }
       tableMethods.updateCellAreas()
       tableMethods.recalculate(true)
     }
@@ -6686,6 +6701,12 @@ export default defineComponent({
       })
     })
 
+    if ($xeTabs) {
+      watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => {
+        handleGlobalResizeEvent()
+      })
+    }
+
     hooks.forEach((options) => {
       const { setupTable } = options
       if (setupTable) {
@@ -6971,6 +6992,7 @@ export default defineComponent({
           'is--virtual-x': scrollXLoad,
           'is--virtual-y': scrollYLoad
         }],
+        spellcheck: false,
         onKeydown: keydownEvent
       }, [
         /**

package/packages/toolbar/src/toolbar.ts

@@ -4,7 +4,7 @@ import { VxeUI } from '../../ui'
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeButtonComponent } from 'vxe-pc-ui'
+import type { VxeButtonComponent, VxeButtonEvents } from 'vxe-pc-ui'
 import type { VxeGridConstructor, GridPrivateMethods, ToolbarMethods, VxeToolbarConstructor, VxeToolbarEmits, VxeToolbarPropTypes, VxeTableConstructor, ToolbarPrivateRef, VxeTableMethods, VxeTablePrivateMethods, ToolbarReactData } from '../../../types'
 
 const { getConfig, getIcon, getI18n, renderer, commands, createEvent, useFns } = VxeUI
@@ -146,7 +146,7 @@ export default defineComponent({
       }
     }
 
-    const refreshEvent = (evnt: KeyboardEvent) => {
+    const refreshEvent: VxeButtonEvents.Click = ({ $event }) => {
       const { isRefresh } = reactData
       const refreshOpts = computeRefreshOpts.value
       if (!isRefresh) {
@@ -162,16 +162,16 @@ export default defineComponent({
           }
         } else if ($xeGrid) {
           reactData.isRefresh = true
-          $xeGrid.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, evnt).catch((e) => e).then(() => {
+          $xeGrid.triggerToolbarCommitEvent({ code: refreshOpts.code || 'reload' }, $event).catch((e) => e).then(() => {
             reactData.isRefresh = false
           })
         }
       }
     }
 
-    const zoomEvent = (evnt: Event) => {
+    const zoomEvent: VxeButtonEvents.Click = ({ $event }) => {
       if ($xeGrid) {
-        $xeGrid.triggerZoomEvent(evnt)
+        $xeGrid.triggerZoomEvent($event)
       }
     }
 
@@ -270,7 +270,7 @@ export default defineComponent({
               round: child.round,
               status: child.status,
               content: child.name,
-              onClick: (evnt: Event) => isBtn ? btnEvent(evnt, child) : tolEvent(evnt, child)
+              onClick: ({ $event }) => isBtn ? btnEvent($event, child) : tolEvent($event, child)
             })
             : createCommentVNode()
         })
@@ -319,7 +319,7 @@ export default defineComponent({
                     destroyOnClose: item.destroyOnClose,
                     placement: item.placement,
                     transfer: item.transfer,
-                    onClick: (evnt: Event) => btnEvent(evnt, item)
+                    onClick: ({ $event }) => btnEvent($event, item)
                   }, dropdowns && dropdowns.length
                     ? {
                         dropdowns: () => renderDropdowns(item, true)
@@ -377,7 +377,7 @@ export default defineComponent({
                     destroyOnClose: item.destroyOnClose,
                     placement: item.placement,
                     transfer: item.transfer,
-                    onClick: (evnt: Event) => tolEvent(evnt, item)
+                    onClick: ({ $event }) => tolEvent($event, item)
                   }, dropdowns && dropdowns.length
                     ? {
                         dropdowns: () => renderDropdowns(item, false)

package/packages/ui/index.ts

@@ -280,6 +280,7 @@ export const use = VxeUI.use
 export const setup = (options?: VxeGlobalConfig) => {
   return VxeUI.setConfig(options)
 }
+VxeUI.setup = setup
 /**
  * 已废弃
  * @deprecated
@@ -287,6 +288,7 @@ export const setup = (options?: VxeGlobalConfig) => {
 export const config = (options?: VxeGlobalConfig) => {
   return VxeUI.setConfig(options)
 }
+VxeUI.config = config
 /**
  * 已废弃
  * @deprecated
@@ -294,6 +296,7 @@ export const config = (options?: VxeGlobalConfig) => {
 export const t = (key: string, args?: any) => {
   return VxeUI.getI18n(key, args)
 }
+VxeUI.t = t
 /**
  * 已废弃
  * @deprecated
@@ -301,6 +304,7 @@ export const t = (key: string, args?: any) => {
 export const _t = (content: string | number | boolean | null | undefined, args?: any) => {
   return getFuncText(content, args)
 }
+VxeUI._t = _t
 
 /**
  * 已废弃，兼容老版本
@@ -308,9 +312,6 @@ export const _t = (content: string | number | boolean | null | undefined, args?:
  */
 export const VXETable = VxeUI
 
-VXETable.setup = config
-VXETable.config = config
-
 /**
  * 已废弃，兼容老版本
  * @deprecated

package/styles/components/table.scss

@@ -94,7 +94,8 @@
   & > .vxe-select,
   & > .vxe-tree-select,
   & > .vxe-date-picker,
-  & > .vxe-number-input {
+  & > .vxe-number-input,
+  & > .vxe-ico-picker {
     width: 100%;
   }
   & > .vxe-input > .vxe-input--inner,
@@ -111,7 +112,8 @@
     .vxe-select,
     .vxe-tree-select,
     .vxe-date-picker,
-    .vxe-number-input {
+    .vxe-number-input,
+    .vxe-ico-picker {
       width: 100%;
     }
     .vxe-input > .vxe-input--inner,
@@ -1277,7 +1279,8 @@
       .vxe-default-select {
         border-color: var(--vxe-ui-table-validate-error-color);
       }
-      .vxe-input {
+      .vxe-input,
+      .vxe-ico-picker {
         border-color: var(--vxe-ui-table-validate-error-color);
       }
     }