vxe-table 4.7.65 → 4.7.67

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()
@@ -4971,6 +4982,7 @@ export default defineComponent({
           const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow
           const operCtxMenu = isMenu && ctxMenuStore.visible && (isEnter || isSpacebar || operArrow)
           const isEditStatus = isEnableConf(editConfig) && actived.column && actived.row
+          const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
           let params: any
           if (operCtxMenu) {
             // 如果配置了右键菜单; 支持方向键操作、回车
@@ -5097,18 +5109,21 @@ export default defineComponent({
                 columnIndex: tableMethods.getColumnIndex(selected.column),
                 $table: $xeTable
               }
-              if (delMethod) {
-                delMethod(delPaqrams)
-              } else {
-                setCellValue(selected.row, selected.column, null)
+              // 是否被禁用
+              if (!beforeEditMethod || beforeEditMethod(params)) {
+                if (delMethod) {
+                  delMethod(delPaqrams)
+                } else {
+                  setCellValue(selected.row, selected.column, null)
+                }
+                // 如果按下 del 键，更新表尾数据
+                tableMethods.updateFooter()
+                $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt)
               }
-              // 如果按下 del 键，更新表尾数据
-              tableMethods.updateFooter()
-              $xeTable.dispatchEvent('cell-delete-value', delPaqrams, evnt)
             }
           } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selected.column)) {
             if (!isEditStatus) {
-              const { delMethod, backMethod } = keyboardOpts
+              const { backMethod } = keyboardOpts
               // 如果是删除键
               if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selected.column)) {
                 const delPaqrams = {
@@ -5118,23 +5133,22 @@ export default defineComponent({
                   columnIndex: tableMethods.getColumnIndex(selected.column),
                   $table: $xeTable
                 }
-                if (delMethod) {
-                  delMethod(delPaqrams)
-                } else {
-                  setCellValue(selected.row, selected.column, null)
-                }
-                if (backMethod) {
-                  backMethod({
-                    row: selected.row,
-                    rowIndex: tableMethods.getRowIndex(selected.row),
-                    column: selected.column,
-                    columnIndex: tableMethods.getColumnIndex(selected.column),
-                    $table: $xeTable
-                  })
-                } else {
-                  $xeTable.handleActived(selected.args, evnt)
+                // 是否被禁用
+                if (!beforeEditMethod || beforeEditMethod(params)) {
+                  if (backMethod) {
+                    backMethod({
+                      row: selected.row,
+                      rowIndex: tableMethods.getRowIndex(selected.row),
+                      column: selected.column,
+                      columnIndex: tableMethods.getColumnIndex(selected.column),
+                      $table: $xeTable
+                    })
+                  } else {
+                    setCellValue(selected.row, selected.column, null)
+                    $xeTable.handleActived(selected.args, evnt)
+                  }
+                  $xeTable.dispatchEvent('cell-backspace-value', delPaqrams, evnt)
                 }
-                $xeTable.dispatchEvent('cell-backspace-value', delPaqrams, evnt)
               }
             }
           } else if (hasBackspaceKey && keyboardConfig && treeConfig && keyboardOpts.isBack && (rowOpts.isCurrent || highlightCurrentRow) && currentRow) {
@@ -5251,6 +5265,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 +6704,12 @@ export default defineComponent({
       })
     })
 
+    if ($xeTabs) {
+      watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => {
+        handleGlobalResizeEvent()
+      })
+    }
+
     hooks.forEach((options) => {
       const { setupTable } = options
       if (setupTable) {
@@ -6971,6 +6995,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/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);
       }
     }