vxe-table 4.8.16 → 4.9.1

package/lib/index.umd.js

@@ -1998,7 +1998,7 @@ function eqEmptyValue(cellValue) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "4.8.16";
+const version = "4.9.1";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2035,8 +2035,11 @@ core_.VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
-    dragConfig: {
-      showRowIcon: true
+    rowDragConfig: {
+      showIcon: true
+    },
+    columnDragConfig: {
+      showIcon: true
     },
     checkboxConfig: {
       // trigger: 'default',
@@ -2133,7 +2136,8 @@ core_.VxeUI.setConfig({
     },
     areaConfig: {
       autoClear: true,
-      selectCellByHeader: true
+      selectCellByHeader: true,
+      selectCellByBody: true
     },
     clipConfig: {
       isCopy: true,
@@ -2230,6 +2234,7 @@ core_.VxeUI.setIcon({
   TABLE_CUSTOM_SORT: iconPrefix + 'drag-handle',
   TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
   TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
+  TABLE_DRAG_COLUMN: iconPrefix + 'drag-handle',
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',
   TOOLBAR_TOOLS_REFRESH_LOADING: iconPrefix + 'repeat roll',
@@ -2389,7 +2394,7 @@ var es_array_push = __webpack_require__(4114);
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"4.8.16"}`;
+const log_version = `table v${"4.9.1"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2903,6 +2908,15 @@ function getCellValue(row, column) {
 function setCellValue(row, column, value) {
   return external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(row, column.field, value);
 }
+function getRefElem(refEl) {
+  if (refEl) {
+    const rest = refEl.value;
+    if (rest) {
+      return rest.$el || rest;
+    }
+  }
+  return null;
+}
 /**
  * 列宽拖动最大宽度
  * @param params
@@ -3331,15 +3345,18 @@ function renderTitlePrefixIcon(params) {
     column
   } = params;
   const titlePrefix = column.titlePrefix || column.titleHelp;
-  return titlePrefix ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-    class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || cell_getIcon().TABLE_TITLE_PREFIX],
-    onMouseenter(evnt) {
-      $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
-    },
-    onMouseleave(evnt) {
-      $table.handleTargetLeaveEvent(evnt);
-    }
-  })] : [];
+  if (titlePrefix) {
+    return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+      class: ['vxe-cell-title-prefix-icon', titlePrefix.icon || cell_getIcon().TABLE_TITLE_PREFIX],
+      onMouseenter(evnt) {
+        $table.triggerHeaderTitleEvent(evnt, titlePrefix, params);
+      },
+      onMouseleave(evnt) {
+        $table.handleTargetLeaveEvent(evnt);
+      }
+    });
+  }
+  return renderEmptyElement($table);
 }
 function renderTitleSuffixIcon(params) {
   const {
@@ -3347,29 +3364,37 @@ function renderTitleSuffixIcon(params) {
     column
   } = params;
   const titleSuffix = column.titleSuffix;
-  return titleSuffix ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-    class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || cell_getIcon().TABLE_TITLE_SUFFIX],
-    onMouseenter(evnt) {
-      $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
-    },
-    onMouseleave(evnt) {
-      $table.handleTargetLeaveEvent(evnt);
-    }
-  })] : [];
+  if (titleSuffix) {
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+      class: ['vxe-cell-title-suffix-icon', titleSuffix.icon || cell_getIcon().TABLE_TITLE_SUFFIX],
+      onMouseenter(evnt) {
+        $table.triggerHeaderTitleEvent(evnt, titleSuffix, params);
+      },
+      onMouseleave(evnt) {
+        $table.handleTargetLeaveEvent(evnt);
+      }
+    });
+  }
+  return renderEmptyElement($table);
 }
 function renderCellDragIcon(params) {
   const {
     $table
   } = params;
+  const tableProps = $table.props;
+  const {
+    dragConfig
+  } = tableProps;
   const {
-    computeDragOpts
+    computeRowDragOpts
   } = $table.getComputeMaps();
-  const dragOpts = computeDragOpts.value;
+  const rowDragOpts = computeRowDragOpts.value;
   const {
-    rowIcon,
-    rowDisabledMethod
-  } = dragOpts;
-  const isDisabled = rowDisabledMethod && rowDisabledMethod(params);
+    icon,
+    disabledMethod
+  } = rowDragOpts;
+  const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null);
+  const isDisabled = rDisabledMethod && rDisabledMethod(params);
   return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
@@ -3382,7 +3407,7 @@ function renderCellDragIcon(params) {
     },
     onMouseup: $table.handleCellDragMouseupEvent
   }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-    class: rowIcon || cell_getIcon().TABLE_DRAG_ROW
+    class: icon || (dragConfig ? dragConfig.rowIcon : '') || cell_getIcon().TABLE_DRAG_ROW
   })]);
 }
 function renderCellBaseVNs(params, content) {
@@ -3396,26 +3421,70 @@ function renderCellBaseVNs(params, content) {
   } = column;
   const tableProps = $table.props;
   const {
-    treeConfig
+    treeConfig,
+    dragConfig
   } = tableProps;
   const {
     computeRowOpts,
-    computeDragOpts
+    computeRowDragOpts
   } = $table.getComputeMaps();
   const rowOpts = computeRowOpts.value;
-  const dragOpts = computeDragOpts.value;
+  const rowDragOpts = computeRowDragOpts.value;
   const {
-    showRowIcon,
-    rowVisibleMethod
-  } = dragOpts;
+    showIcon,
+    visibleMethod
+  } = rowDragOpts;
+  const rVisibleMethod = visibleMethod || (dragConfig ? dragConfig.rowVisibleMethod : null);
   const vns = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content];
-  if (dragSort && rowOpts.drag && showRowIcon && (!rowVisibleMethod || rowVisibleMethod(params))) {
+  if (dragSort && rowOpts.drag && (showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params))) {
     if (!treeConfig || !level) {
       vns.unshift(renderCellDragIcon(params));
     }
   }
   return vns;
 }
+function renderHeaderCellDragIcon(params) {
+  const {
+    $table,
+    column
+  } = params;
+  const {
+    computeColumnOpts,
+    computeColumnDragOpts
+  } = $table.getComputeMaps();
+  const columnOpts = computeColumnOpts.value;
+  const columnDragOpts = computeColumnDragOpts.value;
+  const {
+    showIcon,
+    icon,
+    visibleMethod,
+    disabledMethod
+  } = columnDragOpts;
+  const isDisabled = disabledMethod && disabledMethod(params);
+  if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
+    if (!(column.fixed || column.parentId)) {
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+        key: 'dg',
+        class: ['vxe-cell--drag-handle', {
+          'is--disabled': isDisabled
+        }],
+        onMousedown(evnt) {
+          if (!isDisabled) {
+            $table.handleHeaderCellDragMousedownEvent(evnt, params);
+          }
+        },
+        onMouseup: $table.handleHeaderCellDragMouseupEvent
+      }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: icon || cell_getIcon().TABLE_DRAG_COLUMN
+      })]);
+    }
+  }
+  return renderEmptyElement($table);
+}
+function renderHeaderCellBaseVNs(params, content) {
+  const vns = [renderTitlePrefixIcon(params), renderHeaderCellDragIcon(params), ...(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content]), renderTitleSuffixIcon(params)];
+  return vns;
+}
 function renderTitleContent(params, content) {
   const {
     $table,
@@ -3609,7 +3678,7 @@ const Cell = {
     return createColumn($xeTable, columnOpts, renConfs);
   },
   /**
-   * 单元格
+   * 列头标题
    */
   renderHeaderTitle(params) {
     const {
@@ -3638,7 +3707,7 @@ const Cell = {
     return renderTitleContent(params, formatText(column.getTitle(), 1));
   },
   renderDefaultHeader(params) {
-    return renderTitlePrefixIcon(params).concat(Cell.renderHeaderTitle(params)).concat(renderTitleSuffixIcon(params));
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params));
   },
   renderDefaultCell(params) {
     const {
@@ -3772,7 +3841,7 @@ const Cell = {
     }, cellVNodes)])];
   },
   /**
-   * 索引
+   * 序号
    */
   renderSeqHeader(params) {
     const {
@@ -3783,7 +3852,7 @@ const Cell = {
       slots
     } = column;
     const headerSlot = slots ? slots.header : null;
-    return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1));
+    return renderHeaderCellBaseVNs(params, renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : formatText(column.getTitle(), 1)));
   },
   renderSeqCell(params) {
     const {
@@ -3829,9 +3898,9 @@ const Cell = {
     } = column;
     const headerSlot = slots ? slots.header : null;
     const titleSlot = slots ? slots.title : null;
-    return renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderHeaderCellBaseVNs(params, renderTitleContent(params, headerSlot ? $table.callSlot(headerSlot, params) : [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-radio--label'
-    }, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))]);
+    }, titleSlot ? $table.callSlot(titleSlot, params) : formatText(column.getTitle(), 1))]));
   },
   renderRadioCell(params) {
     const {
@@ -3958,14 +4027,14 @@ const Cell = {
       indeterminate: isAllCheckboxIndeterminate
     };
     if (headerSlot) {
-      return renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams));
+      return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, $table.callSlot(headerSlot, checkboxParams)));
     }
     if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-      return renderTitleContent(checkboxParams, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+      return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
         class: 'vxe-checkbox--label'
-      }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)]);
+      }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)]));
     }
