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

package/es/table/module/edit/hook.js

@@ -93,8 +93,11 @@ hooks.add('tableEditModule', {
                 }
             });
         };
+        // const insertGroupRow = (newRecords: any[], isAppend: boolean) => {
+        // }
         const handleInsertRowAt = (records, targetRow, isInsertNextRow) => {
             const { treeConfig } = props;
+            const { isRowGroupStatus } = reactData;
             const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData;
             const treeOpts = computeTreeOpts.value;
             const { transform, rowField, mapChildrenField } = treeOpts;
@@ -108,6 +111,14 @@ 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);
@@ -132,6 +143,14 @@ 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);
@@ -196,6 +215,13 @@ hooks.add('tableEditModule', {
                             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']));
@@ -481,7 +507,7 @@ hooks.add('tableEditModule', {
              */
             remove(rows) {
                 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;
@@ -540,6 +566,10 @@ hooks.add('tableEditModule', {
                             }
                         });
                     }
+                    else if (isRowGroupStatus) {
+                        // 如果分组
+                        warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                    }
                     else {
                         rows.forEach((row) => {
                             const tfIndex = $xeTable.findRowIndexOf(tableFullData, row);

package/es/table/module/filter/hook.js

@@ -5,7 +5,7 @@ import { toFilters, handleFieldOrColumn, getRefElem } from '../../src/util';
 import { toCssUnit, triggerEvent, getDomNode } from '../../../ui/src/dom';
 import { isEnableConf } from '../../../ui/src/utils';
 const { renderer, hooks } = VxeUI;
-const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'resetFilterPanel', 'getCheckedFilters', 'updateFilterOptionStatus'];
+const tableFilterMethodKeys = ['openFilter', 'setFilter', 'clearFilter', 'saveFilterPanel', 'saveFilterPanelByEvent', 'resetFilterPanel', 'resetFilterPanelByEvent', 'getCheckedFilters', 'updateFilterOptionStatus'];
 hooks.add('tableFilterModule', {
     setupTable($xeTable) {
         const { props, reactData, internalData } = $xeTable;

package/es/table/module/keyboard/hook.js

@@ -272,8 +272,8 @@ hooks.add('tableKeyboardModule', {
             const checkboxOpts = computeCheckboxOpts.value;
             const mouseOpts = computeMouseOpts.value;
             const editOpts = computeEditOpts.value;
-            if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaMousedownEvent) {
-                return $xeTable.triggerCellAreaMousedownEvent(evnt, params);
+            if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaMousednEvent) {
+                return $xeTable.triggerCellAreaMousednEvent(evnt, params);
             }
             else {
                 if (checkboxConfig && checkboxOpts.range) {

package/es/table/src/anime.js

@@ -0,0 +1,46 @@
+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, offsetTop) {
+    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) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
+        }
+    }, 500);
+}
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr(elemList, offsetLeft) {
+    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) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
+        }
+    }, 500);
+}

package/es/table/src/body.js

@@ -1,4 +1,4 @@
-import { TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
+import { h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
@@ -22,7 +22,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -38,7 +38,7 @@ export default defineVxeComponent({
             return !!(isDragResize || (lastScrollTime && Date.now() < lastScrollTime + delayHover));
         };
         const renderLine = (rowid, params, cellHeight) => {
-            const { row, column } = params;
+            const { column } = params;
             const { afterFullData } = tableInternalData;
             const { treeConfig } = tableProps;
             const treeOpts = computeTreeOpts.value;
@@ -63,7 +63,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`
                             }
@@ -301,6 +301,7 @@ export default defineVxeComponent({
             else {
                 tcStyle.minHeight = `${cellHeight}px`;
             }
+            // console.log(lastScrollTime)
             const tdVNs = [];
             if (fixedHiddenColumn && isAllOverflow) {
                 tdVNs.push(h('div', {
@@ -333,7 +334,7 @@ export default defineVxeComponent({
                         h('div', {
                             colid,
                             rowid,
-                            class: 'vxe-cell--wrapper'
+                            class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
                         }, column.renderCell(cellParams))
                     ]));
                 if (showValidTip && errorValidItem) {
@@ -389,7 +390,7 @@ export default defineVxeComponent({
                 }));
             }
             return h('td', Object.assign(Object.assign(Object.assign({ class: [
-                    'vxe-body--column',
+                    'vxe-table--column vxe-body--column',
                     colid,
                     cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
                     cellAlign ? `col--${cellAlign}` : '',
@@ -422,7 +423,7 @@ export default defineVxeComponent({
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
             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;
@@ -430,7 +431,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 = [];
@@ -510,11 +510,7 @@ export default defineVxeComponent({
                 const tdVNs = tableColumn.map((column, $columnIndex) => {
                     return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
                 });
-                rows.push(!isColLoading && (columnOpts.drag && columnDragOpts.animation)
-                    ? h(TransitionGroup, Object.assign({ 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', Object.assign({ 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));
+                rows.push(h('tr', Object.assign({ 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) {
                     const expandOpts = computeExpandOpts.value;
@@ -641,12 +637,10 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             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;
             let renderColumnList = tableColumn;
@@ -779,17 +773,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/es/table/src/cell.js

@@ -167,7 +167,7 @@ function renderTitleContent(params, content) {
     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 = {};

package/es/table/src/columnInfo.js

@@ -43,6 +43,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, {
             // 基本属性
             type: _vm.type,

package/es/table/src/footer.js

@@ -1,9 +1,9 @@
-import { TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
+import { h, ref, 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';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'footer';
 export default defineVxeComponent({
@@ -29,7 +29,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refFooterScroll = ref();
         const refFooterTable = ref();
@@ -40,7 +40,7 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             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;
@@ -50,7 +50,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;
                 const colid = column.id;
@@ -115,7 +115,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;
@@ -160,7 +160,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
+                return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-footer--column', column.id, {
                             [`col--${footAlign}`]: footAlign,
                             [`col--${type}`]: type,
                             'col--last': isLastColumn,
@@ -182,7 +182,7 @@ export default defineVxeComponent({
                         : [
                             h('div', {
                                 colid,
-                                class: 'vxe-cell--wrapper'
+                                class: 'vxe-cell--wrapper vxe-footer-cell--wrapper'
                             }, column.renderFooter(cellParams))
                         ]),
                     /**
@@ -203,26 +203,9 @@ export default defineVxeComponent({
         const renderHeads = (isOptimizeMode, renderColumnList) => {
             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/es/table/src/header.js

@@ -1,8 +1,8 @@
-import { TransitionGroup, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
+import { h, ref, 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';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 export default defineVxeComponent({
@@ -45,7 +45,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) => {
                 const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
@@ -129,7 +129,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
+                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-header--column', colid, {
                             [`col--${headAlign}`]: headAlign,
                             [`col--${type}`]: type,
                             'col--last': isLastColumn,
@@ -161,7 +161,7 @@ export default defineVxeComponent({
                         : [
                             h('div', {
                                 colid,
-                                class: 'vxe-cell--wrapper'
+                                class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
                             }, column.renderHeader(cellParams))
                         ]),
                     /**
@@ -180,25 +180,8 @@ export default defineVxeComponent({
         const renderHeads = (isGroup, isOptimizeMode, headerGroups) => {
             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: [