vxe-table 4.14.0-beta.1 → 4.14.0-beta.10

package/packages/locale/lang/vi-VN.ts

@@ -36,6 +36,7 @@ export default {
       notCommands: 'Chỉ thị toàn cầu "{0}" không tồn tại',
       notSlot: 'Khe "{0}" không tồn tại',
       noTree: '"{0}" không được hỗ trợ trong cấu trúc cây',
+      noGroup: '数据分组后不支持 "{0}"',
       notProp: 'Tham số không được hỗ trợ "{0}"',
       checkProp: 'Khi khối lượng dữ liệu quá lớn, hộp kiểm có thể được lắp. Bạn nên đặt tham số "{0}" để cải thiện tốc độ kết xuất',
       coverProp: 'Tham số "{1}" của "{0}" được xác định nhiều lần, có thể gây ra lỗi',
@@ -336,6 +337,7 @@ export default {
       overCountErr: 'Chỉ các tệp {0} có thể được chọn nhiều nhất!',
       overCountExtraErr: 'Số lượng tối đa của {0} đã bị vượt quá và các tệp dư thừa {1} sẽ bị bỏ qua!',
       overSizeErr: 'Kích thước tệp tối đa không thể vượt quá {0}!',
+      manualUpload: '点击上传',
       reUpload: 'Tải lại lại',
       uploadProgress: 'Tải lên {0}%',
       uploadErr: 'Tải lên không thành công',
@@ -354,7 +356,8 @@ export default {
     colorPicker: {
       clear: 'Thông thoáng',
       confirm: 'xác nhận',
-      copySuccess: 'Được sao chép vào bảng tạm: {0}'
+      copySuccess: 'Được sao chép vào bảng tạm: {0}',
+      hex: 'HEX'
     },
     formDesign: {
       formName: 'Tên hình thức',

package/packages/locale/lang/zh-CHT.ts

@@ -36,6 +36,7 @@ export default {
       notCommands: '全局指令 "{0}" 不存在',
       notSlot: '插槽 "{0}" 不存在',
       noTree: '樹結構不支持 "{0}"',
+      noGroup: '数据分组后不支持 "{0}"',
       notProp: '不支持的參數 "{0}"',
       checkProp: '當數據量過大時可能會導致複選框卡頓，建議設置參數 "{0}" 提升渲染速度',
       coverProp: '"{0}" 的參數 "{1}" 重複定義，這可能會出現錯誤',
@@ -336,6 +337,7 @@ export default {
       overCountErr: '最多只能選擇{0}個文件！',
       overCountExtraErr: '已超出最大數量{0}個，超出的{1}個文件將被忽略！',
       overSizeErr: '文件大小最大不能超過{0}！',
+      manualUpload: '点击上传',
       reUpload: '重新上傳',
       uploadProgress: '上傳中 {0}%',
       uploadErr: '上傳失敗',
@@ -354,7 +356,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '確認',
-      copySuccess: '已復製到剪貼板：{0}'
+      copySuccess: '已復製到剪貼板：{0}',
+      hex: '十六进制'
     },
     formDesign: {
       formName: '表單名稱',

package/packages/locale/lang/zh-CN.ts

@@ -36,6 +36,7 @@ export default {
       notCommands: '全局指令 "{0}" 不存在',
       notSlot: '插槽 "{0}" 不存在',
       noTree: '树结构不支持 "{0}"',
+      noGroup: '数据分组后不支持 "{0}"',
       notProp: '不支持的参数 "{0}"',
       checkProp: '当数据量过大时可能会导致复选框卡顿，建议设置参数 "{0}" 提升渲染速度',
       coverProp: '"{0}" 的参数 "{1}" 重复定义，这可能会出现错误',
@@ -336,6 +337,7 @@ export default {
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',
+      manualUpload: '点击上传',
       reUpload: '重新上传',
       uploadProgress: '上传中 {0}%',
       uploadErr: '上传失败',
@@ -354,7 +356,8 @@ export default {
     colorPicker: {
       clear: '清除',
       confirm: '确认',
-      copySuccess: '已复制到剪贴板：{0}'
+      copySuccess: '已复制到剪贴板：{0}',
+      hex: '十六进制'
     },
     formDesign: {
       formName: '表单名称',

package/packages/table/module/custom/hook.ts

@@ -111,10 +111,6 @@ VxeUI.hooks.add('tableCustomModule', {
         }
       })
       reactData.isCustomStatus = true
-      reactData.isDragColMove = true
-      setTimeout(() => {
-        reactData.isDragColMove = false
-      }, 1000)
       return $xeTable.saveCustomStore('confirm').then(() => {
         if (allowGroup && allowValues && ($xeTable as any).handlePivotTableAggregateData) {
           if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {

package/packages/table/module/custom/panel.ts

@@ -475,7 +475,6 @@ export default defineVxeComponent({
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn)
             }
 
-            tableReactData.isDragColMove = true
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected()

package/packages/table/module/edit/hook.ts

@@ -104,8 +104,13 @@ hooks.add('tableEditModule', {
       })
     }
 
+    // const insertGroupRow = (newRecords: any[], isAppend: boolean) => {
+
+    // }
+
     const handleInsertRowAt = (records: any, targetRow: any, isInsertNextRow?: boolean) => {
       const { treeConfig } = props
+      const { isRowGroupStatus } = reactData
       const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData
       const treeOpts = computeTreeOpts.value
       const { transform, rowField, mapChildrenField } = treeOpts
@@ -118,6 +123,13 @@ hooks.add('tableEditModule', {
         // 如果为虚拟树
         if (treeConfig && transform) {
           insertTreeRow(newRecords, false)
+        } else if (isRowGroupStatus) {
+          // 如果分组
+          if (treeConfig) {
+            throw new Error(getI18n('vxe.error.noTree', ['insert']))
+          }
+          warnLog(getI18n('vxe.error.noGroup', ['remove']))
+          // insertGroupRow(newRecords, false)
         } else {
           newRecords.forEach(item => {
             const rowid = getRowid($xeTable, item)
@@ -140,6 +152,13 @@ hooks.add('tableEditModule', {
           // 如果为虚拟树
           if (treeConfig && transform) {
             insertTreeRow(newRecords, true)
+          } else if (isRowGroupStatus) {
+            // 如果分组
+            if (treeConfig) {
+              throw new Error(getI18n('vxe.error.noTree', ['insert']))
+            }
+            warnLog(getI18n('vxe.error.noGroup', ['remove']))
+            // insertGroupRow(newRecords, true)
           } else {
             newRecords.forEach(item => {
               const rowid = getRowid($xeTable, item)
@@ -202,6 +221,12 @@ hooks.add('tableEditModule', {
               warnLog('vxe.error.unableInsert')
               insertTreeRow(newRecords, true)
             }
+          } else if (isRowGroupStatus) {
+            // 如果分组
+            if (treeConfig) {
+              throw new Error(getI18n('vxe.error.noTree', ['insert']))
+            }
+            warnLog(getI18n('vxe.error.noGroup', ['remove']))
           } else {
             if (treeConfig) {
               throw new Error(getI18n('vxe.error.noTree', ['insert']))
@@ -488,7 +513,7 @@ hooks.add('tableEditModule', {
        */
       remove (rows: any) {
         const { treeConfig } = props
-        const { editStore } = reactData
+        const { editStore, isRowGroupStatus } = reactData
         const { tableFullTreeData, selectCheckboxMaps, afterFullData, mergeBodyList, tableFullData, pendingRowMaps, insertRowMaps, removeRowMaps } = internalData
         const checkboxOpts = computeCheckboxOpts.value
         const treeOpts = computeTreeOpts.value
@@ -544,6 +569,9 @@ hooks.add('tableEditModule', {
                 afterFullData.splice(afIndex, 1)
               }
             })
+          } else if (isRowGroupStatus) {
+            // 如果分组
+            warnLog(getI18n('vxe.error.noGroup', ['remove']))
           } else {
             rows.forEach((row: any) => {
               const tfIndex = $xeTable.findRowIndexOf(tableFullData, row)

package/packages/table/module/filter/hook.ts

@@ -9,7 +9,7 @@ import type { TableFilterMethods, TableFilterPrivateMethods } from '../../../../
 
 const { renderer, hooks } = VxeUI
 
-const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'resetFilterPanel', 'getCheckedFilters', 'updateFilterOptionStatus']
+const tableFilterMethodKeys: (keyof TableFilterMethods)[] = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus']
 
 hooks.add('tableFilterModule', {
   setupTable ($xeTable) {

package/packages/table/src/anime.ts

@@ -0,0 +1,52 @@
+
+import XEUtils from 'xe-utils'
+import { addClass, removeClass } from '../../ui/src/dom'
+
+const rowMoveCls = 'row--drag-move'
+const colMoveClass = 'col--drag-move'
+
+/**
+ * 上下拖拽
+ */
+export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetTop: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, rowMoveCls)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearRowAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls))
+    }
+  }, 500)
+}
+
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetLeft: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearColAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass))
+    }
+  }, 500)
+}

package/packages/table/src/body.ts

@@ -1,4 +1,4 @@
-import { TransitionGroup, h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
+import { h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
@@ -28,7 +28,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -47,7 +47,7 @@ export default defineVxeComponent({
     }
 
     const renderLine = (rowid: string, params: VxeTableDefines.CellRenderBodyParams, cellHeight: number): VxeComponentSlotType[] => {
-      const { row, column } = params
+      const { column } = params
       const { afterFullData } = tableInternalData
       const { treeConfig } = tableProps
       const treeOpts = computeTreeOpts.value
@@ -72,7 +72,7 @@ export default defineVxeComponent({
             h('div', {
               class: 'vxe-tree--line',
               style: {
-                height: `${$xeTable.eqRow(afterFullData[0], row) ? 1 : calcTreeLine(params, prevRow)}px`,
+                height: `${getRowid($xeTable, afterFullData[0]) === rowid ? 1 : calcTreeLine(params, prevRow)}px`,
                 bottom: `-${Math.floor(cellHeight / 2)}px`,
                 left: `${(rLevel * treeOpts.indent) + (rLevel ? 2 - getOffsetSize($xeTable) : 0) + 16}px`
               }
@@ -330,6 +330,8 @@ export default defineVxeComponent({
         tcStyle.minHeight = `${cellHeight}px`
       }
 
+      // console.log(lastScrollTime)
+
       const tdVNs: VxeComponentSlotType[] = []
       if (fixedHiddenColumn && isAllOverflow) {
         tdVNs.push(
@@ -364,7 +366,7 @@ export default defineVxeComponent({
                 h('div', {
                   colid,
                   rowid,
-                  class: 'vxe-cell--wrapper'
+                  class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
                 }, column.renderCell(cellParams))
               ])
         )
@@ -434,7 +436,7 @@ export default defineVxeComponent({
 
       return h('td', {
         class: [
-          'vxe-body--column',
+          'vxe-table--column vxe-body--column',
           colid,
           cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
           cellAlign ? `col--${cellAlign}` : '',
@@ -474,7 +476,7 @@ export default defineVxeComponent({
       const $xeGrid = $xeTable.xeGrid
 
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
+      const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
       const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -482,7 +484,6 @@ export default defineVxeComponent({
       const editOpts = computeEditOpts.value
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
@@ -562,25 +563,13 @@ export default defineVxeComponent({
           return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
         })
         rows.push(
-          !isColLoading && (columnOpts.drag && columnDragOpts.animation)
-            ? h(TransitionGroup, {
-              name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-              tag: 'tr',
-              class: trClass,
-              rowid: rowid,
-              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-              key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-              ...trOn
-            }, {
-              default: () => tdVNs
-            })
-            : h('tr', {
-              class: trClass,
-              rowid: rowid,
-              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-              key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-              ...trOn
-            }, tdVNs)
+          h('tr', {
+            class: trClass,
+            rowid: rowid,
+            style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+            key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+            ...trOn
+          }, tdVNs)
         )
         // 如果行被展开了
         if (isExpandRow) {
@@ -715,12 +704,10 @@ export default defineVxeComponent({
 
       const { fixedColumn, fixedType, tableColumn } = props
       const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
-      const { isGroup, tableData, isRowLoading, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
+      const { isGroup, tableData, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, expandColumn, dragRow, dragCol } = tableReactData
       const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
-      const rowOpts = computeRowOpts.value
       const emptyOpts = computeEmptyOpts.value
       const mouseOpts = computeMouseOpts.value
-      const rowDragOpts = computeRowDragOpts.value
       const expandOpts = computeExpandOpts.value
 
       let renderDataList = tableData
@@ -860,17 +847,9 @@ export default defineVxeComponent({
             /**
              * 内容
              */
-            !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
-              ? h(TransitionGroup, {
-                ref: refBodyTBody,
-                name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
-                tag: 'tbody'
-              }, {
-                default: () => renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList)
-              })
-              : h('tbody', {
-                ref: refBodyTBody
-              }, renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList))
+            h('tbody', {
+              ref: refBodyTBody
+            }, renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList))
           ]),
           h('div', {
             class: 'vxe-table--checkbox-range'

package/packages/table/src/cell.ts

@@ -189,7 +189,7 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
   const { showHeaderOverflow } = column
   const tooltipOpts = computeTooltipOpts.value
   const showAllTip = tooltipOpts.showAll
-  const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
+  const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
   const showTitle = headOverflow === 'title'
   const showTooltip = headOverflow === true || headOverflow === 'tooltip'
   const ons: Record<string, any> = {}

package/packages/table/src/columnInfo.ts

@@ -47,6 +47,11 @@ export class ColumnInfo {
         }
       }
     }
+    if (_vm.aggFunc) {
+      if (!$xeTable.handlePivotTableAggregateData && _vm.aggFunc !== true) {
+        errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true'])
+      }
+    }
 
     Object.assign(this, {
       // 基本属性

package/packages/table/src/footer.ts

@@ -1,9 +1,9 @@
-import { TransitionGroup, h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
+import { h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
-import { getCellHeight } from './util'
+import { getCalcHeight } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
 
@@ -35,7 +35,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refFooterScroll = ref() as Ref<HTMLDivElement>
@@ -49,7 +49,7 @@ export default defineVxeComponent({
 
       const { fixedType } = props
       const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps
-      const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData
+      const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFootFlag } = tableReactData
       const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData
       const virtualXOpts = computeVirtualXOpts.value
       const tooltipOpts = computeTooltipOpts.value
@@ -59,7 +59,7 @@ export default defineVxeComponent({
       const defaultRowHeight = computeDefaultRowHeight.value
       const cellOpts = computeCellOpts.value
       const footerCellOpts = computeFooterCellOpts.value
-      const currCellHeight = getCellHeight(footerCellOpts.height) || defaultRowHeight
+      const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight
 
       return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
@@ -126,7 +126,7 @@ export default defineVxeComponent({
         }
         let isMergeCell = false
         // 合并行或列
-        if (mergeFooterList.length) {
+        if (mergeFootFlag && mergeFooterList.length) {
           const spanRest = mergeFooterCellMaps[`${_rowIndex}:${_columnIndex}`]
           if (spanRest) {
             const { rowspan, colspan } = spanRest
@@ -173,7 +173,7 @@ export default defineVxeComponent({
         }
 
         return h('td', {
-          class: ['vxe-footer--column', column.id, {
+          class: ['vxe-table--column vxe-footer--column', column.id, {
             [`col--${footAlign}`]: footAlign,
             [`col--${type}`]: type,
             'col--last': isLastColumn,
@@ -200,7 +200,7 @@ export default defineVxeComponent({
             : [
                 h('div', {
                   colid,
-                  class: 'vxe-cell--wrapper'
+                  class: 'vxe-cell--wrapper vxe-footer-cell--wrapper'
                 }, column.renderFooter(cellParams))
               ]),
           /**
@@ -222,28 +222,11 @@ export default defineVxeComponent({
     const renderHeads = (isOptimizeMode: boolean, renderColumnList: VxeTableDefines.ColumnInfo[]) => {
       const { fixedType, footerTableData } = props
       const { footerRowClassName, footerRowStyle } = tableProps
-      const { isColLoading, isDragColMove } = tableReactData
-      const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
 
       return footerTableData.map((row, $rowIndex) => {
         const _rowIndex = $rowIndex
         const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-          return h(TransitionGroup, {
-            key: $rowIndex,
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-            tag: 'tr',
-            class: [
-              'vxe-footer--row',
-              footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
-            ],
-            style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-          }, {
-            default: () => renderRows(isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex)
-          })
-        }
         return h('tr', {
           key: $rowIndex,
           class: [

package/packages/table/src/header.ts

@@ -1,8 +1,8 @@
-import { TransitionGroup, h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { getCellHeight, convertHeaderColumnToRows } from './util'
+import { getCalcHeight, convertHeaderColumnToRows } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
 
@@ -56,7 +56,7 @@ export default defineVxeComponent({
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
       const headerCellOpts = computeHeaderCellOpts.value
-      const currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight
+      const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
 
       return cols.map((column, $columnIndex) => {
@@ -146,7 +146,7 @@ export default defineVxeComponent({
         }
 
         return h('th', {
-          class: ['vxe-header--column', colid, {
+          class: ['vxe-table--column vxe-header--column', colid, {
             [`col--${headAlign}`]: headAlign,
             [`col--${type}`]: type,
             'col--last': isLastColumn,
@@ -183,7 +183,7 @@ export default defineVxeComponent({
             : [
                 h('div', {
                   colid,
-                  class: 'vxe-cell--wrapper'
+                  class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
                 }, column.renderHeader(cellParams))
               ]),
           /**
@@ -203,27 +203,10 @@ export default defineVxeComponent({
     const renderHeads = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) => {
       const { fixedType } = props
       const { headerRowClassName, headerRowStyle } = tableProps
-      const { isColLoading, isDragColMove } = tableReactData
-      const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
 
       return headerGroups.map((cols, $rowIndex) => {
         const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-          return h(TransitionGroup, {
-            key: $rowIndex,
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-            tag: 'tr',
-            class: [
-              'vxe-header--row',
-              headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
-            ],
-            style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-          }, {
-            default: () => renderRows(isGroup, isOptimizeMode, cols, $rowIndex)
-          })
-        }
         return h('tr', {
           key: $rowIndex,
           class: [