-    return renderTitleContent(checkboxParams, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
+    return renderHeaderCellBaseVNs(params, renderTitleContent(checkboxParams, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isAllCheckboxSelected,
         'is--disabled': isAllCheckboxDisabled,
@@ -3977,7 +4046,7 @@ const Cell = {
       class: ['vxe-checkbox--icon', isAllCheckboxIndeterminate ? cell_getIcon().TABLE_CHECKBOX_INDETERMINATE : isAllCheckboxSelected ? cell_getIcon().TABLE_CHECKBOX_CHECKED : cell_getIcon().TABLE_CHECKBOX_UNCHECKED]
     })].concat(titleSlot || headerTitle ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', {
       class: 'vxe-checkbox--label'
-    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)] : []))]);
+    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams) : headerTitle)] : []))]));
   },
   renderCheckboxCell(params) {
     const {
@@ -4275,13 +4344,13 @@ const Cell = {
    * 排序和筛选
    */
   renderSortAndFilterHeader(params) {
-    return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params)).concat(Cell.renderFilterIcon(params));
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params).concat(Cell.renderFilterIcon(params))));
   },
   /**
    * 排序
    */
   renderSortHeader(params) {
-    return Cell.renderDefaultHeader(params).concat(Cell.renderSortIcon(params));
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderSortIcon(params)));
   },
   renderSortIcon(params) {
     const {
@@ -4330,7 +4399,7 @@ const Cell = {
    * 筛选
    */
   renderFilterHeader(params) {
-    return Cell.renderDefaultHeader(params).concat(Cell.renderFilterIcon(params));
+    return renderHeaderCellBaseVNs(params, Cell.renderHeaderTitle(params).concat(Cell.renderFilterIcon(params)));
   },
   renderFilterIcon(params) {
     const {
@@ -4398,11 +4467,15 @@ const Cell = {
         isRequired = columnRules.some(rule => rule.required);
       }
     }
-    return (isEnableConf(editConfig) ? [isRequired && editOpts.showAsterisk ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-      class: 'vxe-cell--required-icon'
-    }) : null, isEnableConf(editRender) && editOpts.showIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
-      class: ['vxe-cell--edit-icon', editOpts.icon || cell_getIcon().TABLE_EDIT]
-    }) : null] : []).concat(Cell.renderDefaultHeader(params)).concat(sortable ? Cell.renderSortIcon(params) : []).concat(filters ? Cell.renderFilterIcon(params) : []);
+    let editIconVNs = [];
+    if (isEnableConf(editConfig)) {
+      editIconVNs = [isRequired && editOpts.showAsterisk ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: 'vxe-cell--required-icon'
+      }) : renderEmptyElement($table), isEnableConf(editRender) && editOpts.showIcon ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('i', {
+        class: ['vxe-cell--edit-icon', editOpts.icon || cell_getIcon().TABLE_EDIT]
+      }) : renderEmptyElement($table)];
+    }
+    return renderHeaderCellBaseVNs(params, editIconVNs.concat(Cell.renderHeaderTitle(params)).concat(sortable ? Cell.renderSortIcon(params) : []).concat(filters ? Cell.renderFilterIcon(params) : []));
   },
   // 行格编辑模式
   renderRowEdit(params) {
@@ -5149,7 +5222,7 @@ const lineOffsetSizes = {
           'col--valid-error': !!errorValidItem,
           'col--current': currentColumn === column
         }, getPropClass(compCellClassName, params), getPropClass(className, params), getPropClass(allCellClassName, params)],
-        key: columnKey || columnOpts.useKey || rowOpts.useKey ? colid : $columnIndex,
+        key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? colid : $columnIndex,
         ...attrs,
         style: Object.assign({
           height: cellHeight
@@ -5176,7 +5249,8 @@ const lineOffsetSizes = {
         expandColumn,
         selectRadioRow,
         pendingRowMaps,
-        pendingRowList
+        pendingRowList,
+        isDragColMove
       } = tableReactData;
       const {
         fullAllDataRowIdData
@@ -5186,6 +5260,7 @@ const lineOffsetSizes = {
       const treeOpts = computeTreeOpts.value;
       const editOpts = computeEditOpts.value;
       const rowOpts = computeRowOpts.value;
+      const columnOpts = computeColumnOpts.value;
       const {
         transform
       } = treeOpts;
@@ -5256,24 +5331,36 @@ const lineOffsetSizes = {
           rowChildren = row[childrenField];
           isExpandTree = rowChildren && rowChildren.length > 0 && !!treeExpandedMaps[rowid];
         }
-        rows.push((0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
-          class: ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
-            'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
-            'is--new': isNewRow,
-            'is--expand-row': isExpandRow,
-            'is--expand-tree': isExpandTree,
-            'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
-            'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
-            'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-            'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
-          }, getPropClass(rowClassName, params)],
+        const trClass = ['vxe-body--row', treeConfig ? `row--level-${rowLevel}` : '', {
+          'row--stripe': stripe && ($xeTable.getVTRowIndex(row) + 1) % 2 === 0,
+          'is--new': isNewRow,
+          'is--expand-row': isExpandRow,
+          'is--expand-tree': isExpandTree,
+          'row--new': isNewRow && (editOpts.showStatus || editOpts.showInsertStatus),
+          'row--radio': radioOpts.highlight && $xeTable.eqRow(selectRadioRow, row),
+          'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
+          'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+        }, getPropClass(rowClassName, params)];
+        const tdVNs = tableColumn.map((column, $columnIndex) => {
+          return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
+        });
+        rows.push(columnOpts.drag ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+          tag: 'tr',
+          class: trClass,
           rowid: rowid,
           style: rowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
           key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
           ...trOn
-        }, tableColumn.map((column, $columnIndex) => {
-          return renderColumn(seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
-        })));
+        }, {
+          default: () => tdVNs
+        }) : (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
+          class: trClass,
+          rowid: rowid,
+          style: rowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowStyle) ? rowStyle(params) : rowStyle : null,
+          key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+          ...trOn
+        }, tdVNs));
         // 如果行被展开了
         if (isExpandRow) {
           const expandOpts = computeExpandOpts.value;
@@ -5411,10 +5498,8 @@ const lineOffsetSizes = {
       const leftElem = leftBody ? leftBody.$el : null;
       const rightElem = rightBody ? rightBody.$el : null;
       const bodyElem = tableBody.$el;
-      const bodyYRef = elemStore['main-body-ySpace'];
-      const bodyYElem = bodyYRef ? bodyYRef.value : null;
-      const bodyXRef = elemStore['main-body-xSpace'];
-      const bodyXElem = bodyXRef ? bodyXRef.value : null;
+      const bodyYElem = getRefElem(elemStore['main-body-ySpace']);
+      const bodyXElem = getRefElem(elemStore['main-body-xSpace']);
       const bodyHeight = scrollYLoad && bodyYElem ? bodyYElem.clientHeight : bodyElem.clientHeight;
       const bodyWidth = scrollXLoad && bodyXElem ? bodyXElem.clientWidth : bodyElem.clientWidth;
       const remainSize = isPrevWheelTop === isTopWheel ? Math.max(0, wheelYSize - wheelYTotal) : 0;
@@ -5580,6 +5665,7 @@ const lineOffsetSizes = {
       const emptyOpts = computeEmptyOpts.value;
       const keyboardOpts = computeKeyboardOpts.value;
       const mouseOpts = computeMouseOpts.value;
+      const columnOpts = computeColumnOpts.value;
       // const isMergeLeftFixedExceeded = computeIsMergeLeftFixedExceeded.value
       // const isMergeRightFixedExceeded = computeIsMergeRightFixedExceeded.value
       // 如果是使用优化模式
@@ -5657,7 +5743,8 @@ const lineOffsetSizes = {
       /**
        * 内容
        */
-      rowOpts.drag ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+      rowOpts.drag || columnOpts.drag ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+        ref: refBodyTBody,
         name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
         tag: 'tbody'
       }, {
@@ -5847,59 +5934,15 @@ const header_renderType = 'header';
         $xeTable.closeMenu();
       }
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.tableColumn, uploadColumn);
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        const {
-          fixedType
-        } = props;
-        const {
-          internalData
-        } = $xeTable;
-        const {
-          elemStore
-        } = internalData;
-        const prefix = `${fixedType || 'main'}-header-`;
-        elemStore[`${prefix}wrapper`] = refElem;
-        elemStore[`${prefix}table`] = refHeaderTable;
-        elemStore[`${prefix}colgroup`] = refHeaderColgroup;
-        elemStore[`${prefix}list`] = refHeaderTHead;
-        elemStore[`${prefix}xSpace`] = refHeaderXSpace;
-        elemStore[`${prefix}repair`] = refHeaderBorderRepair;
-        uploadColumn();
-      });
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+    const renderRows = (cols, $rowIndex) => {
       const {
         fixedType
       } = props;
-      const {
-        internalData
-      } = $xeTable;
-      const {
-        elemStore
-      } = internalData;
-      const prefix = `${fixedType || 'main'}-header-`;
-      elemStore[`${prefix}wrapper`] = null;
-      elemStore[`${prefix}table`] = null;
-      elemStore[`${prefix}colgroup`] = null;
-      elemStore[`${prefix}list`] = null;
-      elemStore[`${prefix}xSpace`] = null;
-      elemStore[`${prefix}repair`] = null;
-    });
-    const renderVN = () => {
-      const {
-        fixedType,
-        fixedColumn,
-        tableColumn
-      } = props;
       const {
         resizable: allResizable,
         border,
         columnKey,
-        headerRowClassName,
         headerCellClassName,
-        headerRowStyle,
         headerCellStyle,
         showHeaderOverflow: allColumnHeaderOverflow,
         headerAlign: allHeaderAlign,
@@ -5907,16 +5950,160 @@ const header_renderType = 'header';
         mouseConfig
       } = tableProps;
       const {
-        isGroup,
         currentColumn,
         scrollXLoad,
         overflowX,
         scrollbarWidth
       } = tableReactData;
+      const columnOpts = computeColumnOpts.value;
+      return cols.map((column, $columnIndex) => {
+        const {
+          type,
+          showHeaderOverflow,
+          headerAlign,
+          align,
+          headerClassName,
+          editRender,
+          cellRender
+        } = column;
+        const colid = column.id;
+        const renderOpts = editRender || cellRender;
+        const compConf = renderOpts ? header_renderer.get(renderOpts.name) : null;
+        const isColGroup = column.children && column.children.length;
+        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : !!column.fixed && overflowX;
+        const headOverflow = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+        const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+        let showEllipsis = headOverflow === 'ellipsis';
+        const showTitle = headOverflow === 'title';
+        const showTooltip = headOverflow === true || headOverflow === 'tooltip';
+        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+        const hasFilter = column.filters && column.filters.some(item => item.checked);
+        const columnIndex = $xeTable.getColumnIndex(column);
+        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const params = {
+          $table: $xeTable,
+          $grid: $xeTable.xegrid,
+          $rowIndex,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          fixed: fixedType,
+          type: header_renderType,
+          isHidden: fixedHiddenColumn,
+          hasFilter
+        };
+        const thOns = {
+          onClick: evnt => $xeTable.triggerHeaderCellClickEvent(evnt, params),
+          onDblclick: evnt => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
+        };
+        // 横向虚拟滚动不支持动态行高
+        if (scrollXLoad && !hasEllipsis) {
+          showEllipsis = hasEllipsis = true;
+        }
+        // 按下事件处理
+        if (mouseConfig) {
+          thOns.onMousedown = evnt => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
+        }
+        // 拖拽行事件
+        if (columnOpts.drag && !column.parentId) {
+          thOns.onDragstart = $xeTable.handleHeaderCellDragDragstartEvent;
+          thOns.onDragend = $xeTable.handleHeaderCellDragDragendEvent;
+          thOns.onDragover = $xeTable.handleHeaderCellDragDragoverEvent;
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
+          class: ['vxe-header--column', colid, {
+            [`col--${headAlign}`]: headAlign,
+            [`col--${type}`]: type,
+            'col--last': $columnIndex === cols.length - 1,
+            'col--fixed': column.fixed,
+            'col--group': isColGroup,
+            'col--ellipsis': hasEllipsis,
+            'fixed--hidden': fixedHiddenColumn,
+            'is--sortable': column.sortable,
+            'col--filter': !!column.filters,
+            'is--filter-active': hasFilter,
+            'col--current': currentColumn === column
+          }, headerClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerClassName) ? headerClassName(params) : headerClassName : '', headerCellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName : ''],
+          colid,
+          colspan: column.colSpan > 1 ? column.colSpan : null,
+          rowspan: column.rowSpan > 1 ? column.rowSpan : null,
+          style: headerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle : null,
+          ...thOns,
+          key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-cell', {
+            'c--title': showTitle,
+            'c--tooltip': showTooltip,
+            'c--ellipsis': showEllipsis
+          }]
+        }, column.renderHeader(params)),
+        /**
+         * 列宽拖动
+         */
+        !fixedHiddenColumn && !isColGroup && (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-resizable', {
+            'is--line': !border || border === 'none'
+          }],
+          onMousedown: evnt => resizeMousedown(evnt, params)
+        }) : null]);
+      }).concat(scrollbarWidth ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
+        key: `gr${$rowIndex}`,
+        class: 'vxe-header--gutter col--gutter'
+      })] : []);
+    };
+    const renderHeads = headerGroups => {
+      const {
+        fixedType
+      } = props;
+      const {
+        headerRowClassName,
+        headerRowStyle
+      } = tableProps;
+      const {
+        isDragColMove
+      } = tableReactData;
+      const columnOpts = computeColumnOpts.value;
+      return headerGroups.map((cols, $rowIndex) => {
+        const params = {
+          $table: $xeTable,
+          $rowIndex,
+          fixed: fixedType,
+          type: header_renderType
+        };
+        if (columnOpts.drag) {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+            tag: 'tr',
+            class: ['vxe-header--row', headerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
+            style: headerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : null
+          }, {
+            default: () => renderRows(cols, $rowIndex)
+          });
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
+          class: ['vxe-header--row', headerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
+          style: headerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle : null
+        }, renderRows(cols, $rowIndex));
+      });
+    };
+    const renderVN = () => {
+      const {
+        fixedType,
+        fixedColumn,
+        tableColumn
+      } = props;
+      const {
+        showHeaderOverflow: allColumnHeaderOverflow
+      } = tableProps;
+      const {
+        isGroup,
+        scrollXLoad,
+        scrollbarWidth
+      } = tableReactData;
       const {
         visibleColumn
       } = tableInternalData;
-      const columnOpts = computeColumnOpts.value;
       let headerGroups = headerColumn.value;
       let renderColumnList = tableColumn;
       if (isGroup) {
@@ -5963,109 +6150,7 @@ const header_renderType = 'header';
        */
       (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('thead', {
         ref: refHeaderTHead
-      }, headerGroups.map((cols, $rowIndex) => {
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
-          class: ['vxe-header--row', headerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowClassName) ? headerRowClassName({
-            $table: $xeTable,
-            $rowIndex,
-            fixed: fixedType,
-            type: header_renderType
-          }) : headerRowClassName : ''],
-          style: headerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowStyle) ? headerRowStyle({
-            $table: $xeTable,
-            $rowIndex,
-            fixed: fixedType,
-            type: header_renderType
-          }) : headerRowStyle : null
-        }, cols.map((column, $columnIndex) => {
-          const {
-            type,
-            showHeaderOverflow,
-            headerAlign,
-            align,
-            headerClassName,
-            editRender,
-            cellRender
-          } = column;
-          const colid = column.id;
-          const renderOpts = editRender || cellRender;
-          const compConf = renderOpts ? header_renderer.get(renderOpts.name) : null;
-          const isColGroup = column.children && column.children.length;
-          const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : !!column.fixed && overflowX;
-          const headOverflow = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
-          const headAlign = headerAlign || (compConf ? compConf.tableHeaderCellAlign : '') || allHeaderAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-          let showEllipsis = headOverflow === 'ellipsis';
-          const showTitle = headOverflow === 'title';
-          const showTooltip = headOverflow === true || headOverflow === 'tooltip';
-          let hasEllipsis = showTitle || showTooltip || showEllipsis;
-          const hasFilter = column.filters && column.filters.some(item => item.checked);
-          const columnIndex = $xeTable.getColumnIndex(column);
-          const _columnIndex = $xeTable.getVTColumnIndex(column);
-          const params = {
-            $table: $xeTable,
-            $grid: $xeTable.xegrid,
-            $rowIndex,
-            column,
-            columnIndex,
-            $columnIndex,
-            _columnIndex,
-            fixed: fixedType,
-            type: header_renderType,
-            isHidden: fixedHiddenColumn,
-            hasFilter
-          };
-          const thOns = {
-            onClick: evnt => $xeTable.triggerHeaderCellClickEvent(evnt, params),
-            onDblclick: evnt => $xeTable.triggerHeaderCellDblclickEvent(evnt, params)
-          };
-          // 横向虚拟滚动不支持动态行高
-          if (scrollXLoad && !hasEllipsis) {
-            showEllipsis = hasEllipsis = true;
-          }
-          // 按下事件处理
-          if (mouseConfig) {
-            thOns.onMousedown = evnt => $xeTable.triggerHeaderCellMousedownEvent(evnt, params);
-          }
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
-            class: ['vxe-header--column', colid, {
-              [`col--${headAlign}`]: headAlign,
-              [`col--${type}`]: type,
-              'col--last': $columnIndex === cols.length - 1,
-              'col--fixed': column.fixed,
-              'col--group': isColGroup,
-              'col--ellipsis': hasEllipsis,
-              'fixed--hidden': fixedHiddenColumn,
-              'is--sortable': column.sortable,
-              'col--filter': !!column.filters,
-              'is--filter-active': hasFilter,
-              'col--current': currentColumn === column
-            }, headerClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerClassName) ? headerClassName(params) : headerClassName : '', headerCellClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerCellClassName) ? headerCellClassName(params) : headerCellClassName : ''],
-            colid,
-            colspan: column.colSpan > 1 ? column.colSpan : null,
-            rowspan: column.rowSpan > 1 ? column.rowSpan : null,
-            style: headerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerCellStyle) ? headerCellStyle(params) : headerCellStyle : null,
-            ...thOns,
-            key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-cell', {
-              'c--title': showTitle,
-              'c--tooltip': showTooltip,
-              'c--ellipsis': showEllipsis
-            }]
-          }, column.renderHeader(params)),
-          /**
-           * 列宽拖动
-           */
-          !fixedHiddenColumn && !isColGroup && (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-resizable', {
-              'is--line': !border || border === 'none'
-            }],
-            onMousedown: evnt => resizeMousedown(evnt, params)
-          }) : null]);
-        }).concat(scrollbarWidth ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('th', {
-          class: 'vxe-header--gutter col--gutter'
-        })] : []));
-      }))]),
+      }, renderHeads(headerGroups))]),
       /**
        * 其他
        */
