vxe-table 3.10.16 → 3.11.0

package/lib/index.umd.js

@@ -2220,7 +2220,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.10.16";
+const version = "3.11.0";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2257,8 +2257,11 @@ core_.VxeUI.setConfig({
       // trigger: 'default'
       strict: true
     },
-    dragConfig: {
-      showRowIcon: true
+    rowDragConfig: {
+      showIcon: true
+    },
+    columnDragConfig: {
+      showIcon: true
     },
     checkboxConfig: {
       // trigger: 'default',
@@ -2355,7 +2358,8 @@ core_.VxeUI.setConfig({
     },
     areaConfig: {
       autoClear: true,
-      selectCellByHeader: true
+      selectCellByHeader: true,
+      selectCellByBody: true
     },
     clipConfig: {
       isCopy: true,
@@ -2452,6 +2456,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',
@@ -2769,7 +2774,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.10.16"}`;
+const log_version = `table v${"3.11.0"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -3518,12 +3523,17 @@ function renderCellDragIcon(h, params) {
   const {
     $table
   } = params;
-  const dragOpts = $table.computeDragOpts;
+  const tableProps = $table;
   const {
-    rowIcon,
-    rowDisabledMethod
-  } = dragOpts;
-  const isDisabled = rowDisabledMethod && rowDisabledMethod(params);
+    dragConfig
+  } = tableProps;
+  const rowDragOpts = $table.computeRowDragOpts;
+  const {
+    icon,
+    disabledMethod
+  } = rowDragOpts;
+  const rDisabledMethod = disabledMethod || (dragConfig ? dragConfig.rowDisabledMethod : null);
+  const isDisabled = rDisabledMethod && rDisabledMethod(params);
   return h('span', {
     key: 'dg',
     class: ['vxe-cell--drag-handle', {
@@ -3538,14 +3548,13 @@ function renderCellDragIcon(h, params) {
       mouseup: $table.handleCellDragMouseupEvent
     }
   }, [h('i', {
-    class: rowIcon || cell_getIcon().TABLE_DRAG_ROW
+    class: icon || (dragConfig ? dragConfig.rowIcon : '') || cell_getIcon().TABLE_DRAG_ROW
   })]);
 }
 function renderCellBaseVNs(h, params, content) {
   const {
     $table,
     column,
-    row,
     level
   } = params;
   const {
@@ -3553,25 +3562,64 @@ function renderCellBaseVNs(h, params, content) {
   } = column;
   const tableProps = $table;
   const {
-    treeConfig
+    treeConfig,
+    dragConfig
   } = tableProps;
   const rowOpts = $table.computeRowOpts;
-  const dragOpts = $table.computeDragOpts;
+  const rowDragOpts = $table.computeRowDragOpts;
   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({
-    row,
-    column
-  }))) {
+  if (dragSort && rowOpts.drag && (showIcon || (dragConfig ? dragConfig.showRowIcon : false)) && (!rVisibleMethod || rVisibleMethod(params))) {
     if (!treeConfig || !level) {
       vns.unshift(renderCellDragIcon(h, params));
     }
   }
   return vns;
 }
+function renderHeaderCellDragIcon(h, params) {
+  const {
+    $table,
+    column
+  } = params;
+  const columnOpts = $table.computeColumnOpts;
+  const columnDragOpts = $table.computeColumnDragOpts;
+  const {
+    showIcon,
+    icon,
+    visibleMethod,
+    disabledMethod
+  } = columnDragOpts;
+  const isDisabled = disabledMethod && disabledMethod(params);
+  if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
+    if (!(column.fixed || column.parentId)) {
+      return h('span', {
+        key: 'dg',
+        class: ['vxe-cell--drag-handle', {
+          'is--disabled': isDisabled
+        }],
+        on: {
+          mousedown(evnt) {
+            if (!isDisabled) {
+              $table.handleHeaderCellDragMousedownEvent(evnt, params);
+            }
+          },
+          mouseup: $table.handleHeaderCellDragMouseupEvent
+        }
+      }, [h('i', {
+        class: icon || cell_getIcon().TABLE_DRAG_COLUMN
+      })]);
+    }
+  }
+  return renderEmptyElement($table);
+}
+function renderHeaderCellBaseVNs(h, params, content) {
+  const vns = [renderTitlePrefixIcon(h, params), renderHeaderCellDragIcon(h, params), ...(external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isArray(content) ? content : [content]), renderTitleSuffixIcon(h, params)];
+  return vns;
+}
 function renderTitleContent(h, params, content) {
   const {
     $table,
@@ -3751,7 +3799,7 @@ const Cell = {
     return createColumn($xetable, _vm, renMaps);
   },
   /**
-   * 单元格
+   * 列头标题
    */
   renderHeaderTitle(h, params) {
     const {
@@ -3777,7 +3825,7 @@ const Cell = {
     return renderTitleContent(h, params, formatText(column.getTitle(), 1));
   },
   renderDefaultHeader(h, params) {
-    return renderTitlePrefixIcon(h, params).concat(Cell.renderHeaderTitle(h, params)).concat(renderTitleSuffixIcon(h, params));
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params));
   },
   renderDefaultCell(h, params) {
     const {
@@ -3898,7 +3946,7 @@ const Cell = {
     }, cellVNodes)])];
   },
   /**
-   * 索引
+   * 序号
    */
   renderSeqHeader(h, params) {
     const {
@@ -3908,7 +3956,7 @@ const Cell = {
     const {
       slots
     } = column;
-    return renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1));
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, slots && slots.header ? $table.callSlot(slots.header, params, h) : formatText(column.getTitle(), 1)));
   },
   renderSeqCell(h, params) {
     const {
@@ -3947,9 +3995,9 @@ const Cell = {
     } = column;
     const headerSlot = slots ? slots.header : null;
     const titleSlot = slots ? slots.title : null;
-    return renderTitleContent(h, params, headerSlot ? $table.callSlot(headerSlot, params, h) : [h('span', {
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, params, headerSlot ? $table.callSlot(headerSlot, params, h) : [h('span', {
       class: 'vxe-radio--label'
-    }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))]);
+    }, titleSlot ? $table.callSlot(titleSlot, params, h) : formatText(column.getTitle(), 1))]));
   },
   renderRadioCell(h, params) {
     const {
@@ -4063,14 +4111,14 @@ const Cell = {
       indeterminate: isAllCheckboxIndeterminate
     };
     if (headerSlot) {
-      return renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h));
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, $table.callSlot(headerSlot, checkboxParams, h)));
     }
     if (checkboxOpts.checkStrictly ? !checkboxOpts.showHeader : checkboxOpts.showHeader === false) {
-      return renderTitleContent(h, checkboxParams, [h('span', {
+      return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [h('span', {
         class: 'vxe-checkbox--label'
-      }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)]);
+      }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)]));
     }
-    return renderTitleContent(h, checkboxParams, [h('span', {
+    return renderHeaderCellBaseVNs(h, params, renderTitleContent(h, checkboxParams, [h('span', {
       class: ['vxe-cell--checkbox', {
         'is--checked': isAllCheckboxSelected,
         'is--disabled': isAllCheckboxDisabled,
@@ -4084,7 +4132,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 ? [h('span', {
       class: 'vxe-checkbox--label'
-    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)] : []))]);
+    }, titleSlot ? $table.callSlot(titleSlot, checkboxParams, h) : headerTitle)] : []))]));
   },
   renderCheckboxCell(h, params) {
     const {
@@ -4356,13 +4404,13 @@ const Cell = {
    * 排序和筛选
    */
   renderSortAndFilterHeader(h, params) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderSortIcon(h, params)).concat(Cell.renderFilterIcon(h, params));
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)));
   },
   /**
    * 排序
    */
   renderSortHeader(h, params) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderSortIcon(h, params));
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderSortIcon(h, params)));
   },
   renderSortIcon(h, params) {
     const {
@@ -4409,7 +4457,7 @@ const Cell = {
    * 筛选
    */
   renderFilterHeader(h, params) {
-    return Cell.renderDefaultHeader(h, params).concat(Cell.renderFilterIcon(h, params));
+    return renderHeaderCellBaseVNs(h, params, Cell.renderHeaderTitle(h, params).concat(Cell.renderFilterIcon(h, params)));
   },
   renderFilterIcon(h, params) {
     const {
@@ -4470,11 +4518,15 @@ const Cell = {
         isRequired = columnRules.some(rule => rule.required);
       }
     }
-    return (isEnableConf(editConfig) ? [isRequired && editOpts.showAsterisk ? h('i', {
-      class: 'vxe-cell--required-icon'
-    }) : null, isEnableConf(editRender) && editOpts.showIcon ? h('i', {
-      class: ['vxe-cell--edit-icon', editOpts.icon || cell_getIcon().TABLE_EDIT]
-    }) : null] : []).concat(Cell.renderDefaultHeader(h, params)).concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : []).concat(filters ? Cell.renderFilterIcon(h, params) : []);
+    let editIconVNs = [];
+    if (isEnableConf(editConfig)) {
+      editIconVNs = [isRequired && editOpts.showAsterisk ? h('i', {
+        class: 'vxe-cell--required-icon'
+      }) : renderEmptyElement($table), isEnableConf(editRender) && editOpts.showIcon ? h('i', {
+        class: ['vxe-cell--edit-icon', editOpts.icon || cell_getIcon().TABLE_EDIT]
+      }) : renderEmptyElement($table)];
+    }
+    return renderHeaderCellBaseVNs(h, params, editIconVNs.concat(Cell.renderHeaderTitle(h, params)).concat(sortable || remoteSort ? Cell.renderSortIcon(h, params) : []).concat(filters ? Cell.renderFilterIcon(h, params) : []));
   },
   // 行格编辑模式
   renderRowEdit(h, params) {
@@ -5164,66 +5216,124 @@ function updateRowDropOrigin($xeTable, row) {
     });
   }
 }
-function clearRowDropTarget($xeTable) {
+const updateRowDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  const props = $xeTable;
+  const {
+    dragConfig
+  } = props;
+  const {
+    dragRow
+  } = reactData;
+  const rowDragOpts = $xeTable.computeRowDragOpts;
+  const {
+    tooltipMethod
+  } = rowDragOpts;
+  const rTooltipMethod = tooltipMethod || (dragConfig ? dragConfig.rowTooltipMethod : null);
+  let tipContent = '';
+  if (rTooltipMethod) {
+    tipContent = `${rTooltipMethod({
+      row: dragRow
+    }) || ''}`;
+  } else {
+    tipContent = methods_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+  }
+  reactData.dragTipText = tipContent;
+};
+const updateColDropOrigin = ($xeTable, column) => {
   const el = $xeTable.$el;
   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);
     });
   }
-}
-function updateRowDropTarget($xeTable, row, dragPos) {
+};
+const clearColDropOrigin = $xeTable => {
   const el = $xeTable.$el;
   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);
     });
   }
-}
-function showRowDropTip(evnt, $xeTable) {
-  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
-  if (!rdTipEl) {
-    return;
+};
+const updateColDropTipContent = ($xeTable, tdEl) => {
+  const reactData = $xeTable;
+  const {
+    dragCol
+  } = reactData;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
+  const {
+    tooltipMethod
+  } = columnDragOpts;
+  let tipContent = '';
+  if (tooltipMethod) {
+    tipContent = `${tooltipMethod({
+      column: dragCol
+    }) || ''}`;
+  } else {
+    tipContent = methods_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
   }
-  const el = $xeTable.$el;
+  reactData.dragTipText = tipContent;
+};
+function showDropTip($xeTable, evnt, trEl, thEl, dragPos) {
+  const reactData = $xeTable;
+  const el = $xeTable.$refs.refElem;
   if (!el) {
     return;
   }
+  const {
+    scrollbarWidth,
+    scrollbarHeight
+  } = reactData;
+  const wrapperRect = el.getBoundingClientRect();
+  if (trEl) {
+    const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+    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 = $xeTable.$refs.refDragColLineElem;
+    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 = $xeTable.$refs.refDragTipElem;
   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 = $xeTable => {
-  const rdTipEl = $xeTable.$refs.refRowDragTipElem;
+const hideDropTip = $xeTable => {
+  const rdTipEl = $xeTable.$refs.refDragTipElem;
+  const rdLineEl = $xeTable.$refs.refDragRowLineElem;
+  const cdLineEl = $xeTable.$refs.refDragColLineElem;
   if (rdTipEl) {
     rdTipEl.style.display = '';
   }
-};
-const updateRowDropTipContent = ($xeTable, tdEl) => {
-  const reactData = $xeTable;
-  const {
-    dragRow
-  } = reactData;
-  const dragOpts = $xeTable.computeDragOpts;
-  const {
-    rowTooltipMethod
-  } = dragOpts;
-  let tipContent = '';
-  if (rowTooltipMethod) {
-    tipContent = `${rowTooltipMethod({
-      row: dragRow
-    }) || ''}`;
-  } else {
-    tipContent = methods_getI18n('vxe.table.dragTip', [tdEl.textContent || '']);
+  if (rdLineEl) {
+    rdLineEl.style.display = '';
+  }
+  if (cdLineEl) {
+    cdLineEl.style.display = '';
   }
-  reactData.dragTipText = tipContent;
 };
 const Methods = {
   callSlot(slotFunc, params, h, vNodes) {
@@ -5428,6 +5538,7 @@ const Methods = {
     editStore.removeMaps = {};
     const sYLoad = this.updateScrollYStatus(fullData);
     this.scrollYLoad = sYLoad;
+    this.isDragRowMove = false;
     // 全量数据
     this.tableFullData = fullData;
     this.tableFullTreeData = treeData;
@@ -5619,6 +5730,7 @@ const Methods = {
     const tableFullColumn = getColumnList(collectColumn);
     this.tableFullColumn = tableFullColumn;
     this._isLoading = true;
+    this.isDragColMove = false;
     this.initColumnSort();
     return Promise.resolve(this.restoreCustomStorage()).then(() => {
       this._isLoading = false;
@@ -8283,7 +8395,7 @@ const Methods = {
                 // 如果点击了当前表格之外
                 !getEventTargetNode(evnt, $el).flag) {
                   setTimeout(() => {
-                    this.clearEdit(evnt).then(() => {
+                    this.handleClearEdit(evnt).then(() => {
                       // 如果存在校验，点击了表格之外则清除
                       if (!this.isActivated && editRules && validOpts.autoClear) {
                         this.validErrorMaps = {};
@@ -8366,8 +8478,8 @@ const Methods = {
     if (isEsc) {
       this.preventEvent(evnt, 'event.keydown', null, () => {
         this.emitEvent('keydown-start', {}, evnt);
-        if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-          this.handleKeyboardEvent(evnt);
+        if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+          this.handleKeyboardCellAreaEvent(evnt);
         } else if (actived.row || filterStore.visible || ctxMenuStore.visible) {
           evnt.stopPropagation();
           // 如果按下了 Esc 键，关闭快捷菜单、筛选
@@ -8377,7 +8489,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args;
-              this.clearEdit(evnt);
+              this.handleClearEdit(evnt);
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -8457,8 +8569,8 @@ const Methods = {
           } else {
             this.moveCtxMenu(evnt, keyCode, ctxMenuStore, 'selected', 39, true, this.ctxMenuList);
           }
-        } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardEvent) {
-          this.handleKeyboardEvent(evnt);
+        } else if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
+          this.handleKeyboardCellAreaEvent(evnt);
         } else if (keyboardConfig && isSpacebar && keyboardOpts.isChecked && selected.row && selected.column && (selected.column.type === 'checkbox' || selected.column.type === 'radio')) {
           // 空格键支持选中复选框
           evnt.preventDefault();
@@ -8489,7 +8601,7 @@ const Methods = {
             // 如果是激活编辑状态，则取消编辑
             if (actived.row) {
               const params = actived.args;
-              this.clearEdit(evnt);
+              this.handleClearEdit(evnt);
               // 如果配置了选中功能，则为选中状态
               if (mouseConfig && mouseOpts.selected) {
                 this.$nextTick(() => this.handleSelected(params, evnt));
@@ -10324,6 +10436,9 @@ const Methods = {
       this.emitEvent('sort-change', params, evnt);
     }
   },
+  /**
+   * 行拖拽
+   */
   handleRowDragDragstartEvent(evnt) {
     const img = new Image();
     if (evnt.dataTransfer) {
@@ -10336,12 +10451,13 @@ const Methods = {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const {
-      treeConfig
+      treeConfig,
+      dragConfig
     } = props;
-    const dragOpts = $xeTable.computeDragOpts;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
     const {
       dragEndMethod
-    } = dragOpts;
+    } = rowDragOpts;
     const treeOpts = $xeTable.computeTreeOpts;
     const {
       transform
@@ -10357,17 +10473,20 @@ const Methods = {
       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) {
@@ -10404,18 +10523,19 @@ const Methods = {
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex();
           }
-          $xeTable.updateFooter();
           $xeTable.checkSelectionStatus();
           if (reactData.scrollYLoad) {
             $xeTable.updateScrollYSpace();
           }
           $xeTable.$nextTick().then(() => {
             $xeTable.updateCellAreas();
-            return $xeTable.recalculate();
+            $xeTable.recalculate();
           });
           $xeTable.dispatchEvent('row-dragend', {
             oldRow: dragRow,
             newRow: prevDragRow,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex,
             _index: {
               newIndex: nafIndex,
               oldIndex: oafIndex
@@ -10424,10 +10544,10 @@ const Methods = {
         }).catch(() => {});
       }
     }
-    hideRowDropTip($xeTable);
+    hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
-    clearRowDropTarget($xeTable);
     reactData.dragRow = null;
+    reactData.dragCol = null;
     setTimeout(() => {
       reactData.isDragRowMove = false;
     }, 500);
@@ -10436,10 +10556,16 @@ const Methods = {
     const $xeTable = this;
     const internalData = $xeTable;
     const reactData = $xeTable;
+    const {
+      dragRow
+    } = reactData;
+    if (!dragRow) {
+      evnt.preventDefault();
+      return;
+    }
     const trEl = evnt.currentTarget;
     const rowid = trEl.getAttribute('rowid');
     const row = $xeTable.getRowById(rowid);
-    clearRowDropTarget($xeTable);
     if (row) {
       evnt.preventDefault();
       evnt.preventDefault();
@@ -10448,43 +10574,48 @@ const Methods = {
       } = reactData;
       const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
       const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-      updateRowDropTarget($xeTable, row, dragPos);
       internalData.prevDragRow = row;
       internalData.prevDragPos = dragPos;
+      showDropTip($xeTable, evnt, trEl, null, dragPos);
       $xeTable.dispatchEvent('row-dragover', {
         oldRow: dragRow,
         targetRow: row,
         dragPos
       }, evnt);
     }
-    showRowDropTip(evnt, $xeTable);
   },
   handleCellDragMousedownEvent(evnt, params) {
     const $xeTable = this;
+    const props = $xeTable;
     const reactData = $xeTable;
     evnt.stopPropagation();
-    const dragOpts = $xeTable.computeDragOpts;
+    const {
+      dragConfig
+    } = props;
+    const rowDragOpts = $xeTable.computeRowDragOpts;
     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($xeTable);
-    if (dragStartMethod && !dragStartMethod(params)) {
+    if (dStartMethod && !dStartMethod(params)) {
       trEl.draggable = false;
       reactData.dragRow = null;
-      hideRowDropTip($xeTable);
+      reactData.dragCol = null;
+      hideDropTip($xeTable);
       return;
     }
     reactData.dragRow = row;
+    reactData.dragCol = null;
     trEl.draggable = true;
     updateRowDropOrigin($xeTable, row);
-    showRowDropTip(evnt, $xeTable);
     updateRowDropTipContent($xeTable, tdEl);
     $xeTable.dispatchEvent('row-dragstart', params, evnt);
   },
@@ -10492,10 +10623,175 @@ const Methods = {
     const $xeTable = this;
     const reactData = $xeTable;
     clearRowDropOrigin($xeTable);
-    hideRowDropTip($xeTable);
+    hideDropTip($xeTable);
     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 $xeTable = this;
+    const props = $xeTable;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const {
+      mouseConfig
+    } = props;
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    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();
+            }
+          }
+          $xeTable.analyColumnWidth();
+          $xeTable.$nextTick().then(() => {
+            $xeTable.updateCellAreas();
+            $xeTable.refreshColumn(true);
+          });
+          $xeTable.dispatchEvent('column-dragend', {
+            oldColumn: dragCol,
+            newColumn: prevDragCol,
+            dragPos: prevDragPos,
+            offsetIndex: dragOffsetIndex,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }).catch(() => {});
+      }
+    }
+    hideDropTip($xeTable);
+    clearColDropOrigin($xeTable);
+    reactData.dragRow = null;
+    reactData.dragCol = null;
+    setTimeout(() => {
+      reactData.isDragColMove = false;
+    }, 500);
+  },
+  handleHeaderCellDragDragoverEvent(evnt) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    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($xeTable, evnt, null, thEl, dragPos);
+      $xeTable.dispatchEvent('column-dragover', {
+        oldColumn: dragCol,
+        targetColumn: column,
+        dragPos
+      }, evnt);
+    }
+  },
+  handleHeaderCellDragMousedownEvent(evnt, params) {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    evnt.stopPropagation();
+    const columnDragOpts = $xeTable.computeColumnDragOpts;
+    const {
+      dragStartMethod
+    } = columnDragOpts;
+    const {
+      column
+    } = params;
+    const dragEl = evnt.currentTarget;
+    const thEl = dragEl.parentElement?.parentElement;
+    reactData.isDragColMove = false;
+    clearColDropOrigin($xeTable);
+    if (dragStartMethod && !dragStartMethod(params)) {
+      thEl.draggable = false;
+      reactData.dragRow = null;
+      reactData.dragCol = null;
+      hideDropTip($xeTable);
+      return;
+    }
+    reactData.dragCol = column;
+    reactData.dragRow = null;
+    thEl.draggable = true;
+    updateColDropOrigin($xeTable, column);
+    updateColDropTipContent($xeTable, thEl);
+    $xeTable.dispatchEvent('column-dragstart', params, evnt);
+  },
+  handleHeaderCellDragMouseupEvent() {
+    const $xeTable = this;
+    const reactData = $xeTable;
+    clearColDropOrigin($xeTable);
+    hideDropTip($xeTable);
+    reactData.dragRow = null;
+    reactData.dragCol = null;
+    reactData.isDragColMove = false;
+  },
   setPendingRow(rows, status) {
     const pendingMaps = {
       ...this.pendingRowMaps
@@ -12326,8 +12622,8 @@ const Methods = {
     }
   },
   updateCellAreas() {
-    if (this.mouseConfig && this.mouseOpts.area && this.handleUpdateCellAreas) {
-      return this.handleUpdateCellAreas();
+    if (this.mouseConfig && this.mouseOpts.area && this.handleRecalculateCellAreas) {
+      return this.handleRecalculateCellAreas();
     }
     return this.$nextTick();
   },
@@ -12785,7 +13081,9 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
     fullAllDataRowIdData,
     rowOpts,
     pendingRowList,
-    pendingRowMaps
+    pendingRowMaps,
+    columnOpts,
+    isDragColMove
   } = $xeTable;
   const childrenField = treeOpts.children || treeOpts.childrenField;
   const rows = [];
@@ -12854,26 +13152,40 @@ function renderRows(h, _vm, $xeTable, fixedType, tableData, tableColumn) {
       rowChildren = row[childrenField];
       isExpandTree = rowChildren && rowChildren.length && !!treeExpandedMaps[rowid];
     }
-    rows.push(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.selectRadioRow === row,
-        'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
-        'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
-      }, rowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowClassName) ? rowClassName(params) : rowClassName : ''],
+    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.selectRadioRow === row,
+      'row--checked': checkboxOpts.highlight && $xeTable.isCheckedByCheckboxRow(row),
+      'row--pending': pendingRowList.length && !!pendingRowMaps[rowid]
+    }, rowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(rowClassName) ? rowClassName(params) : rowClassName : ''];
+    const tdVNs = tableColumn.map((column, $columnIndex) => {
+      return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
+    });
+    rows.push(columnOpts.drag ? h('transition-group', {
+      props: {
+        tag: 'tr',
+        name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`
+      },
+      class: trClass,
+      attrs: {
+        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,
+      nativeOn: trOn
+    }, tdVNs) : h('tr', {
+      class: trClass,
       attrs: {
         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,
       on: trOn
-    }, tableColumn.map((column, $columnIndex) => {
-      return renderColumn(h, _vm, $xeTable, seq, rowid, fixedType, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
-    })));
+    }, tdVNs));
     // 如果行被展开了
     if (isExpandRow) {
       const {
@@ -13337,6 +13649,173 @@ const {
   renderer: header_renderer
 } = core_.VxeUI;
 const cellType = 'header';
+const header_renderRows = (h, _vm, cols, $rowIndex) => {
+  const {
+    $parent: $xetable,
+    fixedType
+  } = _vm;
+  const {
+    $listeners: tableListeners,
+    resizable: allResizable,
+    border,
+    columnKey,
+    headerCellClassName,
+    headerCellStyle,
+    showHeaderOverflow: allColumnHeaderOverflow,
+    headerAlign: allHeaderAlign,
+    align: allAlign,
+    highlightCurrentColumn,
+    currentColumn,
+    scrollXLoad,
+    overflowX,
+    scrollbarWidth,
+    sortOpts,
+    mouseConfig,
+    columnOpts
+  } = $xetable;
+  return cols.map((column, $columnIndex) => {
+    const {
+      type,
+      showHeaderOverflow,
+      headerAlign,
+      align,
+      headerClassName,
+      editRender,
+      cellRender
+    } = column;
+    // const { enabled } = tooltipOpts
+    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().isUndefined(showHeaderOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(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 thOns = {};
+    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: cellType,
+      isHidden: fixedHiddenColumn,
+      hasFilter
+    };
+    // 虚拟滚动不支持动态高度
+    if (scrollXLoad && !hasEllipsis) {
+      showEllipsis = hasEllipsis = true;
+    }
+    if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
+      thOns.click = evnt => $xetable.triggerHeaderCellClickEvent(evnt, params);
+    }
+    if (tableListeners['header-cell-dblclick']) {
+      thOns.dblclick = evnt => $xetable.triggerHeaderCellDblclickEvent(evnt, params);
+    }
+    // 按下事件处理
+    if (mouseConfig) {
+      thOns.mousedown = evnt => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
+    }
+    // 拖拽行事件
+    if (columnOpts.drag && !column.parentId) {
+      thOns.dragstart = $xetable.handleHeaderCellDragDragstartEvent;
+      thOns.dragend = $xetable.handleHeaderCellDragDragendEvent;
+      thOns.dragover = $xetable.handleHeaderCellDragDragoverEvent;
+    }
+    return 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
+      }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
+      attrs: {
+        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,
+      on: thOns,
+      key: columnKey || columnOpts.useKey || columnOpts.drag || isColGroup ? colid : $columnIndex
+    }, [h('div', {
+      class: ['vxe-cell', {
+        'c--title': showTitle,
+        'c--tooltip': showTooltip,
+        'c--ellipsis': showEllipsis
+      }]
+    }, column.renderHeader(h, params)),
+    /**
+    * 列宽拖动
+    */
+    !fixedHiddenColumn && !isColGroup && (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('div', {
+      class: ['vxe-resizable', {
+        'is--line': !border || border === 'none'
+      }],
+      on: {
+        mousedown: evnt => _vm.resizeMousedown(evnt, params)
+      }
+    }) : null]);
+  }).concat(scrollbarWidth ? [h('th', {
+    key: `gr${$rowIndex}`,
+    class: 'vxe-header--gutter col--gutter'
+  })] : []);
+};
+function renderHeads(h, _vm, headerGroups) {
+  const {
+    $parent: $xetable
+  } = _vm;
+  const tableProps = $xetable;
+  const {
+    fixedType
+  } = _vm;
+  const {
+    headerRowClassName,
+    headerRowStyle
+  } = tableProps;
+  const {
+    isDragColMove
+  } = $xetable;
+  const columnOpts = $xetable.columnOpts;
+  return headerGroups.map((cols, $rowIndex) => {
+    const params = {
+      $table: $xetable,
+      $rowIndex,
+      fixed: fixedType,
+      type: cellType
+    };
+    if (columnOpts.drag) {
+      return h('transition-group', {
+        props: {
+          tag: 'tr',
+          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+          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
+        }
+      }, header_renderRows(h, _vm, cols, $rowIndex));
+    }
+    return 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
+    }, header_renderRows(h, _vm, cols, $rowIndex));
+  });
+}
 /* harmony default export */ var header = ({
   name: 'VxeTableHeader',
   props: {
@@ -13404,28 +13883,12 @@ const cellType = 'header';
       fixedColumn
     } = this;
     const {
-      $listeners: tableListeners,
       tId,
       isGroup,
       visibleColumn,
-      resizable: allResizable,
-      border,
-      columnKey,
-      headerRowClassName,
-      headerCellClassName,
-      headerRowStyle,
-      headerCellStyle,
       showHeaderOverflow: allColumnHeaderOverflow,
-      headerAlign: allHeaderAlign,
-      align: allAlign,
-      highlightCurrentColumn,
-      currentColumn,
       scrollXLoad,
-      overflowX,
-      scrollbarWidth,
-      sortOpts,
-      mouseConfig,
-      columnOpts
+      scrollbarWidth
     } = $xetable;
     let headerGroups = headerColumn;
     let renderColumnList = tableColumn;
@@ -13480,117 +13943,7 @@ const cellType = 'header';
      */
     h('thead', {
       ref: 'thead'
-    }, headerGroups.map((cols, $rowIndex) => {
-      return 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: cellType
-        }) : 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: cellType
-        }) : headerRowStyle : null
-      }, cols.map((column, $columnIndex) => {
-        const {
-          type,
-          showHeaderOverflow,
-          headerAlign,
-          align,
-          headerClassName,
-          editRender,
-          cellRender
-        } = column;
-        // const { enabled } = tooltipOpts
-        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().isUndefined(showHeaderOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(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 thOns = {};
-        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: cellType,
-          isHidden: fixedHiddenColumn,
-          hasFilter
-        };
-        // 虚拟滚动不支持动态高度
-        if (scrollXLoad && !hasEllipsis) {
-          showEllipsis = hasEllipsis = true;
-        }
-        if (columnOpts.isCurrent || highlightCurrentColumn || tableListeners['header-cell-click'] || sortOpts.trigger === 'cell') {
-          thOns.click = evnt => $xetable.triggerHeaderCellClickEvent(evnt, params);
-        }
-        if (tableListeners['header-cell-dblclick']) {
-          thOns.dblclick = evnt => $xetable.triggerHeaderCellDblclickEvent(evnt, params);
-        }
-        // 按下事件处理
-        if (mouseConfig) {
-          thOns.mousedown = evnt => $xetable.triggerHeaderCellMousedownEvent(evnt, params);
-        }
-        return 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
-          }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
-          attrs: {
-            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,
-          on: thOns,
-          key: columnKey || columnOpts.useKey || isColGroup ? colid : $columnIndex
-        }, [h('div', {
-          class: ['vxe-cell', {
-            'c--title': showTitle,
-            'c--tooltip': showTooltip,
-            'c--ellipsis': showEllipsis
-          }]
-        }, column.renderHeader(h, params)),
-        /**
-         * 列宽拖动
-         */
-        !fixedHiddenColumn && !isColGroup && (external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isBoolean(column.resizable) ? column.resizable : columnOpts.resizable || allResizable) ? h('div', {
-          class: ['vxe-resizable', {
-            'is--line': !border || border === 'none'
-          }],
-          on: {
-            mousedown: evnt => this.resizeMousedown(evnt, params)
-          }
-        }) : null]);
-      }).concat(scrollbarWidth ? [h('th', {
-        class: 'vxe-header--gutter col--gutter'
-      })] : []));
-    }))]),
+    }, renderHeads(h, this, headerGroups))]),
     /**
      * 其他
      */
