vxe-table 3.22.11 → 3.23.0-beta.0

package/packages/table/src/cell.ts

@@ -305,7 +305,11 @@ function renderHeaderHandle (h: CreateElement, params: VxeTableDefines.CellRende
   const { column, $table } = params
   const tableProps = $table
   const { editConfig } = tableProps
-  const { type, filters, sortable, editRender } = column
+  const { type, filters, sortable, editRender, slots } = column
+  const headerSlot = slots ? slots.header : null
+  if (headerSlot) {
+    return renderTitleContent(h, params, $table.callSlot(headerSlot, params, h))
+  }
   switch (type) {
     case 'seq':
       return Cell.renderSeqHeader(h, params)
@@ -363,11 +367,7 @@ export const Cell = {
     const { $table, column } = params
     const tableProps = $table
     const { editConfig } = tableProps
-    const { slots, editRender, cellRender } = column
-    const headerSlot = slots ? slots.header : null
-    if (headerSlot) {
-      return renderTitleContent(h, params, $table.callSlot(headerSlot, params, h))
-    }
+    const { editRender, cellRender } = column
     const isEnableEdit = editConfig && isEnableConf(editConfig)
     const editRenderOpts = isEnableEdit && isEnableConf(editRender) ? editRender : null
     const cellRenderOpts = isEnableConf(cellRender) ? cellRender : null
@@ -640,8 +640,7 @@ export const Cell = {
    */
   renderSeqHeader (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, column } = params
-    const { slots } = column
-    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : $table.getHeaderCellLabel(column)))
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, $table.getHeaderCellLabel(column)))
   },
   renderSeqCell (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, column } = params
@@ -668,16 +667,13 @@ export const Cell = {
   renderRadioHeader (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
     const { $table, column } = params
     const { slots } = column
-    const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
     return renderHeaderCellBaseVNs(h, params,
-      renderTitleContent(h, params, headerSlot
-        ? $table.callSlot(headerSlot, params, h)
-        : [
-            h('span', {
-              class: 'vxe-radio--label'
-            }, titleSlot ? $table.callSlot(titleSlot, params, h) : $table.getHeaderCellLabel(column))
-          ])
+      renderTitleContent(h, params, [
+        h('span', {
+          class: 'vxe-radio--label'
+        }, titleSlot ? $table.callSlot(titleSlot, params, h) : $table.getHeaderCellLabel(column))
+      ])
     )
   },
   renderRadioCell (h: CreateElement, params: VxeTableDefines.CellRenderBodyParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }) {
@@ -748,7 +744,6 @@ export const Cell = {
     const { isAllSelected: isAllCheckboxSelected, isIndeterminate: isAllCheckboxIndeterminate } = tableReactData
     const isAllCheckboxDisabled = $table.computeIsAllCheckboxDisabled
     const { slots } = column
-    const headerSlot = slots ? slots.header : null
     const titleSlot = slots ? slots.title : null
     const checkboxOpts = $table.computeCheckboxOpts
     const { checkStrictly, showHeader, headerTitle } = checkboxOpts
@@ -762,9 +757,6 @@ export const Cell = {
       }
     }
     const checkboxParams = { ...params, checked: isAllCheckboxSelected, disabled: isAllCheckboxDisabled, indeterminate: isAllCheckboxIndeterminate }
-    if (headerSlot) {
-      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)))
-    }
     if (checkStrictly ? !showHeader : showHeader === false) {
       return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [
         h('span', {

package/packages/table/src/methods.ts

@@ -7933,8 +7933,8 @@ const tableMethods: any = {
     if (isEsc) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
         $xeTable.dispatchEvent('keydown-start', {}, evnt)
-        if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
-          this.handleKeyboardCellAreaEvent(evnt)
+        if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
+          $xeTable.handleKdClAreaEvent(evnt)
         } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
           evnt.stopPropagation()
           // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -7991,6 +7991,7 @@ const tableMethods: any = {
         const { isLastEnterAppendRow, beforeEnterMethod, enterMethod, isLastTabAppendRow, beforeTabMethod, tabMethod } = keyboardOpts
         const { selected, actived } = editStore
         const { keyCode } = evnt
+        const isProcess = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PROCESS)
         const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
         const hasBackspaceKey = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.BACKSPACE)
         const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB)
@@ -8013,6 +8014,7 @@ const tableMethods: any = {
         const isEditStatus = isEnableConf(editConfig) && actived.column && actived.row
         const childrenField = treeOpts.children || treeOpts.childrenField
         const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
+        const selectRow = selected.row
         const selectColumn = selected.column
         if (operCtxMenu) {
           // 如果配置了右键菜单; 支持方向键操作、回车
@@ -8022,8 +8024,8 @@ const tableMethods: any = {
           } else {
             $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selected', isRightArrow, true, menuList)
           }
-        } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
-          $xeTable.handleKeyboardCellAreaEvent(evnt)
+        } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKdClAreaEvent) {
+          $xeTable.handleKdClAreaEvent(evnt)
         } else if (isEsc) {
           // 如果按下了 Esc 键，关闭快捷菜单、筛选
           if ($xeTable.closeMenu) {
@@ -8041,7 +8043,7 @@ const tableMethods: any = {
               }
             }
           }