@@ -6074,6 +6159,46 @@ const header_renderType = 'header';
         class: 'vxe-table--header-border-line'
       })]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.watch)(() => props.tableColumn, uploadColumn);
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const {
+          fixedType
+        } = props;
+        const {
+          internalData
+        } = $xeTable;
+        const {
+          elemStore
+        } = internalData;
+        const prefix = `${fixedType || 'main'}-header-`;
+        elemStore[`${prefix}wrapper`] = refElem;
+        elemStore[`${prefix}table`] = refHeaderTable;
+        elemStore[`${prefix}colgroup`] = refHeaderColgroup;
+        elemStore[`${prefix}list`] = refHeaderTHead;
+        elemStore[`${prefix}xSpace`] = refHeaderXSpace;
+        elemStore[`${prefix}repair`] = refHeaderBorderRepair;
+        uploadColumn();
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      const {
+        fixedType
+      } = props;
+      const {
+        internalData
+      } = $xeTable;
+      const {
+        elemStore
+      } = internalData;
+      const prefix = `${fixedType || 'main'}-header-`;
+      elemStore[`${prefix}wrapper`] = null;
+      elemStore[`${prefix}table`] = null;
+      elemStore[`${prefix}colgroup`] = null;
+      elemStore[`${prefix}list`] = null;
+      elemStore[`${prefix}xSpace`] = null;
+      elemStore[`${prefix}repair`] = null;
+    });
     return renderVN;
   }
 }));
