vxe-table 3.22.12 → 3.23.0-beta.1

package/packages/table/src/methods.ts

@@ -4224,6 +4224,7 @@ function handleSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   const internalData = $xeTable as unknown as TableInternalData
 
   const { scrollXLoad, scrollYLoad, isAllOverflow } = reactData
+  const autoWidthColumnList = $xeTable.computeAutoWidthColumnList
   internalData.lcsRunTime = Date.now()
   internalData.lcsTimeout = undefined
   internalData.intoRunScroll = false
@@ -4246,6 +4247,10 @@ function handleSyncScroll ($xeTable: VxeTableConstructor & VxeTablePrivateMethod
   }
   if (isRollY && scrollYLoad) {
     yRest = $xeTable.updateScrollYData().then(() => {
+      if (autoWidthColumnList.length) {
+        calcCellWidth($xeTable)
+        autoCellWidth($xeTable)
+      }
       if (!isAllOverflow) {
         calcCellHeight($xeTable)
         updateRowOffsetTop($xeTable)
@@ -7933,8 +7938,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 +7996,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 +8019,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 +8029,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 +8048,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 +8059,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 +8085,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 +8192,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 +8207,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 +8253,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 +8271,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 +8282,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 +8340,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/packages/ui/src/dom.ts

@@ -55,7 +55,13 @@ export function isScale (val: any) {
 }
 
 export function hasClass (elem: any, cls: any) {
-  return !!(elem && elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
+  if (elem) {
+    if (elem.classList) {
+      return elem.classList.contains(cls)
+    }
+    return !!(elem.className && elem.className.match && elem.className.match(getClsRE(cls)))
+  }
+  return false
 }
 
 export function removeClass (elem: any, cls: any) {

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*/