-        } else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selectColumn && (selectColumn.type === 'checkbox' || selectColumn.type === 'radio')) {
+        } else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selectRow && selectColumn && (selectColumn.type === 'checkbox' || selectColumn.type === 'radio')) {
           // 空格键支持选中复选框
           evnt.preventDefault()
           if (selectColumn.type === 'checkbox') {
@@ -8052,19 +8054,19 @@ const tableMethods: any = {
         } else if (isF2 && isEnableConf(editConfig)) {
           if (!isEditStatus) {
             // 如果按下了 F2 键
-            if (selected.row && selectColumn) {
+            if (selectRow && selectColumn) {
               evnt.preventDefault()
               $xeTable.handleEdit(selected.args, evnt)
             }
           }
         } else if (isContextMenu) {
           // 如果按下上下文键
-          internalData._keyCtx = selected.row && selectColumn && bodyMenu.length
+          internalData._keyCtx = selectRow && selectColumn && bodyMenu.length
           clearTimeout(internalData.keyCtxTimeout)
           internalData.keyCtxTimeout = setTimeout(() => {
             internalData._keyCtx = false
           }, 1000)
-        } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
+        } else if (isEnter && !hasAltKey && keyboardConfig && keyboardOpts.isEnter && (selectRow || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
           // 退出选中
           if (isControlKey) {
             // 如果是激活编辑状态，则取消编辑
@@ -8078,11 +8080,11 @@ const tableMethods: any = {
             }
           } else {
             // 如果是激活状态，退则出到上一行/下一行
-            if (selected.row || actived.row) {
-              const activeRow = selected.row || actived.row
+            if (selectRow || actived.row) {
+              const activeRow = selectRow || actived.row
               const activeColumn = selectColumn || actived.column
               if (activeColumn) {
-                const activeParams = selected.row ? selected.args : actived.args
+                const activeParams = selectRow ? selected.args : actived.args
                 if (hasShiftKey) {
                   if (keyboardOpts.enterToTab) {
                     $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt)
@@ -8185,7 +8187,7 @@ const tableMethods: any = {
         } else if (operArrow && keyboardConfig && keyboardOpts.isArrow) {
           if (!isEditStatus) {
             // 如果按下了方向键
-            if (mouseOpts.selected && selected.row && selectColumn) {
+            if (mouseOpts.selected && selectRow && selectColumn) {
               $xeTable.moveArrowSelected(selected.args, isLeftArrow, isUpArrow, isRightArrow, isDwArrow, evnt)
             } else {
               // 当前行按键上下移动
@@ -8200,11 +8202,11 @@ const tableMethods: any = {
           }
         } else if (isTab && keyboardConfig && keyboardOpts.isTab) {
           // 如果按下了 Tab 键切换
-          if (selected.row || actived.row) {
-            const activeRow = selected.row || actived.row
+          if (selectRow || actived.row) {
+            const activeRow = selectRow || actived.row
             const activeColumn = selectColumn || actived.column
             if (activeColumn) {
-              const activeParams = selected.row ? selected.args : actived.args
+              const activeParams = selectRow ? selected.args : actived.args
               const _rowIndex = $xeTable.getVTRowIndex(activeRow)
               const _columnIndex = $xeTable.getVTColumnIndex(activeColumn)
               const ttrParams = {
@@ -8246,13 +8248,13 @@ const tableMethods: any = {
               }
             }
           }
-        } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selected.row || selectColumn)) {
+        } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selectRow || selectColumn)) {
           // 如果是删除键
           if (!isEditStatus) {
             const { delMethod } = keyboardOpts
             const params = {
-              row: selected.row,
-              rowIndex: $xeTable.getRowIndex(selected.row),
+              row: selectRow,
+              rowIndex: $xeTable.getRowIndex(selectRow),
               column: selectColumn as VxeTableDefines.ColumnInfo,
               columnIndex: $xeTable.getColumnIndex(selectColumn),
               $table: $xeTable,
@@ -8264,10 +8266,10 @@ const tableMethods: any = {
               if (delMethod) {
                 delMethod(params)
               } else {
-                const selectCellValue = getCellValue(selected.row, selectColumn)
+                const selectCellValue = getCellValue(selectRow, selectColumn)
                 if (selectCellValue !== null) {
                   $xeTable.handlePushStack()
-                  setCellValue(selected.row, selectColumn, null)
+                  setCellValue(selectRow, selectColumn, null)
                 }
               }
               // 如果按下 del 键，更新表尾数据
@@ -8275,16 +8277,20 @@ const tableMethods: any = {
               $xeTable.dispatchEvent('cell-delete-value', params, evnt)
             }
           }
-        } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selected.row || selectColumn)) {
+        } else if (hasBackspaceKey && keyboardConfig && keyboardOpts.isBack && isEnableConf(editConfig) && (selectRow || selectColumn)) {
           if (!isEditStatus) {
             const { backMethod } = keyboardOpts
             // 如果是删除键
-            if (keyboardOpts.isDel && isEnableConf(editConfig) && (selected.row || selectColumn)) {
+            if (keyboardOpts.isDel && isEnableConf(editConfig) && (selectRow || selectColumn)) {
               const params = {
-                row: selected.row,
-                rowIndex: $xeTable.getRowIndex(selected.row),
+                row: selectRow,
+                rowIndex: $xeTable.getRowIndex(selectRow),
+                $rowIndex: $xeTable.getVMRowIndex(selectRow),
+                _rowIndex: $xeTable.getVTRowIndex(selectRow),
                 column: selectColumn as VxeTableDefines.ColumnInfo,
                 columnIndex: $xeTable.getColumnIndex(selectColumn),
+                $columnIndex: $xeTable.getVMColumnIndex(selectColumn),
+                _columnIndex: $xeTable.getVTColumnIndex(selectColumn),
                 $table: $xeTable,
                 $grid: $xeGrid,
                 $gantt: $xeGantt
@@ -8329,20 +8335,24 @@ const tableMethods: any = {
             evnt.preventDefault()
             $xeTable.handleUndoStackEvent(evnt)
           }
-        } else if (keyboardConfig && keyboardOpts.isEdit && !isControlKey && (isSpacebar || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
+        } else if (keyboardConfig && keyboardOpts.isEdit && !isControlKey && (isSpacebar || isProcess || (keyCode >= 48 && keyCode <= 57) || (keyCode >= 65 && keyCode <= 90) || (keyCode >= 96 && keyCode <= 111) || (keyCode >= 186 && keyCode <= 192) || (keyCode >= 219 && keyCode <= 222))) {
           const { editMode, editMethod } = keyboardOpts
           // 启用编辑后，空格键功能将失效
           // if (isSpacebar) {
           //   evnt.preventDefault()
           // }
           // 如果是按下非功能键之外允许直接编辑
-          if (selectColumn && selected.row && isEnableConf(selectColumn.editRender)) {
+          if (selectColumn && selectRow && isEnableConf(selectColumn.editRender)) {
             const beforeEditMethod = editOpts.beforeEditMethod || editOpts.activeMethod
             const params = {
-              row: selected.row,
-              rowIndex: $xeTable.getRowIndex(selected.row),
+              row: selectRow,
+              rowIndex: $xeTable.getRowIndex(selectRow),
+              $rowIndex: $xeTable.getVMRowIndex(selectRow),
+              _rowIndex: $xeTable.getVTRowIndex(selectRow),
               column: selectColumn,
               columnIndex: $xeTable.getColumnIndex(selectColumn),
+              $columnIndex: $xeTable.getVMColumnIndex(selectColumn),
+              _columnIndex: $xeTable.getVTColumnIndex(selectColumn),
               $table: $xeTable,
               $grid: $xeGrid,
               $gantt: $xeGantt

package/packages/table/src/table.ts

@@ -1839,7 +1839,7 @@ export default {
     if (rowOpts.height && !this.showOverflow) {
       warnLog('vxe.error.notProp', ['table.show-overflow'])
     }
-    if (!$xeTable.triggerCelllAreaMnEvent) {
+    if (!$xeTable.triggerClAreaMnEvent) {
       if (props.areaConfig) {
         warnLog('vxe.error.notProp', ['area-config'])
       }

package/packages/ui/index.ts

@@ -205,9 +205,11 @@ VxeUI.setConfig({
     },
     editConfig: {
       // mode: 'cell',
+      // cache: true,
       showIcon: true,
       showAsterisk: true,
-      autoFocus: true
+      autoFocus: true,
+      isReuseKeep: true
     },
     importConfig: {
       _typeMaps: {

package/styles/components/table.scss

@@ -2694,6 +2694,24 @@ $btnThemeList: (
       padding: 0;
     }
   }
+
+  .vxe-body--row {
+    .vxe-table--column {
+      .vxe-cell {
+        .vxe-cell--wrapper {
+          & > .vxe-reusekeep-control {
+            position: absolute;
+            width: 0;
+            height: 0;
+            opacity: 0;
+            border: 0;
+            padding: 0;
+            outline: none;
+          }
+        }
+      }
+    }
+  }
 }
 
 /*valid error*/