@@ -6182,36 +6307,201 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         });
       }
     };
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
-        const {
-          fixedType
-        } = props;
-        const {
-          elemStore
-        } = tableInternalData;
-        const prefix = `${fixedType || 'main'}-footer-`;
-        elemStore[`${prefix}wrapper`] = refElem;
-        elemStore[`${prefix}table`] = refFooterTable;
-        elemStore[`${prefix}colgroup`] = refFooterColgroup;
-        elemStore[`${prefix}list`] = refFooterTFoot;
-        elemStore[`${prefix}xSpace`] = refFooterXSpace;
-      });
-    });
-    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+    const renderRows = (tableColumn, footerTableData, row, $rowIndex, _rowIndex) => {
       const {
         fixedType
       } = props;
       const {
-        elemStore
-      } = tableInternalData;
-      const prefix = `${fixedType || 'main'}-footer-`;
-      elemStore[`${prefix}wrapper`] = null;
-      elemStore[`${prefix}table`] = null;
-      elemStore[`${prefix}colgroup`] = null;
-      elemStore[`${prefix}list`] = null;
-      elemStore[`${prefix}xSpace`] = null;
-    });
+        footerCellClassName,
+        footerCellStyle,
+        footerAlign: allFooterAlign,
+        footerSpanMethod,
+        align: allAlign,
+        columnKey,
+        showFooterOverflow: allColumnFooterOverflow
+      } = tableProps;
+      const {
+        scrollXLoad,
+        overflowX,
+        scrollbarWidth,
+        currentColumn,
+        mergeFooterList
+      } = tableReactData;
+      const tooltipOpts = computeTooltipOpts.value;
+      const columnOpts = computeColumnOpts.value;
+      return tableColumn.map((column, $columnIndex) => {
+        const {
+          type,
+          showFooterOverflow,
+          footerAlign,
+          align,
+          footerClassName,
+          editRender,
+          cellRender
+        } = column;
+        const renderOpts = editRender || cellRender;
+        const compConf = renderOpts ? footer_renderer.get(renderOpts.name) : null;
+        const showAllTip = tooltipOpts.showAll;
+        const isColGroup = column.children && column.children.length;
+        const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
+        const footOverflow = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
+        const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
+        let showEllipsis = footOverflow === 'ellipsis';
+        const showTitle = footOverflow === 'title';
+        const showTooltip = footOverflow === true || footOverflow === 'tooltip';
+        let hasEllipsis = showTitle || showTooltip || showEllipsis;
+        const attrs = {
+          colid: column.id
+        };
+        const tfOns = {};
+        const columnIndex = $xeTable.getColumnIndex(column);
+        const _columnIndex = $xeTable.getVTColumnIndex(column);
+        const itemIndex = _columnIndex;
+        const cellParams = {
+          $table: $xeTable,
+          $grid: $xeTable.xegrid,
+          row,
+          rowIndex: _rowIndex,
+          _rowIndex,
+          $rowIndex,
+          column,
+          columnIndex,
+          $columnIndex,
+          _columnIndex,
+          itemIndex,
+          items: row,
+          fixed: fixedType,
+          type: footer_renderType,
+          data: footerTableData
+        };
+        // 纵向虚拟滚动不支持动态行高
+        if (scrollXLoad && !hasEllipsis) {
+          showEllipsis = hasEllipsis = true;
+        }
+        if (showTitle || showTooltip || showAllTip) {
+          tfOns.onMouseenter = evnt => {
+            if (showTitle) {
+              updateCellTitle(evnt.currentTarget, column);
+            } else if (showTooltip || showAllTip) {
+              $xeTable.triggerFooterTooltipEvent(evnt, cellParams);
+            }
+          };
+        }
+        if (showTooltip || showAllTip) {
+          tfOns.onMouseleave = evnt => {
+            if (showTooltip || showAllTip) {
+              $xeTable.handleTargetLeaveEvent(evnt);
+            }
+          };
+        }
+        tfOns.onClick = evnt => {
+          $xeTable.dispatchEvent('footer-cell-click', Object.assign({
+            cell: evnt.currentTarget
+          }, cellParams), evnt);
+        };
+        tfOns.onDblclick = evnt => {
+          $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({
+            cell: evnt.currentTarget
+          }, cellParams), evnt);
+        };
+        // 合并行或列
+        if (mergeFooterList.length) {
+          const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
+          if (spanRest) {
+            const {
+              rowspan,
+              colspan
+            } = spanRest;
+            if (!rowspan || !colspan) {
+              return null;
+            }
+            if (rowspan > 1) {
+              attrs.rowspan = rowspan;
+            }
+            if (colspan > 1) {
+              attrs.colspan = colspan;
+            }
+          }
+        } else if (footerSpanMethod) {
+          // 自定义合并方法
+          const {
+            rowspan = 1,
+            colspan = 1
+          } = footerSpanMethod(cellParams) || {};
+          if (!rowspan || !colspan) {
+            return null;
+          }
+          if (rowspan > 1) {
+            attrs.rowspan = rowspan;
+          }
+          if (colspan > 1) {
+            attrs.colspan = colspan;
+          }
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+          class: ['vxe-footer--column', column.id, {
+            [`col--${footAlign}`]: footAlign,
+            [`col--${type}`]: type,
+            'col--last': $columnIndex === tableColumn.length - 1,
+            'fixed--hidden': fixedHiddenColumn,
+            'col--ellipsis': hasEllipsis,
+            'col--current': currentColumn === column
+          }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)],
+          ...attrs,
+          style: footerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle : null,
+          ...tfOns,
+          key: columnKey || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: ['vxe-cell', {
+            'c--title': showTitle,
+            'c--tooltip': showTooltip,
+            'c--ellipsis': showEllipsis
+          }]
+        }, column.renderFooter(cellParams))]);
+      }).concat(scrollbarWidth ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
+        key: `gr${$rowIndex}`,
+        class: 'vxe-footer--gutter col--gutter'
+      })] : []);
+    };
+    const renderHeads = footerTableData => {
+      const {
+        fixedType,
+        tableColumn
+      } = props;
+      const {
+        footerRowClassName,
+        footerRowStyle
+      } = tableProps;
+      const {
+        isDragColMove
+      } = tableReactData;
+      const columnOpts = computeColumnOpts.value;
+      return footerTableData.map((row, $rowIndex) => {
+        const _rowIndex = $rowIndex;
+        const rowParams = {
+          $table: $xeTable,
+          row,
+          _rowIndex,
+          $rowIndex,
+          fixed: fixedType,
+          type: footer_renderType
+        };
+        if (columnOpts.drag) {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)(external_commonjs_vue_commonjs2_vue_root_Vue_.TransitionGroup, {
+            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+            tag: 'tr',
+            class: ['vxe-footer--row', footerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
+            style: footerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle : null
+          }, {
+            default: () => renderRows(tableColumn, footerTableData, row, $rowIndex, _rowIndex)
+          });
+        }
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
+          class: ['vxe-footer--row', footerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
+          style: footerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle : null
+        }, renderRows(tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+      });
+    };
     const renderVN = () => {
       let {
         fixedType,
@@ -6220,14 +6510,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
         footerTableData
       } = props;
       const {
-        footerRowClassName,
-        footerCellClassName,
-        footerRowStyle,
-        footerCellStyle,
-        footerAlign: allFooterAlign,
         footerSpanMethod,
-        align: allAlign,
-        columnKey,
         showFooterOverflow: allColumnFooterOverflow
       } = tableProps;
       const {
@@ -6235,13 +6518,9 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
       } = tableInternalData;
       const {
         scrollXLoad,
-        overflowX,
         scrollbarWidth,
-        currentColumn,
         mergeFooterList
       } = tableReactData;
-      const tooltipOpts = computeTooltipOpts.value;
-      const columnOpts = computeColumnOpts.value;
       // 如果是使用优化模式
       if (fixedType) {
         // 如果存在展开行使用全量渲染
@@ -6284,158 +6563,43 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
       }).concat(scrollbarWidth ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('col', {
         name: 'col_gutter'
       })] : [])),
-      /**
-       * 底部
-       */
-      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tfoot', {
-        ref: refFooterTFoot
-      }, footerTableData.map((list, _rowIndex) => {
-        const $rowIndex = _rowIndex;
-        const rowParams = {
-          $table: $xeTable,
-          row: list,
-          _rowIndex,
-          $rowIndex,
-          fixed: fixedType,
-          type: footer_renderType
-        };
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tr', {
-          class: ['vxe-footer--row', footerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
-          style: footerRowStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle : null
-        }, tableColumn.map((column, $columnIndex) => {
-          const {
-            type,
-            showFooterOverflow,
-            footerAlign,
-            align,
-            footerClassName,
-            editRender,
-            cellRender
-          } = column;
-          const renderOpts = editRender || cellRender;
-          const compConf = renderOpts ? footer_renderer.get(renderOpts.name) : null;
-          const showAllTip = tooltipOpts.showAll;
-          const isColGroup = column.children && column.children.length;
-          const fixedHiddenColumn = fixedType ? column.fixed !== fixedType && !isColGroup : column.fixed && overflowX;
-          const footOverflow = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eqNull(showFooterOverflow) ? allColumnFooterOverflow : showFooterOverflow;
-          const footAlign = footerAlign || (compConf ? compConf.tableFooterCellAlign : '') || allFooterAlign || align || (compConf ? compConf.tableCellAlign : '') || allAlign;
-          let showEllipsis = footOverflow === 'ellipsis';
-          const showTitle = footOverflow === 'title';
-          const showTooltip = footOverflow === true || footOverflow === 'tooltip';
-          let hasEllipsis = showTitle || showTooltip || showEllipsis;
-          const attrs = {
-            colid: column.id
-          };
-          const tfOns = {};
-          const columnIndex = $xeTable.getColumnIndex(column);
-          const _columnIndex = $xeTable.getVTColumnIndex(column);
-          const itemIndex = _columnIndex;
-          const cellParams = {
-            $table: $xeTable,
-            $grid: $xeTable.xegrid,
-            row: list,
-            rowIndex: _rowIndex,
-            _rowIndex,
-            $rowIndex,
-            column,
-            columnIndex,
-            $columnIndex,
-            _columnIndex,
-            itemIndex,
-            items: list,
-            fixed: fixedType,
-            type: footer_renderType,
-            data: footerTableData
-          };
-          // 纵向虚拟滚动不支持动态行高
-          if (scrollXLoad && !hasEllipsis) {
-            showEllipsis = hasEllipsis = true;
-          }
-          if (showTitle || showTooltip || showAllTip) {
-            tfOns.onMouseenter = evnt => {
-              if (showTitle) {
-                updateCellTitle(evnt.currentTarget, column);
-              } else if (showTooltip || showAllTip) {
-                $xeTable.triggerFooterTooltipEvent(evnt, cellParams);
-              }
-            };
-          }
-          if (showTooltip || showAllTip) {
-            tfOns.onMouseleave = evnt => {
-              if (showTooltip || showAllTip) {
-                $xeTable.handleTargetLeaveEvent(evnt);
-              }
-            };
-          }
-          tfOns.onClick = evnt => {
-            $xeTable.dispatchEvent('footer-cell-click', Object.assign({
-              cell: evnt.currentTarget
-            }, cellParams), evnt);
-          };
-          tfOns.onDblclick = evnt => {
-            $xeTable.dispatchEvent('footer-cell-dblclick', Object.assign({
-              cell: evnt.currentTarget
-            }, cellParams), evnt);
-          };
-          // 合并行或列
-          if (mergeFooterList.length) {
-            const spanRest = mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex);
-            if (spanRest) {
-              const {
-                rowspan,
-                colspan
-              } = spanRest;
-              if (!rowspan || !colspan) {
-                return null;
-              }
-              if (rowspan > 1) {
-                attrs.rowspan = rowspan;
-              }
-              if (colspan > 1) {
-                attrs.colspan = colspan;
-              }
-            }
-          } else if (footerSpanMethod) {
-            // 自定义合并方法
-            const {
-              rowspan = 1,
-              colspan = 1
-            } = footerSpanMethod(cellParams) || {};
-            if (!rowspan || !colspan) {
-              return null;
-            }
-            if (rowspan > 1) {
-              attrs.rowspan = rowspan;
-            }
-            if (colspan > 1) {
-              attrs.colspan = colspan;
-            }
-          }
-          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-            class: ['vxe-footer--column', column.id, {
-              [`col--${footAlign}`]: footAlign,
-              [`col--${type}`]: type,
-              'col--last': $columnIndex === tableColumn.length - 1,
-              'fixed--hidden': fixedHiddenColumn,
-              'col--ellipsis': hasEllipsis,
-              'col--current': currentColumn === column
-            }, getPropClass(footerClassName, cellParams), getPropClass(footerCellClassName, cellParams)],
-            ...attrs,
-            style: footerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle : null,
-            ...tfOns,
-            key: columnKey || columnOpts.useKey ? column.id : $columnIndex
-          }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-            class: ['vxe-cell', {
-              'c--title': showTitle,
-              'c--tooltip': showTooltip,
-              'c--ellipsis': showEllipsis
-            }]
-          }, column.renderFooter(cellParams))]);
-        }).concat(scrollbarWidth ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('td', {
-          class: 'vxe-footer--gutter col--gutter'
-        })] : []));
-      }))])]);
+      /**
+       * 底部
+       */
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('tfoot', {
+        ref: refFooterTFoot
+      }, renderHeads(footerTableData))])]);
     };
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onMounted)(() => {
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        const {
+          fixedType
+        } = props;
+        const {
+          elemStore
+        } = tableInternalData;
+        const prefix = `${fixedType || 'main'}-footer-`;
+        elemStore[`${prefix}wrapper`] = refElem;
+        elemStore[`${prefix}table`] = refFooterTable;
+        elemStore[`${prefix}colgroup`] = refFooterColgroup;
+        elemStore[`${prefix}list`] = refFooterTFoot;
+        elemStore[`${prefix}xSpace`] = refFooterXSpace;
+      });
+    });
+    (0,external_commonjs_vue_commonjs2_vue_root_Vue_.onUnmounted)(() => {
+      const {
+        fixedType
+      } = props;
+      const {
+        elemStore
+      } = tableInternalData;
+      const prefix = `${fixedType || 'main'}-footer-`;
+      elemStore[`${prefix}wrapper`] = null;
+      elemStore[`${prefix}table`] = null;
+      elemStore[`${prefix}colgroup`] = null;
+      elemStore[`${prefix}list`] = null;
+      elemStore[`${prefix}xSpace`] = null;
+    });
     return renderVN;
   }
 }));
