vxe-table 4.18.0-beta.2 → 4.18.0-beta.20

package/packages/table/src/body.ts

@@ -122,7 +122,7 @@ export default defineVxeComponent({
 
       const { columnKey, resizable: allResizable, showOverflow: allShowOverflow, border, height, treeConfig, cellClassName: allCellClassName, cellStyle, align: allAlign, spanMethod, mouseConfig, editConfig, editRules, tooltipConfig, padding: allPadding } = tableProps
       const { tableData, tableColumn, dragRow, overflowX, overflowY, currentColumn, scrollXLoad, scrollYLoad, mergeBodyFlag, calcCellHeightFlag, resizeHeightFlag, resizeWidthFlag, editStore, isAllOverflow, validErrorMaps } = tableReactData
-      const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore } = tableInternalData
+      const { fullAllDataRowIdData, fullColumnIdData, mergeBodyCellMaps, visibleColumn, afterFullData, mergeBodyList, scrollXStore, scrollYStore, keepUpdateFieldMaps } = tableInternalData
       const cellOpts = computeCellOpts.value
       const validOpts = computeValidOpts.value
       const checkboxOpts = computeCheckboxOpts.value
@@ -142,7 +142,7 @@ export default defineVxeComponent({
       const areaOpts = computeAreaOpts.value
       const cellOffsetWidth = computeCellOffsetWidth.value
       const { selectCellToRow } = areaOpts
-      const { type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column
+      const { field, type, cellRender, editRender, align, showOverflow, className, treeNode, rowResize, padding, verticalAlign, slots } = column
       const { verticalAlign: allVerticalAlign } = cellOpts
       const { actived } = editStore
       const rowRest = fullAllDataRowIdData[rowid] || {}
@@ -297,8 +297,8 @@ export default defineVxeComponent({
         }
       }
       // 如果编辑列开启显示状态
-      if (!fixedHiddenColumn && editConfig && (editRender || cellRender) && (editOpts.showStatus || editOpts.showUpdateStatus)) {
-        isDirty = $xeTable.isUpdateByRow(row, column.field)
+      if (!fixedHiddenColumn && editConfig && (editOpts.showStatus || editOpts.showUpdateStatus) && keepUpdateFieldMaps[field]) {
+        isDirty = $xeTable.isUpdateByRow(row, field)
       }
 
       const isVNAutoHeight = !hasEllipsis && (scrollYLoad || scrollXLoad)
@@ -600,6 +600,13 @@ export default defineVxeComponent({
           const expandOpts = computeExpandOpts.value
           const { height: expandHeight, padding, mode: expandMode } = expandOpts
           if (expandMode === 'fixed') {
+            const currExpHeight = rowRest.expandHeight
+            let expHeight = 0
+            if (rowExpandHeightFlag) {
+              if (currExpHeight || expandHeight) {
+                expHeight = (currExpHeight || expandHeight || 0) + 1
+              }
+            }
             rows.push(
               h('tr', {
                 class: 'vxe-body--row-expanded-place',
@@ -610,7 +617,7 @@ export default defineVxeComponent({
                   class: 'vxe-body--row-expanded-place-column',
                   colspan: tableColumn.length,
                   style: {
-                    height: `${rowExpandHeightFlag ? (rowRest.expandHeight || expandHeight) : 0}px`
+                    height: `${expHeight}px`
                   }
                 })
               ])

package/packages/table/src/emits.ts

@@ -74,6 +74,7 @@ export const tableEmits: VxeTableEmits = [
   'column-dragend',
 
   'enter-append-row',
+  'tab-append-row',
 
   'edit-actived', // 废弃
 

package/packages/table/src/props.ts

@@ -270,13 +270,15 @@ export const tableProps = {
   // 区域配置项
   areaConfig: Object as PropType<VxeTablePropTypes.AreaConfig>,
   // 按键配置项
-  keyboardConfig: Object as PropType<VxeTablePropTypes.KeyboardConfig<any>>,
+  keyboardConfig: Object as PropType<VxeTablePropTypes.KeyboardConfig>,
   // 复制粘/贴配置项
-  clipConfig: Object as PropType<VxeTablePropTypes.ClipConfig<any>>,
+  clipConfig: Object as PropType<VxeTablePropTypes.ClipConfig>,
   // 查找/替换配置项
   fnrConfig: Object as PropType<VxeTablePropTypes.FNRConfig>,
   // 编辑配置项
-  editConfig: Object as PropType<VxeTablePropTypes.EditConfig<any>>,
+  editConfig: Object as PropType<VxeTablePropTypes.EditConfig>,
+  // 数据状态监听配置项
+  editDirtyConfig: Object as PropType<VxeTablePropTypes.EditDirtyConfig>,
   // 校验配置项
   validConfig: Object as PropType<VxeTablePropTypes.ValidConfig>,
   // 校验规则配置项

package/packages/table/src/table.ts

@@ -4,7 +4,7 @@ import XEUtils from 'xe-utils'
 import { initTpImg, getTpImg, isPx, isScale, hasClass, addClass, removeClass, scrollTopTo, getEventTargetNode, getPaddingTopBottomSize, setScrollTop, setScrollLeft, toCssUnit, hasControlKey, checkTargetElement } from '../../ui/src/dom'
 import { getLastZIndex, nextZIndex, hasChildrenList, getFuncText, isEnableConf, formatText, eqEmptyValue } from '../../ui/src/utils'
 import { VxeUI } from '../../ui'
-import { createReactData, createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util'
+import { createReactData, createInternalData, getRowUniqueId, createRowId, clearTableAllStatus, getColumnList, toFilters, hasDeepKey, getRowkey, getRowid, rowToVisible, colToVisible, getCellValue, setCellValue, handleRowidOrRow, handleFieldOrColumn, toTreePathSeq, restoreScrollLocation, getRootColumn, getRefElem, getColReMinWidth, createHandleUpdateRowId, createHandleGetRowId, getCalcHeight, getCellRestHeight, getLastChildColumn } from './util'
 import { getSlotVNs } from '../../ui/src/vn'
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from '../../ui/src/anime'
 import { warnLog, errLog } from '../../ui/src/log'
@@ -370,6 +370,10 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().table.editConfig, props.editConfig) as VxeTablePropTypes.EditOpts
     })
 
+    const computeEditDirtyOpts = computed(() => {
+      return Object.assign({}, getConfig().table.editDirtyConfig, props.editDirtyConfig)
+    })
+
     const computeSortOpts = computed(() => {
       return Object.assign({ orders: ['asc', 'desc', null] }, getConfig().table.sortConfig, props.sortConfig) as VxeTablePropTypes.SortOpts
     })
@@ -586,6 +590,27 @@ export default defineVxeComponent({
       return Object.assign({}, getConfig().table.customConfig, props.customConfig)
     })
 
+    const computeCustomSimpleMode = computed(() => {
+      const { minHeight, height } = props
+      const customOpts = computeCustomOpts.value
+      const { mode, popupOptions, placement } = customOpts
+      if (!placement || placement === 'top-left' || placement === 'top-right') {
+        if (!(mode === 'modal' || mode === 'drawer')) {
+          const { mode } = popupOptions || {}
+          if (!mode || mode === 'auto') {
+            if (height || minHeight) {
+              return 'inside'
+            }
+            return 'outside'
+          }
+          if (mode) {
+            return mode
+          }
+        }
+      }
+      return ''
+    })
+
     const computeTableRowExpandedList = computed(() => {
       const { tableData, rowExpandedFlag, expandColumn, rowGroupExpandedFlag, treeExpandedFlag } = reactData
       const { visibleDataRowIdData, rowExpandedMaps } = internalData
@@ -631,6 +656,33 @@ export default defineVxeComponent({
       return false
     })
 
+    const computeKeepFields = computed(() => {
+      const { tableFullColumn } = internalData
+      const { updateColFlag } = reactData
+      const editDirtyOpts = computeEditDirtyOpts.value
+      const { includeFields, excludeFields } = editDirtyOpts
+      const kpFields: string[] = []
+      if (updateColFlag) {
+        if (includeFields && includeFields.length) {
+          return includeFields
+        }
+        const exfMaps: Record<string, number> = {}
+        if (excludeFields && excludeFields.length) {
+          excludeFields.forEach(field => {
+            exfMaps[field] = 1
+          })
+        }
+        for (let i = 0; i < tableFullColumn.length; i++) {
+          const column = tableFullColumn[i]
+          const { field, type, editRender, cellRender } = column
+          if (field && !type && (editRender || cellRender) && !exfMaps[field]) {
+            kpFields.push(field)
+          }
+        }
+      }
+      return kpFields
+    })
+
     const computeTableBorder = computed(() => {
       const { border } = props
       if (border === true) {
@@ -762,6 +814,7 @@ export default defineVxeComponent({
       computeHeaderTooltipOpts,
       computeFooterTooltipOpts,
       computeEditOpts,
+      computeEditDirtyOpts,
       computeSortOpts,
       computeFilterOpts,
       computeFloatingFilterOpts,
@@ -786,11 +839,13 @@ export default defineVxeComponent({
       computeLoadingOpts,
       computeCellOffsetWidth,
       computeCustomOpts,
+      computeCustomSimpleMode,
       computeLeftFixedWidth,
       computeRightFixedWidth,
       computeBodyMergeCoverFixed,
       computeFixedColumnSize,
       computeIsMaxFixedColumn,
+      computeKeepFields,
       computeIsAllCheckboxDisabled,
       computeIsHeaderRenderOptimize,
       computeIsBodyRenderOptimize,
@@ -1445,14 +1500,17 @@ export default defineVxeComponent({
 
     const calcTableHeight = (key: 'height' | 'minHeight' | 'maxHeight') => {
       const { editConfig, editRules } = props
-      const { parentHeight } = reactData
+      const { parentHeight, tableColumn } = reactData
       let val = props[key]
       if (key === 'minHeight') {
         const defMinHeight = getConfig().table.minHeight
         if (XEUtils.eqNull(val)) {
           if (eqEmptyValue(defMinHeight)) {
-            // 编辑模式默认最小高度
-            if (editRules && isEnableConf(editConfig)) {
+            if (!tableColumn.length) {
+              // 如果全部列被隐藏
+              val = 40
+            } else if (editRules && isEnableConf(editConfig)) {
+              // 编辑模式默认最小高度
               val = 144
             }
           } else {
@@ -1564,6 +1622,7 @@ export default defineVxeComponent({
           const newCollectCols = XEUtils.toArrayTree(XEUtils.orderBy(allCols, 'renderSortNumber'), { key: 'id', parentKey: 'parentId', children: 'children' })
           internalData.collectColumn = newCollectCols
           internalData.tableFullColumn = getColumnList(newCollectCols)
+          reactData.updateColFlag++
         }
         reactData.isCustomStatus = true
       } else {
@@ -1714,14 +1773,19 @@ export default defineVxeComponent({
         tableFullColumn.forEach(handleFunc)
       }
 
-      if (expandColumn && expandOpts.mode !== 'fixed' && virtualYOpts.enabled) {
-        warnLog('vxe.error.notConflictProp', ['column.type="expand', 'virtual-y-config.enabled=false'])
-      }
-      if ((expandColumn && expandOpts.mode !== 'fixed') && mouseOpts.area) {
-        errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand'])
-      }
-      if (expandColumn && expandOpts.mode !== 'inside' && (treeConfig && !treeOpts.transform)) {
-        errLog('vxe.error.notConflictProp', ['tree-config.transform=false', 'expand-config.mode=fixed'])
+      if (expandColumn) {
+        if (expandOpts.mode !== 'fixed' && virtualYOpts.enabled) {
+          warnLog('vxe.error.notConflictProp', ['column.type="expand', 'virtual-y-config.enabled=false'])
+        }
+        if ((expandOpts.mode !== 'fixed') && mouseOpts.area) {
+          errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand'])
+        }
+        if (expandOpts.mode !== 'inside' && (treeConfig && !treeOpts.transform)) {
+          errLog('vxe.error.notConflictProp', ['tree-config.transform=false', 'expand-config.mode=fixed'])
+        }
+        if (props.spanMethod) {
+          warnLog('vxe.error.notSupportProp', ['column.type=expand', 'span-method', 'span-method=null'])
+        }
       }
 
       if (htmlColumn) {
@@ -3483,6 +3547,7 @@ export default defineVxeComponent({
       if (rowGroups) {
         const aggregateOpts = computeAggregateOpts.value
         const { rowField, parentField, childrenField, mapChildrenField } = aggregateOpts
+        const rowOpts = computeRowOpts.value
         const checkboxOpts = computeCheckboxOpts.value
         const { checkField } = checkboxOpts
         const indeterminateField = checkboxOpts.indeterminateField || checkboxOpts.halfField
@@ -3518,10 +3583,10 @@ export default defineVxeComponent({
               childCount: 0,
               [rowField]: getRowUniqueId(),
               [parentField]: null,
-              [rowkey]: getRowUniqueId(),
               [childrenField]: childTreeData,
               [mapChildrenField]: childTreeData
             }
+            aggRow[rowkey] = createRowId(rowOpts, aggRow, rowkey)
             if (checkField) {
               aggRow[checkField] = false
             }
@@ -3698,7 +3763,7 @@ export default defineVxeComponent({
           // }
 
           if (!(props.height || props.maxHeight)) {
-            errLog('vxe.error.reqProp', ['height | max-height | virtual-y-config={enabled: false}'])
+            errLog('vxe.error.reqSupportProp', ['virtual-y-config.enabled = true', 'height | max-height'])
           }
           // if (!props.showOverflow) {
           //   warnLog('vxe.error.reqProp', ['table.show-overflow'])
@@ -3825,8 +3890,9 @@ export default defineVxeComponent({
     const handleUpdateColumn = () => {
       const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
       internalData.collectColumn = columnList
-      const tableFullColumn = getColumnList(columnList)
-      internalData.tableFullColumn = tableFullColumn
+      const tFullColumn = getColumnList(columnList)
+      internalData.tableFullColumn = tFullColumn
+      reactData.updateColFlag++
       cacheColumnMap()
     }
 
@@ -4005,8 +4071,9 @@ export default defineVxeComponent({
     const handleInitColumn = (collectColumn: VxeTableDefines.ColumnInfo[]) => {
       const expandOpts = computeExpandOpts.value
       internalData.collectColumn = collectColumn
-      const tableFullColumn = getColumnList(collectColumn)
-      internalData.tableFullColumn = tableFullColumn
+      const tFullColumn = getColumnList(collectColumn)
+      internalData.tableFullColumn = tFullColumn
+      reactData.updateColFlag++
       reactData.isColLoading = true
       initColumnHierarchy()
       return Promise.resolve(
@@ -4557,7 +4624,7 @@ export default defineVxeComponent({
             const rowid = expandEl.getAttribute('rowid') || ''
             const rowRest = fullAllDataRowIdData[rowid]
             if (rowRest) {
-              const expandHeight = expandEl.offsetHeight + 1
+              const expandHeight = expandEl.offsetHeight
               const trEl = bodyScrollElem.querySelector(`.vxe-body--row[rowid="${rowid}"]`) as HTMLTableCellElement
               let offsetTop = 0
               if (scrollYLoad) {
@@ -5315,7 +5382,8 @@ export default defineVxeComponent({
        */
       isUpdateByRow (rowidOrRow, field) {
         const { keepSource } = props
-        const { tableFullColumn, fullDataRowIdData, sourceDataRowIdData } = internalData
+        const { fullDataRowIdData, sourceDataRowIdData } = internalData
+        const keepFields = computeKeepFields.value
         if (keepSource) {
           const rowid = XEUtils.isString(rowidOrRow) || XEUtils.isNumber(rowidOrRow) ? rowidOrRow : getRowid($xeTable, rowidOrRow)
           const rowRest = fullDataRowIdData[rowid]
@@ -5329,9 +5397,8 @@ export default defineVxeComponent({
             if (arguments.length > 1) {
               return !eqCellValue(oRow, row, field as string)
             }
-            for (let index = 0, len = tableFullColumn.length; index < len; index++) {
-              const property = tableFullColumn[index].field
-              if (property && !eqCellValue(oRow, row, property)) {
+            for (let i = 0; i < keepFields.length; i++) {
+              if (!eqCellValue(oRow, row, keepFields[i])) {
                 return true
               }
             }
@@ -7028,8 +7095,8 @@ export default defineVxeComponent({
           XEUtils.each(fullAllDataRowIdData, (rowRest) => {
             rowRest.treeLoaded = false
           })
+          internalData.treeExpandedMaps = {}
         }
-        internalData.treeExpandedMaps = {}
         if (transform) {
           handleVirtualTreeToList()
           $xeTable.handleTableData()
@@ -7236,18 +7303,13 @@ export default defineVxeComponent({
           setScrollTop(rightScrollElem, scrollTop)
           loadScrollYData()
         }
-        if (reactData.scrollXLoad || reactData.scrollYLoad) {
-          return new Promise<void>(resolve => {
-            setTimeout(() => {
-              nextTick(() => {
-                internalData.intoRunScroll = false
-                resolve()
-              })
-            }, 30)
-          })
-        }
-        return nextTick().then(() => {
-          internalData.intoRunScroll = false
+        return new Promise<void>(resolve => {
+          setTimeout(() => {
+            nextTick(() => {
+              internalData.intoRunScroll = false
+              resolve()
+            })
+          }, (reactData.scrollXLoad || reactData.scrollYLoad) ? 30 : 0)
         })
       },
       /**
@@ -7897,7 +7959,7 @@ export default defineVxeComponent({
         $xeTable.preventEvent(evnt, 'event.keydown', null, () => {
           const { mouseConfig, keyboardConfig, treeConfig, editConfig, highlightCurrentRow, highlightCurrentColumn } = props
           const { ctxMenuStore, editStore, currentRow } = reactData
-          const { afterFullData } = internalData
+          const { afterFullData, visibleColumn } = internalData
           const isContentMenu = computeIsContentMenu.value
           const bodyMenu = computeBodyMenu.value
           const keyboardOpts = computeKeyboardOpts.value
@@ -7907,6 +7969,7 @@ export default defineVxeComponent({
           const menuList = computeMenuList.value
           const rowOpts = computeRowOpts.value
           const columnOpts = computeColumnOpts.value
+          const { isLastEnterAppendRow, beforeEnterMethod, enterMethod, isLastTabAppendRow, beforeTabMethod, tabMethod } = keyboardOpts
           const { selected, actived } = editStore
           const childrenField = treeOpts.children || treeOpts.childrenField
           const keyCode = evnt.keyCode
@@ -7980,7 +8043,6 @@ export default defineVxeComponent({
               internalData._keyCtx = false
             }, 1000)
           } else if (isEnter && !isAltKey && keyboardConfig && keyboardOpts.isEnter && (selected.row || actived.row || (treeConfig && (rowOpts.isCurrent || highlightCurrentRow) && currentRow))) {
-            const { isLastEnterAppendRow, beforeEnterMethod, enterMethod } = keyboardOpts
             // 退出选中
             if (isControlKey) {
               // 如果是激活编辑状态，则取消编辑
@@ -7997,6 +8059,8 @@ export default defineVxeComponent({
             } else {
               // 如果是激活状态，退则出到上一行/下一行
               if (selected.row || actived.row) {
+                const activeRow = selected.row || actived.row
+                const activeColumn = selected.column || actived.column
                 const activeParams = selected.row ? selected.args : actived.args
                 if (hasShiftKey) {
                   if (keyboardOpts.enterToTab) {
@@ -8005,12 +8069,44 @@ export default defineVxeComponent({
                     $xeTable.moveEnterSelected(activeParams, isLeftArrow, true, isRightArrow, false, evnt)
                   }
                 } else {
+                  const _rowIndex = $xeTable.getVTRowIndex(activeRow)
+                  const _columnIndex = $xeTable.getVTColumnIndex(activeColumn)
                   if (keyboardOpts.enterToTab) {
-                    $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt)
+                    const ttrParams = {
+                      row: activeRow,
+                      rowIndex: $xeTable.getRowIndex(activeRow),
+                      $rowIndex: $xeTable.getVMRowIndex(activeRow),
+                      _rowIndex,
+                      column: activeColumn,
+                      columnIndex: $xeTable.getColumnIndex(activeColumn),
+                      $columnIndex: $xeTable.getVMColumnIndex(activeColumn),
+                      _columnIndex,
+                      $table: $xeTable
+                    }
+                    if (!beforeTabMethod || beforeTabMethod(ttrParams) !== false) {
+                      evnt.preventDefault()
+                      // 最后一行按下Tab键，自动追加一行
+                      if (isLastTabAppendRow) {
+                        const newColumn = visibleColumn[0]
+                        if (_rowIndex >= afterFullData.length - 1 && _columnIndex >= visibleColumn.length - 1) {
+                          if (actived.row) {
+                            $xeTable.handleClearEdit(evnt)
+                          }
+                          $xeTable.insertAt({}, -1).then(({ row: newRow }) => {
+                            $xeTable.scrollToRow(newRow, newColumn)
+                            $xeTable.handleSelected({ ...activeParams, row: newRow, column: newColumn }, evnt)
+                          })
+                          $xeTable.dispatchEvent('tab-append-row', ttrParams, evnt)
+                          return
+                        }
+                      }
+                      if (tabMethod) {
+                        tabMethod(ttrParams)
+                      } else {
+                        $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt)
+                      }
+                    }
                   } else {
-                    const activeRow = selected.row || actived.row
-                    const activeColumn = selected.column || actived.column
-                    const _rowIndex = $xeTable.getVTRowIndex(activeRow)
                     const etrParams = {
                       row: activeRow,
                       rowIndex: $xeTable.getRowIndex(activeRow),
@@ -8019,10 +8115,11 @@ export default defineVxeComponent({
                       column: activeColumn,
                       columnIndex: $xeTable.getColumnIndex(activeColumn),
                       $columnIndex: $xeTable.getVMColumnIndex(activeColumn),
-                      _columnIndex: $xeTable.getVTColumnIndex(activeColumn),
+                      _columnIndex,
                       $table: $xeTable
                     }
                     if (!beforeEnterMethod || beforeEnterMethod(etrParams) !== false) {
+                      evnt.preventDefault()
                       // 最后一行按下回车键，自动追加一行
                       if (isLastEnterAppendRow) {
                         if (_rowIndex >= afterFullData.length - 1) {
@@ -8034,9 +8131,13 @@ export default defineVxeComponent({
                           return
                         }
                       }
-                      $xeTable.moveEnterSelected(activeParams, isLeftArrow, false, isRightArrow, true, evnt)
                       if (enterMethod) {
                         enterMethod(etrParams)
+                      } else {
+                        if (actived.row) {
+                          $xeTable.handleClearEdit(evnt)
+                        }
+                        $xeTable.moveEnterSelected(activeParams, isLeftArrow, false, isRightArrow, true, evnt)
                       }
                     }
                   }
@@ -8077,10 +8178,49 @@ export default defineVxeComponent({
             }
           } else if (isTab && keyboardConfig && keyboardOpts.isTab) {
             // 如果按下了 Tab 键切换
-            if (selected.row || selected.column) {
-              $xeTable.moveTabSelected(selected.args, hasShiftKey, evnt)
-            } else if (actived.row || actived.column) {
-              $xeTable.moveTabSelected(actived.args, hasShiftKey, evnt)
+            if (selected.row || actived.row) {
+              const activeRow = selected.row || actived.row
+              const activeColumn = selected.column || actived.column
+              const activeParams = selected.row ? selected.args : actived.args
+              const _rowIndex = $xeTable.getVTRowIndex(activeRow)
+              const _columnIndex = $xeTable.getVTColumnIndex(activeColumn)
+              const ttrParams = {
+                row: activeRow,
+                rowIndex: $xeTable.getRowIndex(activeRow),
+                $rowIndex: $xeTable.getVMRowIndex(activeRow),
+                _rowIndex,
+                column: activeColumn,
+                columnIndex: $xeTable.getColumnIndex(activeColumn),
+                $columnIndex: $xeTable.getVMColumnIndex(activeColumn),
+                _columnIndex,
+                $table: $xeTable
+              }
+              if (!beforeTabMethod || beforeTabMethod(ttrParams) !== false) {
+                evnt.preventDefault()
+                // 最后一行按下Tab键，自动追加一行
+                if (isLastTabAppendRow) {
+                  const newColumn = visibleColumn[0]
+                  if (_rowIndex >= afterFullData.length - 1 && _columnIndex >= visibleColumn.length - 1) {
+                    if (actived.row) {
+                      $xeTable.handleClearEdit(evnt)
+                    }
+                    $xeTable.insertAt({}, -1).then(({ row: newRow }) => {
+                      $xeTable.scrollToRow(newRow, newColumn)
+                      $xeTable.handleSelected({ ...activeParams, row: newRow, column: newColumn }, evnt)
+                    })
+                    $xeTable.dispatchEvent('tab-append-row', ttrParams, evnt)
+                    return
+                  }
+                }
+                if (tabMethod) {
+                  tabMethod(ttrParams)
+                } else {
+                  if (actived.row) {
+                    $xeTable.handleClearEdit(evnt)
+                  }
+                  $xeTable.moveTabSelected(activeParams, hasShiftKey, evnt)
+                }
+              }
             }
           } else if (keyboardConfig && keyboardOpts.isDel && hasDeleteKey && isEnableConf(editConfig) && (selected.row || selected.column)) {
             // 如果是删除键
@@ -8619,6 +8759,7 @@ export default defineVxeComponent({
         const expandOpts = computeExpandOpts.value
         const treeOpts = computeTreeOpts.value
         const radioOpts = computeRadioOpts.value
+        const rowOpts = computeRowOpts.value
         const checkboxOpts = computeCheckboxOpts.value
         const childrenField = treeOpts.children || treeOpts.childrenField
         const rowkey = getRowkey($xeTable)
@@ -8652,7 +8793,7 @@ export default defineVxeComponent({
           }
           // 必须有行数据的唯一主键，可以自行设置；也可以默认生成一个随机数
           if (eqEmptyValue(XEUtils.get(record, rowkey))) {
-            XEUtils.set(record, rowkey, getRowUniqueId())
+            XEUtils.set(record, rowkey, createRowId(rowOpts, record, rowkey))
           }
           return record
         })
@@ -10456,6 +10597,7 @@ export default defineVxeComponent({
                 // 移出源位置
                 if (oldRest && newRest) {
                   const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, {
+                    updated: false,
                     key: rowField,
                     parentKey: parentField,
                     children: mapChildrenField
@@ -12534,7 +12676,11 @@ export default defineVxeComponent({
               }],
               rowid,
               style: cellStyle
-            }, expandColumn.renderData(expandParams))
+            }, [
+              h('div', {
+                class: 'vxe-body--row-expanded-content'
+              }, expandColumn.renderData(expandParams))
+            ])
           )
         })
       }
@@ -12723,6 +12869,8 @@ export default defineVxeComponent({
       const columnDragOpts = computeColumnDragOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const customSimpleMode = computeCustomSimpleMode.value
+      const showCustomSimpleOutside = customSimpleMode === 'outside'
       const { isCrossTableDrag } = rowDragOpts
       const tbOns: {
         onContextmenu: (...args: any[]) => void
@@ -12875,7 +13023,7 @@ export default defineVxeComponent({
               /**
                * 自定义列
                */
-              initStore.custom
+              !showCustomSimpleOutside && initStore.custom
                 ? h(TableCustomPanelComponent, {
                   key: 'cs',
                   ref: refTableCustom,
@@ -12921,6 +13069,16 @@ export default defineVxeComponent({
             h('div', {
               ref: refPopupWrapperElem
             }, [
+              /**
+               * 自定义列
+               */
+              showCustomSimpleOutside && initStore.custom
+                ? h(TableCustomPanelComponent, {
+                  key: 'cs',
+                  ref: refTableCustom,
+                  customStore
+                })
+                : renderEmptyElement($xeTable),
               /**
                * 筛选
                */
@@ -13232,6 +13390,22 @@ export default defineVxeComponent({
       }
     })
 
+    const kfFlag = ref(0)
+    watch(() => reactData.updateColFlag, () => {
+      kfFlag.value++
+    })
+    watch(computeKeepFields, () => {
+      kfFlag.value++
+    })
+    watch(kfFlag, () => {
+      const keepFields = computeKeepFields.value
+      const kpfMaps: Record<string, number> = {}
+      keepFields.forEach(field => {
+        kpfMaps[field] = 1
+      })
+      internalData.keepUpdateFieldMaps = kpfMaps
+    })
+
     if ($xeTabs) {
       watch(() => $xeTabs ? $xeTabs.reactData.resizeFlag : null, () => {
         handleGlobalResizeEvent()
@@ -13270,9 +13444,10 @@ export default defineVxeComponent({
     })
 
     onMounted(() => {
-      const { exportConfig, importConfig, treeConfig } = props
+      const { exportConfig, importConfig, treeConfig, minHeight } = props
       const { scrollXStore, scrollYStore } = internalData
       const columnOpts = computeColumnOpts.value
+      const columnDragOpts = computeColumnDragOpts.value
       const aggregateOpts = computeAggregateOpts.value
       const virtualYOpts = computeVirtualYOpts.value
       const editOpts = computeEditOpts.value
@@ -13289,6 +13464,7 @@ export default defineVxeComponent({
       // const currentColumnOpts = computeCurrentColumnOpts.value
       // const keyboardOpts = computeKeyboardOpts.value
       const rowDragOpts = computeRowDragOpts.value
+      const areaOpts = computeAreaOpts.value
       const { groupFields } = aggregateOpts
 
       if ($xeGantt) {
@@ -13401,6 +13577,9 @@ export default defineVxeComponent({
           errLog('vxe.error.notProp', ['mouse-config.area'])
           return
         }
+        if (mouseOpts.area && areaOpts.selectCellByHeader && columnOpts.drag && columnDragOpts.trigger === 'cell') {
+          errLog('vxe.error.notSupportProp', ['area-config.selectCellByHeader & column-config.drag', 'column-drag-config.trigger=cell', 'column-drag-config.trigger=default | area-config.selectCellByHeader=false'])
+        }
       }
       if (!$xeTable.handlePivotTableAggregateData) {
         if (customOpts.allowGroup) {
@@ -13454,6 +13633,9 @@ export default defineVxeComponent({
       if (checkboxOpts.halfField) {
         warnLog('vxe.error.delProp', ['checkbox-config.halfField', 'checkbox-config.indeterminateField'])
       }
+      if (props.editConfig && isEnableConf(editOpts) && props.editRules && (minHeight === 0 || minHeight === '0')) {
+        warnLog('vxe.error.reqSupportProp', ['edit-config & edit-rules', 'min-height'])
+      }
 
       if (treeConfig) {
         XEUtils.arrayEach(['rowField', 'parentField', 'childrenField', 'hasChildField', 'mapChildrenField'], key => {
@@ -13587,11 +13769,11 @@ export default defineVxeComponent({
 
       $xeTable.preventEvent(null, 'beforeUnmount', { $table: $xeTable })
       XEUtils.assign(reactData, createReactData())
+      XEUtils.assign(internalData, createInternalData())
     })
 
     onUnmounted(() => {
       $xeTable.preventEvent(null, 'unmounted', { $table: $xeTable })
-      XEUtils.assign(internalData, createInternalData())
     })
 
     nextTick(() => {