@@ -13738,6 +14091,203 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
     }
   }
 }
+function footer_renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex) {
+  const {
+    $parent: $xetable,
+    fixedType
+  } = _vm;
+  const {
+    $listeners: tableListeners,
+    footerCellClassName,
+    footerCellStyle,
+    footerAlign: allFooterAlign,
+    mergeFooterList,
+    footerSpanMethod,
+    align: allAlign,
+    scrollXLoad,
+    columnKey,
+    columnOpts,
+    showFooterOverflow: allColumnFooterOverflow,
+    currentColumn,
+    overflowX,
+    scrollbarWidth,
+    tooltipOpts
+  } = $xetable;
+  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 || tooltipOpts.enabled;
+    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().isUndefined(showFooterOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(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,
+      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.mouseenter = evnt => {
+        if (showTitle) {
+          updateCellTitle(evnt.currentTarget, column);
+        } else if (showTooltip || showAllTip) {
+          $xetable.triggerFooterTooltipEvent(evnt, cellParams);
+        }
+      };
+    }
+    if (showTooltip || showAllTip) {
+      tfOns.mouseleave = evnt => {
+        if (showTooltip || showAllTip) {
+          $xetable.handleTargetLeaveEvent(evnt);
+        }
+      };
+    }
+    if (tableListeners['footer-cell-click']) {
+      tfOns.click = evnt => {
+        $xetable.emitEvent('footer-cell-click', Object.assign({
+          cell: evnt.currentTarget
+        }, cellParams), evnt);
+      };
+    }
+    if (tableListeners['footer-cell-dblclick']) {
+      tfOns.dblclick = evnt => {
+        $xetable.emitEvent('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 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
+      }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
+      attrs,
+      style: footerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle : null,
+      on: tfOns,
+      key: columnKey || columnOpts.useKey || columnOpts.drag ? column.id : $columnIndex
+    }, [h('div', {
+      class: ['vxe-cell', {
+        'c--title': showTitle,
+        'c--tooltip': showTooltip,
+        'c--ellipsis': showEllipsis
+      }]
+    }, column.renderFooter(h, cellParams))]);
+  }).concat(scrollbarWidth ? [h('td', {
+    key: `gr${$rowIndex}`,
+    class: 'vxe-footer--gutter col--gutter'
+  })] : []);
+}
+function footer_renderHeads(h, _vm, footerTableData) {
+  const {
+    $parent: $xetable,
+    fixedType,
+    tableColumn
+  } = _vm;
+  const {
+    footerRowClassName,
+    footerRowStyle,
+    isDragColMove
+  } = $xetable;
+  const columnOpts = $xetable.columnOpts;
+  return footerTableData.map((row, $rowIndex) => {
+    const _rowIndex = $rowIndex;
+    const rowParams = {
+      $table: $xetable,
+      row,
+      _rowIndex,
+      $rowIndex,
+      fixed: fixedType,
+      type: footer_renderType
+    };
+    if (columnOpts.drag) {
+      return h('transition-group', {
+        props: {
+          tag: 'tr',
+          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
+          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
+        }
+      }, footer_renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+    }
+    return 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
+    }, footer_renderRows(h, _vm, tableColumn, footerTableData, row, $rowIndex, _rowIndex));
+  });
+}
 /* harmony default export */ var footer = ({
   name: 'VxeTableFooter',
   props: {
@@ -13789,24 +14339,12 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
       footerTableData
     } = this;
     const {
-      $listeners: tableListeners,
       tId,
-      footerRowClassName,
-      footerCellClassName,
-      footerRowStyle,
-      footerCellStyle,
-      footerAlign: allFooterAlign,
       mergeFooterList,
       footerSpanMethod,
-      align: allAlign,
       scrollXLoad,
-      columnKey,
-      columnOpts,
       showFooterOverflow: allColumnFooterOverflow,
-      currentColumn,
-      overflowX,
       scrollbarWidth,
-      tooltipOpts,
       visibleColumn,
       expandColumn
     } = $xetable;
@@ -13866,155 +14404,7 @@ function mergeFooterMethod(mergeFooterList, _rowIndex, _columnIndex) {
      */
     h('tfoot', {
       ref: 'tfoot'
-    }, footerTableData.map((list, _rowIndex) => {
-      const $rowIndex = _rowIndex;
-      const rowParams = {
-        $table: $xetable,
-        row: list,
-        _rowIndex,
-        $rowIndex,
-        fixed: fixedType,
-        type: footer_renderType
-      };
-      return 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 || tooltipOpts.enabled;
-        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().isUndefined(showFooterOverflow) || external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isNull(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,
-          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.mouseenter = evnt => {
-            if (showTitle) {
-              updateCellTitle(evnt.currentTarget, column);
-            } else if (showTooltip || showAllTip) {
-              $xetable.triggerFooterTooltipEvent(evnt, cellParams);
-            }
-          };
-        }
-        if (showTooltip || showAllTip) {
-          tfOns.mouseleave = evnt => {
-            if (showTooltip || showAllTip) {
-              $xetable.handleTargetLeaveEvent(evnt);
-            }
-          };
-        }
-        if (tableListeners['footer-cell-click']) {
-          tfOns.click = evnt => {
-            $xetable.emitEvent('footer-cell-click', Object.assign({
-              cell: evnt.currentTarget
-            }, cellParams), evnt);
-          };
-        }
-        if (tableListeners['footer-cell-dblclick']) {
-          tfOns.dblclick = evnt => {
-            $xetable.emitEvent('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 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
-          }, getClass(footerClassName, cellParams), getClass(footerCellClassName, cellParams)],
-          attrs,
-          style: footerCellStyle ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerCellStyle) ? footerCellStyle(cellParams) : footerCellStyle : null,
-          on: tfOns,
-          key: columnKey || columnOpts.useKey ? column.id : $columnIndex
-        }, [h('div', {
-          class: ['vxe-cell', {
-            'c--title': showTitle,
-            'c--tooltip': showTooltip,
-            'c--ellipsis': showEllipsis
-          }]
-        }, column.renderFooter(h, cellParams))]);
-      }).concat(scrollbarWidth ? [h('td', {
-        class: 'vxe-footer--gutter col--gutter'
-      })] : []));
-    }))])]);
+    }, footer_renderHeads(h, this, footerTableData))])]);
   },
   methods: {
     /**
@@ -14241,8 +14631,12 @@ const {
   cellConfig: Object,
   // 行配置信息
   rowConfig: Object,
-  // 可拖拽配置项
+  // 已废弃，被 rowDragConfig 替换
   dragConfig: Object,
+  // 行拖拽排序配置项
+  rowDragConfig: Object,
+  // 列拖拽排序配置项
+  columnDragConfig: Object,
   // 列调整配置项
   resizableConfig: Object,
   // 序号配置项
@@ -17610,7 +18004,7 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
               }
               this.closeTooltip();
               if (actived.column) {
-                this.clearEdit(evnt);
+                this.handleClearEdit(evnt);
               }
               type = 'edit-activated';
               column.renderHeight = cell.offsetHeight;
@@ -17719,17 +18113,23 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
         }
       }
     },
-    _clearActived(evnt) {
+    _clearActived(row) {
       if (true) {
         warnLog('vxe.error.delFunc', ['clearActived', 'clearEdit']);
       }
       // 即将废弃
-      return this.clearEdit(evnt);
+      return this.clearEdit(row);
     },
     /**
      * 清除激活的编辑
      */
-    _clearEdit(evnt) {
+    _clearEdit(row) {
+      return this.handleClearEdit(null, row);
+    },
+    /**
+     * 取消编辑
+     */
+    handleClearEdit(evnt, targetRow) {
       const $xeTable = this;
       const reactData = $xeTable;
       const {
@@ -17745,30 +18145,33 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
       } = actived;
       const validOpts = $xeTable.validOpts;
       if (row || column) {
-        this._syncActivedCell();
+        if (targetRow && getRowid($xeTable, targetRow) !== getRowid($xeTable, row)) {
+          return $xeTable.$nextTick();
+        }
+        $xeTable._syncActivedCell();
         actived.args = null;
         actived.row = null;
         actived.column = null;
-        this.updateFooter();
-        this.emitEvent('edit-closed', {
+        $xeTable.updateFooter();
+        $xeTable.emitEvent('edit-closed', {
           row,
-          rowIndex: this.getRowIndex(row),
-          $rowIndex: this.getVMRowIndex(row),
+          rowIndex: $xeTable.getRowIndex(row),
+          $rowIndex: $xeTable.getVMRowIndex(row),
           column,
-          columnIndex: this.getColumnIndex(column),
-          $columnIndex: this.getVMColumnIndex(column)
+          columnIndex: $xeTable.getColumnIndex(column),
+          $columnIndex: $xeTable.getVMColumnIndex(column)
         }, evnt);
       }
       focused.row = null;
       focused.column = null;
       if (validOpts.autoClear) {
         if (validOpts.msgMode !== 'full' || mixin_getConfig().cellVaildMode === 'obsolete') {
-          if (this.clearValidate) {
-            return this.clearValidate();
+          if ($xeTable.clearValidate) {
+            return $xeTable.clearValidate();
           }
         }
       }
-      return this.$nextTick();
+      return $xeTable.$nextTick();
     },
     _getActiveRecord() {
       if (true) {
@@ -17972,7 +18375,7 @@ function handleInsertRowAt(_vm, records, row, isInsertNextRow) {
       const selectMethod = () => {
         if (isMouseSelected && (selected.row !== row || selected.column !== column)) {
           if (actived.row !== row || (editOpts.mode === 'cell' ? actived.column !== column : false)) {
-            this.clearEdit(evnt);
+            this.handleClearEdit(evnt);
             this.clearSelected(evnt);
             this.clearCellAreas(evnt);
             this.clearCopyCellArea(evnt);
@@ -20911,6 +21314,7 @@ function validErrorRuleValue(rule, val) {
     },
     _saveCustom() {
       const $xeTable = this;
+      const reactData = $xeTable;
       const {
         customOpts,
         customColumnList
@@ -20946,7 +21350,10 @@ function validErrorRuleValue(rule, val) {
           column.visible = column.renderVisible;
         }
       });
-      $xeTable.closeCustom();
+      reactData.isDragColMove = true;
+      setTimeout(() => {
+        reactData.isDragColMove = false;
+      }, 1000);
       return $xeTable.saveCustomStore('confirm');
     },
     _cancelCustom() {
@@ -21265,6 +21672,54 @@ function renderEmptyBody(h, _vm) {
   }
   return emptyContent;
 }
+const renderDragTipContents = (h, $xeTable) => {
+  const props = $xeTable;
+  const reactData = $xeTable;
+  const {
+    dragConfig
+  } = props;
+  const {
+    dragRow,
+    dragCol,
+    dragTipText
+  } = reactData;
+  const columnDragOpts = $xeTable.computeColumnDragOpts;
+  const rowDragOpts = $xeTable.computeRowDragOpts;
+  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 $xeTable.callSlot(rTipSlot, {
+      row: dragRow
+    }, h);
+  }
+  if (dragCol && cTipSlot) {
+    return $xeTable.callSlot(cTipSlot, {
+      column: dragCol
+    }, h);
+  }
+  return [h('span', dragTipText)];
+};
+const renderDragTip = (h, $xeTable) => {
+  const rowOpts = $xeTable.computeRowOpts;
+  const columnOpts = $xeTable.computeColumnOpts;
+  if (rowOpts.drag || columnOpts.drag) {
+    return h('div', {
+      class: 'vxe-table--drag-wrapper'
+    }, [h('div', {
+      ref: 'refDragRowLineElem',
+      class: 'vxe-table--drag-row-line'
+    }), h('div', {
+      ref: 'refDragColLineElem',
+      class: 'vxe-table--drag-col-line'
+    }), h('div', {
+      ref: 'refDragTipElem',
+      class: 'vxe-table--drag-sort-tip'
+    }, renderDragTipContents(h, $xeTable))]);
+  }
+  return table_renderEmptyElement($xeTable);
+};
 function handleUupdateResize(_vm) {
   const {
     $el
@@ -21511,9 +21966,13 @@ function handleUupdateResize(_vm) {
         isHeader: false,
         isFooter: false
       },
+      scrollVMLoading: false,
       isDragRowMove: false,
       dragRow: null,
+      isDragColMove: false,
+      dragCol: null,
       dragTipText: '',
+      _isResize: false,
       _isLoading: false
     };
   },
@@ -21598,8 +22057,11 @@ function handleUupdateResize(_vm) {
     computeRowOpts() {
       return Object.assign({}, table_getConfig().table.rowConfig, this.rowConfig);
     },
-    computeDragOpts() {
-      return Object.assign({}, table_getConfig().table.dragConfig, this.dragConfig);
+    computeRowDragOpts() {
+      return Object.assign({}, table_getConfig().table.rowDragConfig, this.rowDragConfig);
+    },
+    computeColumnDragOpts() {
+      return Object.assign({}, table_getConfig().table.columnDragConfig, this.columnDragConfig);
     },
     resizeOpts() {
       return this.computeResizeOpts;
@@ -22068,7 +22530,7 @@ function handleUupdateResize(_vm) {
       if (this.rowOpts.height && !this.showOverflow) {
         warnLog('vxe.error.notProp', ['table.show-overflow']);
       }
-      if (!this.handleUpdateCellAreas) {
+      if (!this.handleRecalculateCellAreas) {
         if (this.clipConfig) {
           warnLog('vxe.error.notProp', ['clip-config']);
         }
@@ -22080,6 +22542,9 @@ function handleUupdateResize(_vm) {
           return;
         }
       }
+      if (this.dragConfig) {
+        warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);
+      }
       if (this.treeConfig && treeOpts.children) {
         warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);
       }
@@ -22268,7 +22733,6 @@ function handleUupdateResize(_vm) {
     const VxeUILoadingComponent = core_.VxeUI.getComponent('VxeLoading');
     const VxeUITooltipComponent = core_.VxeUI.getComponent('VxeTooltip');
     const $xeTable = this;
-    const reactData = $xeTable;
     const {
       _e,
       $scopedSlots,
@@ -22287,6 +22751,7 @@ function handleUupdateResize(_vm) {
       treeConfig,
       mouseConfig,
       mouseOpts,
+      areaOpts,
       computeSize,
       validOpts,
       showFooter,
@@ -22313,28 +22778,25 @@ function handleUupdateResize(_vm) {
       loadingOpts,
       editRules
     } = $xeTable;
-    const {
-      dragRow,
-      dragTipText
-    } = reactData;
     const {
       leftList,
       rightList
     } = columnStore;
     const currLoading = this._isLoading || loading;
     const vSize = computeSize;
-    const dragOpts = $xeTable.computeDragOpts;
     const virtualScrollBars = $xeTable.computeVirtualScrollBars;
-    const dragSlots = dragOpts.slots || {};
-    const rowTipSlot = dragSlots.rowTip;
+    const isArea = mouseConfig && mouseOpts.area;
     return h('div', {
+      ref: 'refElem',
       class: ['vxe-table', 'vxe-table--render-default', `tid_${tId}`, vSize ? `size--${vSize}` : '', `border--${tableBorder}`, {
         [`valid-msg--${validOpts.msgMode}`]: !!editRules,
         'vxe-editable': !!editConfig,
         '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,
@@ -22529,14 +22991,9 @@ function handleUupdateResize(_vm) {
       }
     }) : _e(),
     /**
-       * 拖拽提示
-       */
-    rowOpts.drag && (dragRow || dragTipText) ? h('div', {
-      ref: 'refRowDragTipElem',
-      class: 'vxe-table--row-drag-tip'
-    }, rowTipSlot ? dragRow ? this.callSlot(rowTipSlot, {
-      row: dragRow
-    }, h) : [table_renderEmptyElement($xeTable)] : dragTipText ? [h('span', dragTipText)] : [table_renderEmptyElement($xeTable)]) : _e(), h('div', {}, [
+     * 拖拽提示
+     */
+    renderDragTip(h, this), h('div', {}, [
     /**
      * 提示相关
      */