@@ -6624,8 +6788,12 @@ const {
   cellConfig: Object,
   // 行配置信息
   rowConfig: Object,
-  // 可拖拽配置项
+  // 已废弃，被 rowDragConfig 替换
   dragConfig: Object,
+  // 行拖拽排序配置项
+  rowDragConfig: Object,
+  // 列拖拽排序配置项
+  columnDragConfig: Object,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项
@@ -6692,7 +6860,7 @@ const {
   params: Object
 });
 ;// CONCATENATED MODULE: ./packages/table/src/emits.ts
-/* harmony default export */ var emits = (['update:data', 'keydown-start', 'keydown', 'keydown-end', 'paste', 'copy', 'cut', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'checkbox-range-start', 'checkbox-range-change', 'checkbox-range-end', 'checkbox-range-select', 'cell-click', 'cell-dblclick', 'cell-menu', 'cell-mouseenter', 'cell-mouseleave', 'cell-selected', 'cell-delete-value', 'cell-backspace-value', 'header-cell-click', 'header-cell-dblclick', 'header-cell-menu', 'footer-cell-click', 'footer-cell-dblclick', 'footer-cell-menu', 'clear-merge', 'sort-change', 'clear-sort', 'filter-change', 'filter-visible', 'clear-filter', 'resizable-change', 'toggle-row-expand', 'toggle-tree-expand', 'menu-click', 'edit-closed', 'row-dragstart', 'row-dragover', 'row-dragend', 'edit-actived', 'edit-activated', 'edit-disabled', 'valid-error', 'scroll', 'scroll-boundary', 'custom', 'change-fnr', 'open-fnr', 'show-fnr', 'hide-fnr', 'fnr-change', 'fnr-find', 'fnr-find-all', 'fnr-replace', 'fnr-replace-all', 'cell-area-copy', 'cell-area-cut', 'cell-area-paste', 'cell-area-merge', 'clear-cell-area-selection', 'clear-cell-area-merge', 'header-cell-area-selection', 'cell-area-selection-invalid', 'cell-area-selection-start', 'cell-area-selection-drag', 'cell-area-selection-end', 'cell-area-extension-start', 'cell-area-extension-drag', 'cell-area-extension-end', 'cell-area-selection-all-start', 'cell-area-selection-all-end', 'cell-area-arrows-start', 'cell-area-arrows-end', 'active-cell-change-start', 'active-cell-change-end']);
+/* harmony default export */ var emits = (['update:data', 'keydown-start', 'keydown', 'keydown-end', 'paste', 'copy', 'cut', 'current-change', 'radio-change', 'checkbox-change', 'checkbox-all', 'checkbox-range-start', 'checkbox-range-change', 'checkbox-range-end', 'checkbox-range-select', 'cell-click', 'cell-dblclick', 'cell-menu', 'cell-mouseenter', 'cell-mouseleave', 'cell-selected', 'cell-delete-value', 'cell-backspace-value', 'header-cell-click', 'header-cell-dblclick', 'header-cell-menu', 'footer-cell-click', 'footer-cell-dblclick', 'footer-cell-menu', 'clear-merge', 'sort-change', 'clear-sort', 'filter-change', 'filter-visible', 'clear-filter', 'resizable-change', 'toggle-row-expand', 'toggle-tree-expand', 'menu-click', 'edit-closed', 'row-dragstart', 'row-dragover', 'row-dragend', 'column-dragstart', 'column-dragover', 'column-dragend', 'edit-actived', 'edit-activated', 'edit-disabled', 'valid-error', 'scroll', 'scroll-boundary', 'custom', 'change-fnr', 'open-fnr', 'show-fnr', 'hide-fnr', 'fnr-change', 'fnr-find', 'fnr-find-all', 'fnr-replace', 'fnr-replace-all', 'cell-area-copy', 'cell-area-cut', 'cell-area-paste', 'cell-area-merge', 'clear-cell-area-selection', 'clear-cell-area-merge', 'header-cell-area-selection', 'cell-area-selection-invalid', 'cell-area-selection-start', 'cell-area-selection-drag', 'cell-area-selection-end', 'cell-area-extension-start', 'cell-area-extension-drag', 'cell-area-extension-end', 'cell-area-selection-all-start', 'cell-area-selection-all-end', 'cell-area-arrows-start', 'cell-area-arrows-end', 'active-cell-change-start', 'active-cell-change-end']);
 ;// CONCATENATED MODULE: ./packages/table/module/custom/panel.ts
 
 
@@ -8766,6 +8934,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       scrollVMLoading: false,
       isDragRowMove: false,
       dragRow: null,
+      isDragColMove: false,
+      dragCol: null,
       dragTipText: '',
       _isResize: false,
       _isLoading: false
@@ -8869,7 +9039,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const refRightContainer = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refCellResizeBar = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refEmptyPlaceholder = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
-    const refRowDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDragTipElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDragRowLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
+    const refDragColLineElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollYVirtualElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
     const refScrollXHandleElem = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.ref)();
@@ -8939,8 +9111,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
     const computeRowOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.rowConfig, props.rowConfig);
     });
-    const computeDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
-      return Object.assign({}, table_getConfig().table.dragConfig, props.dragConfig);
+    const computeRowDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, table_getConfig().table.rowDragConfig, props.rowDragConfig);
+    });
+    const computeColumnDragOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
+      return Object.assign({}, table_getConfig().table.columnDragConfig, props.columnDragConfig);
     });
     const computeResizeOpts = (0,external_commonjs_vue_commonjs2_vue_root_Vue_.computed)(() => {
       return Object.assign({}, table_getConfig().table.resizeConfig, props.resizeConfig);
@@ -9189,7 +9364,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       computeColumnOpts,
       computeCellOpts,
       computeRowOpts,
-      computeDragOpts,
+      computeRowDragOpts,
+      computeColumnDragOpts,
       computeResizeOpts,
       computeResizableOpts,
       computeSeqOpts,
@@ -10378,8 +10554,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const cellOffsetWidth = computeCellOffsetWidth.value;
       const mouseOpts = computeMouseOpts.value;
       const keyboardOpts = computeKeyboardOpts.value;
-      const bodyWrapperRef = elemStore['main-body-wrapper'];
-      const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null;
+      const bodyWrapperElem = getRefElem(elemStore['main-body-wrapper']);
       if (emptyPlaceholderElem) {
         emptyPlaceholderElem.style.top = `${headerHeight}px`;
         emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - scrollbarHeight}px` : '';
@@ -10424,10 +10599,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           fixedWrapperElem = isFixedLeft ? refLeftContainer.value : refRightContainer.value;
         }
         layoutList.forEach(layout => {
-          const wrapperRef = elemStore[`${name}-${layout}-wrapper`];
-          const wrapperElem = wrapperRef ? wrapperRef.value : null;
-          const tableRef = elemStore[`${name}-${layout}-table`];
-          const tableElem = tableRef ? tableRef.value : null;
+          const wrapperElem = getRefElem(elemStore[`${name}-${layout}-wrapper`]);
+          const tableElem = getRefElem(elemStore[`${name}-${layout}-table`]);
           if (layout === 'header') {
             // 表头体样式处理
             // 横向滚动渲染
@@ -10447,13 +10620,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             if (tableElem) {
               tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
             }
-            const repairRef = elemStore[`${name}-${layout}-repair`];
-            const repairElem = repairRef ? repairRef.value : null;
+            const repairElem = getRefElem(elemStore[`${name}-${layout}-repair`]);
             if (repairElem) {
               repairElem.style.width = `${tableWidth}px`;
             }
-            const listRef = elemStore[`${name}-${layout}-list`];
-            const listElem = listRef ? listRef.value : null;
+            const listElem = getRefElem(elemStore[`${name}-${layout}-list`]);
             if (isGroup && listElem) {
               external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(listElem.querySelectorAll('.col--group'), thElem => {
                 const colNode = tableMethods.getColumnNode(thElem);
@@ -10484,8 +10655,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               });
             }
           } else if (layout === 'body') {
-            const emptyBlockRef = elemStore[`${name}-${layout}-emptyBlock`];
-            const emptyBlockElem = emptyBlockRef ? emptyBlockRef.value : null;
+            const emptyBlockElem = getRefElem(elemStore[`${name}-${layout}-emptyBlock`]);
             if (isNodeElement(wrapperElem)) {
               let bodyMaxHeight = 0;
               const bodyMinHeight = customMinHeight - headerHeight - footerHeight;
@@ -10573,8 +10743,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               tableElem.style.width = tWidth ? `${tWidth + scrollbarWidth}px` : '';
             }
           }
-          const colgroupRef = elemStore[`${name}-${layout}-colgroup`];
-          const colgroupElem = colgroupRef ? colgroupRef.value : null;
+          const colgroupElem = getRefElem(elemStore[`${name}-${layout}-colgroup`]);
           if (colgroupElem) {
             external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(colgroupElem.children, colElem => {
               const colid = colElem.getAttribute('name');
@@ -10602,8 +10771,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                 const showTitle = cellOverflow === 'title';
                 const showTooltip = cellOverflow === true || cellOverflow === 'tooltip';
                 let hasEllipsis = showTitle || showTooltip || showEllipsis;
-                const listRef = elemStore[`${name}-${layout}-list`];
-                const listElem = listRef ? listRef.value : null;
+                const listElem = getRefElem(elemStore[`${name}-${layout}-list`]);
                 // 纵向虚拟滚动不支持动态行高
                 if (scrollYLoad && !hasEllipsis) {
                   hasEllipsis = true;
@@ -11337,6 +11505,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       editStore.removeMaps = {};
       const sYLoad = updateScrollYStatus(fullData);
       reactData.scrollYLoad = sYLoad;
+      reactData.isDragRowMove = false;
       // 全量数据
       internalData.tableFullData = fullData;
       internalData.tableFullTreeData = treeData;
@@ -11622,6 +11791,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const tableFullColumn = getColumnList(collectColumn);
       internalData.tableFullColumn = tableFullColumn;
       reactData._isLoading = true;
+      reactData.isDragColMove = false;
       initColumnSort();
       return Promise.resolve(restoreCustomStorage()).then(() => {
         reactData._isLoading = false;
@@ -14197,8 +14367,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           mouseConfig
         } = props;
         const mouseOpts = computeMouseOpts.value;
-        if (mouseConfig && mouseOpts.area && $xeTable.handleUpdateCellAreas) {
-          return $xeTable.handleUpdateCellAreas();
+        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+          return $xeTable.handleRecalculateCellAreas();
         }
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       },
@@ -14408,7 +14578,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                   // 如果点击了当前表格之外
                   !getEventTargetNode(evnt, el).flag) {
                     setTimeout(() => {
-                      $xeTable.clearEdit(evnt).then(() => {
+                      $xeTable.handleClearEdit(evnt).then(() => {
                         // 如果存在校验，点击了表格之外则清除
                         if (!internalData.isActivated && editRules && validOpts.autoClear) {
                           reactData.validErrorMaps = {};
@@ -14496,8 +14666,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       if (isEsc) {
         tablePrivateMethods.preventEvent(evnt, 'event.keydown', null, () => {
           dispatchEvent('keydown-start', {}, evnt);
-          if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
-            $xeTable.handleKeyboardEvent(evnt);
+          if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
+            $xeTable.handleKeyboardCellAreaEvent(evnt);
           } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
             evnt.stopPropagation();
             // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -14509,7 +14679,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -14583,8 +14753,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             } else {
               $xeTable.moveCtxMenu(evnt, ctxMenuStore, 'selected', isRightArrow, true, menuList);
             }
-          } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardEvent) {
-            $xeTable.handleKeyboardEvent(evnt);
+          } else if (keyboardConfig && mouseConfig && mouseOpts.area && $xeTable.handleKeyboardCellAreaEvent) {
+            $xeTable.handleKeyboardCellAreaEvent(evnt);
           } else if (isEsc) {
             // 如果按下了 Esc 键，关闭快捷菜单、筛选
             if ($xeTable.closeMenu) {
@@ -14595,7 +14765,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -14631,7 +14801,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               // 如果是激活编辑状态，则取消编辑
               if (actived.row) {
                 const params = actived.args;
-                $xeTable.clearEdit(evnt);
+                $xeTable.handleClearEdit(evnt);
                 // 如果配置了选中功能，则为选中状态
                 if (mouseOpts.selected) {
                   (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => $xeTable.handleSelected(params, evnt));
@@ -14881,8 +15051,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       if (!el || !el.clientWidth) {
         return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
       }
-      tableMethods.updateCellAreas();
       tableMethods.recalculate(true);
+      tableMethods.updateCellAreas();
     };
     const handleTargetEnterEvent = isClear => {
       const $tooltip = refTooltip.value;
@@ -14915,65 +15085,120 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         });
       }
     };
-    const clearRowDropTarget = () => {
+    const updateRowDropTipContent = tdEl => {
+      const {
+        dragConfig
+      } = props;
+      const {
+        dragRow
+      } = reactData;
+      const rowDragOpts = computeRowDragOpts.value;
+      const {
+        tooltipMethod
+      } = rowDragOpts;
+      const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
+      let tipContent = '';
+      if (rTooltipMethod) {
+        tipContent = `${rTooltipMethod({
+          row: dragRow
+        }) || ''}`;
+      } else {
+        tipContent = table_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+      }
+      reactData.dragTipText = tipContent;
+    };
+    const updateColDropOrigin = column => {
       const el = refElem.value;
       if (el) {
-        const clss = 'row--drag-active-target';
-        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
-          removeClass(elem, clss);
+        const clss = 'col--drag-origin';
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`[colid="${column.id}"]`), elem => {
+          addClass(elem, clss);
         });
       }
     };
-    const updateRowDropTarget = (row, dragPos) => {
+    const clearColDropOrigin = () => {
       const el = refElem.value;
       if (el) {
-        const clss = 'row--drag-active-target';
-        const rowid = getRowid($xeTable, row);
-        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`[rowid="${rowid}"]`), elem => {
-          addClass(elem, clss);
-          elem.setAttribute('drag-pos', dragPos);
+        const clss = 'col--drag-origin';
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(el.querySelectorAll(`.${clss}`), elem => {
+          elem.draggable = false;
+          removeClass(elem, clss);
         });
       }
     };
-    const showRowDropTip = evnt => {
-      const rdTipEl = refRowDragTipElem.value;
-      if (!rdTipEl) {
-        return;
+    const updateColDropTipContent = tdEl => {
+      const {
+        dragCol
+      } = reactData;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const {
+        tooltipMethod
+      } = columnDragOpts;
+      let tipContent = '';
+      if (tooltipMethod) {
+        tipContent = `${tooltipMethod({
+          column: dragCol
+        }) || ''}`;
+      } else {
+        tipContent = table_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
       }
+      reactData.dragTipText = tipContent;
+    };
+    const showDropTip = (evnt, trEl, thEl, dragPos) => {
       const el = refElem.value;
       if (!el) {
         return;
       }
+      const {
+        scrollbarWidth,
+        scrollbarHeight
+      } = reactData;
+      const wrapperRect = el.getBoundingClientRect();
+      if (trEl) {
+        const rdLineEl = refDragRowLineElem.value;
+        if (rdLineEl) {
+          const trRect = trEl.getBoundingClientRect();
+          let top = Math.max(1, trRect.y - wrapperRect.y);
+          if (dragPos === 'bottom') {
+            top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height);
+          }
+          rdLineEl.style.top = `${top}px`;
+          rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`;
+          rdLineEl.style.display = 'block';
+        }
+      } else if (thEl) {
+        const cdLineEl = refDragColLineElem.value;
+        if (cdLineEl) {
+          const thRect = thEl.getBoundingClientRect();
+          let left = Math.max(1, thRect.x - wrapperRect.x);
+          if (dragPos === 'right') {
+            left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width);
+          }
+          cdLineEl.style.left = `${left}px`;
+          cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`;
+          cdLineEl.style.display = 'block';
+        }
+      }
+      const rdTipEl = refDragTipElem.value;
       if (rdTipEl) {
-        const wrapperRect = el.getBoundingClientRect();
         rdTipEl.style.display = 'block';
         rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`;
         rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`;
       }
     };
-    const hideRowDropTip = () => {
-      const rdTipEl = refRowDragTipElem.value;
+    const hideDropTip = () => {
+      const rdTipEl = refDragTipElem.value;
+      const rdLineEl = refDragRowLineElem.value;
+      const cdLineEl = refDragColLineElem.value;
       if (rdTipEl) {
         rdTipEl.style.display = '';
       }
-    };
-    const updateRowDropTipContent = tdEl => {
-      const {
-        dragRow
-      } = reactData;
-      const dragOpts = computeDragOpts.value;
-      const {
-        rowTooltipMethod
-      } = dragOpts;
-      let tipContent = '';
-      if (rowTooltipMethod) {
-        tipContent = `${rowTooltipMethod({
-          row: dragRow
-        }) || ''}`;
-      } else {
-        tipContent = table_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+      if (rdLineEl) {
+        rdLineEl.style.display = '';
+      }
+      if (cdLineEl) {
+        cdLineEl.style.display = '';
       }
-      reactData.dragTipText = tipContent;
     };
     /**
      * 处理显示 tooltip
@@ -16297,6 +16522,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           dispatchEvent('sort-change', params, evnt);
         }
       },
+      /**
+       * 行拖拽
+       */
       handleRowDragDragstartEvent(evnt) {
         const img = new Image();
         if (evnt.dataTransfer) {
@@ -16305,12 +16533,13 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       },
       handleRowDragDragendEvent(evnt) {
         const {
-          treeConfig
+          treeConfig,
+          dragConfig
         } = props;
-        const dragOpts = computeDragOpts.value;
+        const rowDragOpts = computeRowDragOpts.value;
         const {
           dragEndMethod
-        } = dragOpts;
+        } = rowDragOpts;
         const treeOpts = computeTreeOpts.value;
         const {
           transform
@@ -16326,17 +16555,20 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           prevDragRow,
           prevDragPos
         } = internalData;
+        const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
+        const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
         if (prevDragRow && dragRow) {
           // 判断是否有拖动
           if (prevDragRow !== dragRow) {
-            Promise.resolve(dragEndMethod ? dragEndMethod({
+            Promise.resolve(dEndMethod ? dEndMethod({
               oldRow: dragRow,
-              newRow: prevDragRow
+              newRow: prevDragRow,
+              dragPos: prevDragPos,
+              offsetIndex: dragOffsetIndex
             }) : true).then(status => {
               if (!status) {
                 return;
               }
-              const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
               let oafIndex = -1;
               let nafIndex = -1;
               if (treeConfig) {
@@ -16345,7 +16577,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                 const otfIndex = $xeTable.findRowIndexOf(tableFullTreeData, dragRow);
                 afterTreeFullData.splice(oafIndex, 1);
                 tableFullTreeData.splice(otfIndex, 1);
-                // 插新位置
+                // 插入新位置
                 const pafIndex = $xeTable.findRowIndexOf(afterTreeFullData, prevDragRow);
                 const ptfIndex = $xeTable.findRowIndexOf(tableFullTreeData, prevDragRow);
                 nafIndex = pafIndex + dragOffsetIndex;
@@ -16358,7 +16590,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
                 const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow);
                 afterFullData.splice(oafIndex, 1);
                 tableFullData.splice(otfIndex, 1);
-                // 插新位置
+                // 插入新位置
                 const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow);
                 const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow);
                 nafIndex = pafIndex + dragOffsetIndex;
@@ -16368,23 +16600,24 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               }
               reactData.isDragRowMove = true;
               $xeTable.cacheRowMap();
-              $xeTable.updateScrollYStatus();
+              updateScrollYStatus();
               $xeTable.handleTableData(treeConfig && transform);
               if (!(treeConfig && transform)) {
                 $xeTable.updateAfterDataIndex();
               }
-              $xeTable.updateFooter();
               $xeTable.checkSelectionStatus();
               if (reactData.scrollYLoad) {
                 $xeTable.updateScrollYSpace();
               }
               (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
                 $xeTable.updateCellAreas();
-                return $xeTable.recalculate();
+                $xeTable.recalculate();
               });
               dispatchEvent('row-dragend', {
                 oldRow: dragRow,
                 newRow: prevDragRow,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex,
                 _index: {
                   newIndex: nafIndex,
                   oldIndex: oafIndex
@@ -16393,19 +16626,25 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
             }).catch(() => {});
           }
         }
-        hideRowDropTip();
+        hideDropTip();
         clearRowDropOrigin();
-        clearRowDropTarget();
         reactData.dragRow = null;
+        reactData.dragCol = null;
         setTimeout(() => {
           reactData.isDragRowMove = false;
         }, 500);
       },
       handleRowDragDragoverEvent(evnt) {
+        const {
+          dragRow
+        } = reactData;
+        if (!dragRow) {
+          evnt.preventDefault();
+          return;
+        }
         const trEl = evnt.currentTarget;
         const rowid = trEl.getAttribute('rowid');
         const row = $xeTable.getRowById(rowid);
-        clearRowDropTarget();
         if (row) {
           evnt.preventDefault();
           evnt.preventDefault();
@@ -16414,50 +16653,208 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           } = reactData;
           const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
           const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-          updateRowDropTarget(row, dragPos);
           internalData.prevDragRow = row;
           internalData.prevDragPos = dragPos;
+          showDropTip(evnt, trEl, null, dragPos);
           dispatchEvent('row-dragover', {
             oldRow: dragRow,
             targetRow: row,
             dragPos
           }, evnt);
         }
-        showRowDropTip(evnt);
       },
       handleCellDragMousedownEvent(evnt, params) {
         evnt.stopPropagation();
-        const dragOpts = computeDragOpts.value;
+        const {
+          dragConfig
+        } = props;
+        const rowDragOpts = computeRowDragOpts.value;
         const {
           dragStartMethod
-        } = dragOpts;
+        } = rowDragOpts;
         const {
           row
         } = params;
         const dragEl = evnt.currentTarget;
-        const tdEl = dragEl.parentNode?.parentNode;
-        const trEl = tdEl.parentNode;
+        const tdEl = dragEl.parentElement?.parentElement;
+        const trEl = tdEl.parentElement;
+        const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
         reactData.isDragRowMove = false;
         clearRowDropOrigin();
-        if (dragStartMethod && !dragStartMethod(params)) {
+        if (dStartMethod && !dStartMethod(params)) {
           trEl.draggable = false;
           reactData.dragRow = null;
-          hideRowDropTip();
+          reactData.dragCol = null;
+          hideDropTip();
           return;
         }
         reactData.dragRow = row;
+        reactData.dragCol = null;
         trEl.draggable = true;
         updateRowDropOrigin(row);
-        showRowDropTip(evnt);
         updateRowDropTipContent(tdEl);
         dispatchEvent('row-dragstart', params, evnt);
       },
       handleCellDragMouseupEvent() {
         clearRowDropOrigin();
-        hideRowDropTip();
+        hideDropTip();
         reactData.dragRow = null;
+        reactData.dragCol = null;
         reactData.isDragRowMove = false;
       },
+      /**
+       * 列拖拽
+       */
+      handleHeaderCellDragDragstartEvent(evnt) {
+        const img = new Image();
+        if (evnt.dataTransfer) {
+          evnt.dataTransfer.setDragImage(img, 0, 0);
+        }
+      },
+      handleHeaderCellDragDragendEvent(evnt) {
+        const {
+          mouseConfig
+        } = props;
+        const columnDragOpts = computeColumnDragOpts.value;
+        const {
+          dragEndMethod
+        } = columnDragOpts;
+        const {
+          dragCol
+        } = reactData;
+        const {
+          collectColumn,
+          prevDragCol,
+          prevDragPos
+        } = internalData;
+        const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
+        if (prevDragCol && dragCol) {
+          // 判断是否有拖动
+          if (prevDragCol !== dragCol) {
+            Promise.resolve(dragEndMethod ? dragEndMethod({
+              oldColumn: dragCol,
+              newColumn: prevDragCol,
+              dragPos: prevDragPos,
+              offsetIndex: dragOffsetIndex
+            }) : true).then(status => {
+              if (!status) {
+                return;
+              }
+              external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parent) => {
+                if (!parent) {
+                  const sortIndex = index + 1;
+                  column.renderSortNumber = sortIndex;
+                }
+              });
+              const oafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(collectColumn, item => item.id === dragCol.id);
+              const nafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex;
+              const newTargetCol = collectColumn[nafIndex];
+              if (newTargetCol) {
+                // 插入最后位置
+                dragCol.renderSortNumber = newTargetCol.renderSortNumber;
+                newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5;
+              } else {
+                // 插入新位置
+                dragCol.renderSortNumber = collectColumn.length + 1.5;
+              }
+              reactData.isDragColMove = true;
+              if (mouseConfig) {
+                if ($xeTable.clearSelected) {
+                  $xeTable.clearSelected();
+                }
+                if ($xeTable.clearCellAreas) {
+                  $xeTable.clearCellAreas();
+                  $xeTable.clearCopyCellArea();
+                }
+              }
+              tablePrivateMethods.analyColumnWidth();
+              (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)().then(() => {
+                $xeTable.updateCellAreas();
+                tableMethods.refreshColumn(true);
+              });
+              dispatchEvent('column-dragend', {
+                oldColumn: dragCol,
+                newColumn: prevDragCol,
+                dragPos: prevDragPos,
+                offsetIndex: dragOffsetIndex,
+                _index: {
+                  newIndex: nafIndex,
+                  oldIndex: oafIndex
+                }
+              }, evnt);
+            }).catch(() => {});
+          }
+        }
+        hideDropTip();
+        clearColDropOrigin();
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        setTimeout(() => {
+          reactData.isDragColMove = false;
+        }, 500);
+      },
+      handleHeaderCellDragDragoverEvent(evnt) {
+        const {
+          dragCol
+        } = reactData;
+        if (!dragCol) {
+          evnt.preventDefault();
+          return;
+        }
+        const thEl = evnt.currentTarget;
+        const colid = thEl.getAttribute('colid');
+        const column = $xeTable.getColumnById(colid);
+        if (column) {
+          evnt.preventDefault();
+          const {
+            dragCol
+          } = reactData;
+          const offsetX = evnt.clientX - thEl.getBoundingClientRect().x;
+          const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right';
+          internalData.prevDragCol = column;
+          internalData.prevDragPos = dragPos;
+          showDropTip(evnt, null, thEl, dragPos);
+          dispatchEvent('column-dragover', {
+            oldColumn: dragCol,
+            targetColumn: column,
+            dragPos
+          }, evnt);
+        }
+      },
+      handleHeaderCellDragMousedownEvent(evnt, params) {
+        evnt.stopPropagation();
+        const columnDragOpts = computeColumnDragOpts.value;
+        const {
+          dragStartMethod
+        } = columnDragOpts;
+        const {
+          column
+        } = params;
+        const dragEl = evnt.currentTarget;
+        const thEl = dragEl.parentElement?.parentElement;
+        reactData.isDragColMove = false;
+        clearColDropOrigin();
+        if (dragStartMethod && !dragStartMethod(params)) {
+          thEl.draggable = false;
+          reactData.dragRow = null;
+          reactData.dragCol = null;
+          hideDropTip();
+          return;
+        }
+        reactData.dragCol = column;
+        reactData.dragRow = null;
+        thEl.draggable = true;
+        updateColDropOrigin(column);
+        updateColDropTipContent(thEl);
+        dispatchEvent('column-dragstart', params, evnt);
+      },
+      handleHeaderCellDragMouseupEvent() {
+        clearColDropOrigin();
+        hideDropTip();
+        reactData.dragRow = null;
+        reactData.dragCol = null;
+        reactData.isDragColMove = false;
+      },
       /**
        * 横向 X 可视渲染事件处理
        */
@@ -16650,8 +17047,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           containerList.forEach(name => {
             const layoutList = ['header', 'body', 'footer'];
             layoutList.forEach(layout => {
-              const xSpaceRef = elemStore[`${name}-${layout}-xSpace`];
-              const xSpaceElem = xSpaceRef ? xSpaceRef.value : null;
+              const xSpaceElem = getRefElem(elemStore[`${name}-${layout}-xSpace`]);
               if (xSpaceElem) {
                 xSpaceElem.style.width = scrollXLoad ? `${tableWidth + (layout === 'header' ? scrollbarWidth : 0)}px` : '';
               }
@@ -16714,14 +17110,12 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         }
         containerList.forEach(name => {
           const layoutList = ['header', 'body', 'footer'];
-          const tableRef = elemStore[`${name}-body-table`];
-          const tableElem = tableRef ? tableRef.value : null;
+          const tableElem = getRefElem(elemStore[`${name}-body-table`]);
           if (tableElem) {
             tableElem.style.marginTop = marginTop;
           }
           layoutList.forEach(layout => {
-            const ySpaceRef = elemStore[`${name}-${layout}-ySpace`];
-            const ySpaceElem = ySpaceRef ? ySpaceRef.value : null;
+            const ySpaceElem = getRefElem(elemStore[`${name}-${layout}-ySpace`]);
             if (ySpaceElem) {
               ySpaceElem.style.height = ySpaceHeight;
             }
@@ -16901,6 +17295,52 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       }
       return getFuncText(props.emptyText) || table_getI18n('vxe.table.emptyText');
     };
+    const renderDragTipContents = () => {
+      const {
+        dragConfig
+      } = props;
+      const {
+        dragRow,
+        dragCol,
+        dragTipText
+      } = reactData;
+      const columnDragOpts = computeColumnDragOpts.value;
+      const rowDragOpts = computeRowDragOpts.value;
+      const rowDragSlots = rowDragOpts.slots || {};
+      const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null);
+      const columnDragSlots = columnDragOpts.slots || {};
+      const cTipSlot = columnDragSlots.tip;
+      if (dragRow && rTipSlot) {
+        return callSlot(rTipSlot, {
+          row: dragRow
+        });
+      }
+      if (dragCol && cTipSlot) {
+        return callSlot(cTipSlot, {
+          column: dragCol
+        });
+      }
+      return [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', dragTipText)];
+    };
+    const renderDragTip = () => {
+      const rowOpts = computeRowOpts.value;
+      const columnOpts = computeColumnOpts.value;
+      if (rowOpts.drag || columnOpts.drag) {
+        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          class: 'vxe-table--drag-wrapper'
+        }, [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refDragRowLineElem,
+          class: 'vxe-table--drag-row-line'
+        }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refDragColLineElem,
+          class: 'vxe-table--drag-col-line'
+        }), (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
+          ref: refDragTipElem,
+          class: 'vxe-table--drag-sort-tip'
+        }, renderDragTipContents())]);
+      }
+      return table_renderEmptyElement($xeTable);
+    };
     function handleUupdateResize() {
       const el = refElem.value;
       if (el && el.clientWidth && el.clientHeight) {
@@ -16938,9 +17378,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         columnStore,
         filterStore,
         customStore,
-        tooltipStore,
-        dragRow,
-        dragTipText
+        tooltipStore
       } = reactData;
       const {
         leftList,
@@ -16952,18 +17390,17 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
       const checkboxOpts = computeCheckboxOpts.value;
       const treeOpts = computeTreeOpts.value;
       const rowOpts = computeRowOpts.value;
-      const dragOpts = computeDragOpts.value;
       const columnOpts = computeColumnOpts.value;
       const vSize = computeSize.value;
       const tableBorder = computeTableBorder.value;
       const mouseOpts = computeMouseOpts.value;
+      const areaOpts = computeAreaOpts.value;
       const validTipOpts = computeValidTipOpts.value;
       const loadingOpts = computeLoadingOpts.value;
       const isMenu = computeIsMenu.value;
       const currLoading = reactData._isLoading || loading;
       const virtualScrollBars = computeVirtualScrollBars.value;
-      const dragSlots = dragOpts.slots || {};
-      const rowTipSlot = dragSlots.rowTip;
+      const isArea = mouseConfig && mouseOpts.area;
       return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
         ref: refElem,
         class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, {
@@ -16973,7 +17410,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           'old-cell-valid': editRules && table_getConfig().cellVaildMode === 'obsolete',
           'cell--highlight': highlightCell,
           'cell--selected': mouseConfig && mouseOpts.selected,
-          'cell--area': mouseConfig && mouseOpts.area,
+          'cell--area': isArea,
+          'header-cell--area': isArea && areaOpts.selectCellByHeader,
+          'body-cell--area': isArea && areaOpts.selectCellByBody,
           'row--highlight': rowOpts.isHover || highlightHoverRow,
           'column--highlight': columnOpts.isHover || highlightHoverColumn,
           'checkbox--range': checkboxOpts.range,
@@ -17141,14 +17580,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
         ref: refTableMenu
       }) : table_renderEmptyElement($xeTable),
       /**
-       * 拖拽提示
+       * 拖拽排序提示
        */
-      rowOpts.drag && (dragRow || dragTipText) ? (0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('div', {
-        ref: refRowDragTipElem,
-        class: 'vxe-table--row-drag-tip'
-      }, rowTipSlot ? dragRow ? callSlot(rowTipSlot, {
-        row: dragRow
-      }) : [table_renderEmptyElement($xeTable)] : dragTipText ? [(0,external_commonjs_vue_commonjs2_vue_root_Vue_.h)('span', dragTipText)] : [table_renderEmptyElement($xeTable)]) : table_renderEmptyElement($xeTable),
+      renderDragTip(),
       /**
        * 提示相关
        */
@@ -17429,7 +17863,7 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
           if (rowOpts.height && !props.showOverflow) {
             warnLog('vxe.error.notProp', ['table.show-overflow']);
           }
-          if (!$xeTable.handleUpdateCellAreas) {
+          if (!$xeTable.handleRecalculateCellAreas) {
             if (props.clipConfig) {
               warnLog('vxe.error.notProp', ['clip-config']);
             }
@@ -17441,6 +17875,9 @@ const customStorageKey = 'VXE_CUSTOM_STORE';
               return;
             }
           }
+          if (props.dragConfig) {
+            warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);
+          }
           if (props.treeConfig && treeOpts.children) {
             warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
           }
@@ -17971,8 +18408,7 @@ hook_hooks.add('tableFilterModule', {
             fixed
           } = column;
           return $xeTable.scrollToColumn(column).then(() => {
-            const headerWrapperRef = elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper'];
-            const headerWrapperElem = headerWrapperRef ? headerWrapperRef.value : null;
+            const headerWrapperElem = getRefElem(elemStore[`${fixed || 'main'}-header-wrapper`] || elemStore['main-header-wrapper']);
             if (headerWrapperElem) {
               const filterBtnElem = headerWrapperElem.querySelector(`.vxe-header--column.${column.id} .vxe-filter--btn`);
               triggerEvent(filterBtnElem, 'click');
@@ -18807,6 +19243,57 @@ edit_hook_hooks.add('tableEditModule', {
         };
       });
     };
+    const handleClearEdit = (evnt, targetRow) => {
+      const {
+        mouseConfig
+      } = props;
+      const {
+        editStore
+      } = reactData;
+      const {
+        actived,
+        focused
+      } = editStore;
+      const {
+        row,
+        column
+      } = actived;
+      const validOpts = computeValidOpts.value;
+      const mouseOpts = computeMouseOpts.value;
+      if (row || column) {
+        if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
+          return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+        }
+        syncActivedCell();
+        actived.args = null;
+        actived.row = null;
+        actived.column = null;
+        $xeTable.updateFooter();
+        $xeTable.dispatchEvent('edit-closed', {
+          row,
+          rowIndex: $xeTable.getRowIndex(row),
+          $rowIndex: $xeTable.getVMRowIndex(row),
+          column,
+          columnIndex: $xeTable.getColumnIndex(column),
+          $columnIndex: $xeTable.getVMColumnIndex(column)
+        }, evnt || null);
+      }
+      (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)(() => {
+        if (mouseConfig && mouseOpts.area && $xeTable.handleRecalculateCellAreas) {
+          return $xeTable.handleRecalculateCellAreas();
+        }
+      });
+      if (validOpts.autoClear) {
+        if (validOpts.msgMode !== 'full' || hook_getConfig().cellVaildMode === 'obsolete') {
+          if ($xeTable.clearValidate) {
+            return $xeTable.clearValidate();
+          }
+        }
+      }
+      focused.row = null;
+      focused.column = null;
+      return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+    };
     editMethods = {
       /**
        * 往表格中插入临时数据
@@ -19123,54 +19610,18 @@ edit_hook_hooks.add('tableEditModule', {
         }
         return null;
       },
-      clearActived(evnt) {
+      clearActived(row) {
         // 即将废弃
         if (true) {
           warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit']);
         }
-        return this.clearEdit(evnt);
+        return this.clearEdit(row);
       },
       /**
        * 清除激活的编辑
        */
-      clearEdit(evnt) {
-        const {
-          editStore
-        } = reactData;
-        const {
-          actived,
-          focused
-        } = editStore;
-        const {
-          row,
-          column
-        } = actived;
-        const validOpts = computeValidOpts.value;
-        if (row || column) {
-          syncActivedCell();
-          actived.args = null;
-          actived.row = null;
-          actived.column = null;
-          $xeTable.updateFooter();
-          $xeTable.dispatchEvent('edit-closed', {
-            row,
-            rowIndex: $xeTable.getRowIndex(row),
-            $rowIndex: $xeTable.getVMRowIndex(row),
-            column,
-            columnIndex: $xeTable.getColumnIndex(column),
-            $columnIndex: $xeTable.getVMColumnIndex(column)
-          }, evnt || null);
-        }
-        if (validOpts.autoClear) {
-          if (validOpts.msgMode !== 'full' || hook_getConfig().cellVaildMode === 'obsolete') {
-            if ($xeTable.clearValidate) {
-              return $xeTable.clearValidate();
-            }
-          }
-        }
-        focused.row = null;
-        focused.column = null;
-        return (0,external_commonjs_vue_commonjs2_vue_root_Vue_.nextTick)();
+      clearEdit(row) {
+        return handleClearEdit(null, row);
       },
       /**
        * 清除所选中源状态
@@ -19335,7 +19786,7 @@ edit_hook_hooks.add('tableEditModule', {
                 }
                 $xeTable.closeTooltip();
                 if (actived.column) {
-                  editMethods.clearEdit(evnt);
+                  handleClearEdit(evnt);
                 }
                 type = 'edit-activated';
                 column.renderHeight = cell.offsetHeight;
@@ -19420,6 +19871,12 @@ edit_hook_hooks.add('tableEditModule', {
       handleActived(params, evnt) {
         return editPrivateMethods.handleEdit(params, evnt);
       },
+      /**
+       * 处理取消编辑
+       * @param evnt
+       * @returns
+       */
+      handleClearEdit,
       /**
        * 处理聚焦
        */
@@ -19507,7 +19964,7 @@ edit_hook_hooks.add('tableEditModule', {
         const selectMethod = () => {
           if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
             if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
-              editMethods.clearEdit(evnt);
+              handleClearEdit(evnt);
               editMethods.clearSelected();
               if ($xeTable.clearCellAreas) {
                 $xeTable.clearCellAreas();
@@ -21238,6 +21695,7 @@ export_hook_hooks.add('tableExportModule', {
 
 
 
+
 const {
   hooks: keyboard_hook_hooks
 } = core_.VxeUI;
@@ -21335,8 +21793,7 @@ keyboard_hook_hooks.add('tableKeyboardModule', {
         } = internalData;
         const disX = evnt.clientX;
         const disY = evnt.clientY;
-        const bodyWrapperRef = elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper'];
-        const bodyWrapperElem = bodyWrapperRef ? bodyWrapperRef.value : null;
+        const bodyWrapperElem = getRefElem(elemStore[`${column.fixed || 'main'}-body-wrapper`] || elemStore['main-body-wrapper']);
         if (!bodyWrapperElem) {
           return;
         }
@@ -22416,6 +22873,10 @@ core_.VxeUI.hooks.add('tableCustomModule', {
           column.visible = column.renderVisible;
         }
       });
+      reactData.isDragColMove = true;
+      setTimeout(() => {
+        reactData.isDragColMove = false;
+      }, 1000);
       return $xeTable.saveCustomStore('confirm');
     };
     const cancelCustom = () => {
@@ -26114,6 +26575,7 @@ const Grid = VxeGrid;
       fileTypeHint: '支持 {0} 文件类型',
       fileSizeHint: '单个文件大小不超过{0}',
       fileCountHint: '最多可上传{0}个文件',
+      uploadTypeErr: '文件类型不匹配！',
       overCountErr: '最多只能选择{0}个文件！',
       overCountExtraErr: '已超出最大数量{0}个，超出的{1}个文件将被忽略！',
       overSizeErr: '文件大小最大不能超过{0}！',