vxe-table 3.16.0-beta.1 → 3.16.0-beta.2

package/lib/index.umd.js

@@ -2002,7 +2002,7 @@ function getClass(property, params) {
 ;// CONCATENATED MODULE: ./packages/ui/index.ts
 
 
-const version = "3.16.0-beta.1";
+const version = "3.16.0-beta.2";
 core_.VxeUI.version = version;
 core_.VxeUI.tableVersion = version;
 core_.VxeUI.setConfig({
@@ -2253,6 +2253,7 @@ core_.VxeUI.setConfig({
     proxyConfig: {
       enabled: true,
       autoLoad: true,
+      showLoading: true,
       showResponseMsg: true,
       showActiveMsg: true,
       response: {
@@ -2666,7 +2667,7 @@ function isNodeElement(elem) {
 const {
   log: log_log
 } = core_.VxeUI;
-const log_version = `table v${"3.16.0-beta.1"}`;
+const log_version = `table v${"3.16.0-beta.2"}`;
 const warnLog = log_log.create('warn', log_version);
 const errLog = log_log.create('error', log_version);
 ;// CONCATENATED MODULE: ./packages/table/src/columnInfo.ts
@@ -2729,6 +2730,11 @@ class ColumnInfo {
         }
       }
     }
+    if (_vm.aggFunc) {
+      if (!$xeTable.handlePivotTableAggregateData && _vm.aggFunc !== true) {
+        errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true']);
+      }
+    }
     Object.assign(this, {
       // 基本属性
       type: _vm.type,
@@ -5155,6 +5161,53 @@ if (core_.VxeUI.dynamicApp) {
 core_.VxeUI.component(group);
 const Colgroup = VxeColgroup;
 /* harmony default export */ var colgroup = ((/* unused pure expression or super */ null && (VxeColgroup)));
+;// CONCATENATED MODULE: ./packages/table/src/anime.ts
+
+
+const rowMoveCls = 'row--drag-move';
+const colMoveClass = 'col--drag-move';
+/**
+ * 上下拖拽
+ */
+function moveRowAnimateToTb(elemList, offsetTop) {
+  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`;
+  });
+  requestAnimationFrame(() => {
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+      addClass(trEl, rowMoveCls);
+      trEl.style.transform = '';
+    });
+  });
+}
+function clearRowAnimate(elem) {
+  setTimeout(() => {
+    if (elem) {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
+    }
+  }, 500);
+}
+/**
+ * 左右拖拽
+ */
+function moveColAnimateToLr(elemList, offsetLeft) {
+  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`;
+  });
+  requestAnimationFrame(() => {
+    external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass);
+      trEl.style.transform = '';
+    });
+  });
+}
+function clearColAnimate(elem) {
+  setTimeout(() => {
+    if (elem) {
+      external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
+    }
+  }, 500);
+}
 ;// CONCATENATED MODULE: ./packages/table/src/methods.ts
 
 
@@ -5165,6 +5218,7 @@ const Colgroup = VxeColgroup;
 
 
 
+
 const {
   getConfig: methods_getConfig,
   getI18n: methods_getI18n,
@@ -5666,7 +5720,7 @@ function handleVirtualTreeExpand($xeTable, rows, expanded) {
     updateAfterDataIndex($xeTable);
     return $xeTable.$nextTick();
   }).then(() => {
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   }).then(() => {
     setTimeout(() => {
       $xeTable.updateCellAreas();
@@ -5751,7 +5805,7 @@ function handleRowGroupVirtualExpand($xeTable, rows, expanded) {
     updateAfterDataIndex($xeTable);
     return $xeTable.$nextTick();
   }).then(() => {
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   }).then(() => {
     setTimeout(() => {
       $xeTable.updateCellAreas();
@@ -7871,8 +7925,6 @@ function clearDragStatus($xeTable) {
     hideDropTip($xeTable);
     reactData.dragRow = null;
     reactData.dragCol = null;
-    reactData.isDragColMove = false;
-    reactData.isDragRowMove = false;
   }
 }
 function clearRowDropOrigin($xeTable) {
@@ -8254,7 +8306,7 @@ function calcScrollbar($xeTable) {
     $xeTable.checkScrolling();
   }
 }
-function handleRecalculateLayout($xeTable, reFull) {
+function handleRecalculateStyle($xeTable, reFull, reWidth, reHeight) {
   const internalData = $xeTable;
   const el = $xeTable.$refs.refElem;
   internalData.rceRunTime = Date.now();
@@ -8269,19 +8321,28 @@ function handleRecalculateLayout($xeTable, reFull) {
     calcVarRowHeightConfig($xeTable, 'small', smallEl);
     calcVarRowHeightConfig($xeTable, 'mini', miniEl);
   }
-  calcCellWidth($xeTable);
-  autoCellWidth($xeTable);
+  if (reWidth) {
+    calcCellWidth($xeTable);
+  }
+  if (reFull) {
+    autoCellWidth($xeTable);
+  }
   calcScrollbar($xeTable);
   updateStyle($xeTable);
   updateRowExpandStyle($xeTable);
   return computeScrollLoad($xeTable).then(() => {
     // 初始化时需要在列计算之后再执行优化运算，达到最优显示效果
-    calcCellWidth($xeTable);
+    if (reWidth) {
+      calcCellWidth($xeTable);
+    }
     if (reFull) {
       autoCellWidth($xeTable);
     }
-    calcScrollbar($xeTable);
+    if (reHeight) {
+      calcCellHeight($xeTable);
+    }
     updateStyle($xeTable);
+    calcScrollbar($xeTable);
     if (reFull) {
       updateRowOffsetTop($xeTable);
     }
@@ -8291,6 +8352,38 @@ function handleRecalculateLayout($xeTable, reFull) {
     }
   });
 }
+function handleLazyRecalculate($xeTable, reFull, reWidth, reHeight) {
+  const internalData = $xeTable;
+  return new Promise(resolve => {
+    const {
+      rceTimeout,
+      rceRunTime
+    } = internalData;
+    const resizeOpts = $xeTable.computeResizeOpts;
+    const refreshDelay = resizeOpts.refreshDelay || 20;
+    const el = $xeTable.$refs.refElem;
+    if (el && el.clientWidth) {
+      autoCellWidth($xeTable);
+      updateRowExpandStyle($xeTable);
+    }
+    if (rceTimeout) {
+      clearTimeout(rceTimeout);
+      if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
+        resolve(handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight));
+      } else {
+        $xeTable.$nextTick(() => {
+          resolve();
+        });
+      }
+    } else {
+      resolve(handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight));
+    }
+    internalData.rceTimeout = setTimeout(() => {
+      internalData.rceTimeout = undefined;
+      handleRecalculateStyle($xeTable, !!reFull, reWidth, reHeight);
+    }, refreshDelay);
+  });
+}
 function handleUpdateAggValues($xeTable) {
   const reactData = $xeTable;
   const internalData = $xeTable;
@@ -8550,8 +8643,6 @@ function loadTableData($xeTable, datas, isReset) {
   internalData.removeRowMaps = {};
   reactData.removeRowFlag++;
   const sYLoad = updateScrollYStatus($xeTable, fullData);
-  reactData.isDragColMove = false;
-  reactData.isDragRowMove = false;
   // 全量数据
   internalData.tableFullData = fullData;
   internalData.tableFullTreeData = isRGroup ? [] : treeData;
@@ -8611,10 +8702,10 @@ function loadTableData($xeTable, datas, isReset) {
     handleReserveStatus($xeTable);
     $xeTable.checkSelectionStatus();
     return new Promise(resolve => {
-      $xeTable.$nextTick().then(() => handleRecalculateLayout($xeTable, false)).then(() => {
+      $xeTable.$nextTick().then(() => handleRecalculateStyle($xeTable, false, false, false)).then(() => {
         calcCellHeight($xeTable);
         updateRowOffsetTop($xeTable);
-        return handleRecalculateLayout($xeTable, false);
+        return handleRecalculateStyle($xeTable, false, false, false);
       }).then(() => {
         let targetScrollLeft = lastScrollLeft;
         let targetScrollTop = lastScrollTop;
@@ -8628,7 +8719,7 @@ function loadTableData($xeTable, datas, isReset) {
           targetScrollTop = 0;
         }
         reactData.isRowLoading = false;
-        handleRecalculateLayout($xeTable, false);
+        handleRecalculateStyle($xeTable, false, false, false);
         // 是否变更虚拟滚动
         if (oldScrollYLoad === sYLoad) {
           restoreScrollLocation($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -8905,7 +8996,6 @@ function handleColumn($xeTable, collectColumn) {
   const tableFullColumn = getColumnList(collectColumn);
   internalData.tableFullColumn = tableFullColumn;
   reactData.isColLoading = true;
-  reactData.isDragColMove = false;
   initColumnSort($xeTable);
   return Promise.resolve(restoreCustomStorage($xeTable)).then(() => {
     const {
@@ -9461,10 +9551,10 @@ const Methods = {
       }
     }).then(() => {
       $xeTable.updateCellAreas();
-      return $xeTable.recalculate(true);
+      return handleLazyRecalculate($xeTable, true, true, true);
     }).then(() => {
       // 存在滚动行为未结束情况
-      setTimeout(() => $xeTable.recalculate(), 50);
+      setTimeout(() => handleLazyRecalculate($xeTable, false, true, true), 50);
     });
   },
   handleTableData(force) {
@@ -9523,7 +9613,7 @@ const Methods = {
       if (!initStatus) {
         handleLoadDefaults($xeTable);
       }
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -9538,7 +9628,7 @@ const Methods = {
       return loadTableData($xeTable, datas, true);
     }).then(() => {
       handleLoadDefaults($xeTable);
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -10133,7 +10223,7 @@ const Methods = {
       }
       return $xeTable.$nextTick().then(() => {
         $xeTable.updateCellAreas();
-        return $xeTable.recalculate();
+        return handleLazyRecalculate($xeTable, false, true, true);
       });
     }
     return $xeTable.reloadData(tableSourceData);
@@ -11140,7 +11230,7 @@ const Methods = {
     return parseColumns($xeTable, true).then(() => {
       return this.refreshScroll();
     }).then(() => {
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -11750,36 +11840,8 @@ const Methods = {
    */
   recalculate(reFull) {
     const $xeTable = this;
-    const internalData = $xeTable;
-    return new Promise(resolve => {
-      const {
-        rceTimeout,
-        rceRunTime
-      } = internalData;
-      const resizeOpts = $xeTable.computeResizeOpts;
-      const refreshDelay = resizeOpts.refreshDelay || 20;
-      const el = $xeTable.$refs.refElem;
-      if (el && el.clientWidth) {
-        autoCellWidth($xeTable);
-        updateRowExpandStyle($xeTable);
-      }
-      if (rceTimeout) {
-        clearTimeout(rceTimeout);
-        if (rceRunTime && rceRunTime + (refreshDelay - 5) < Date.now()) {
-          resolve(handleRecalculateLayout($xeTable, !!reFull));
-        } else {
-          $xeTable.$nextTick(() => {
-            resolve();
-          });
-        }
-      } else {
-        resolve(handleRecalculateLayout($xeTable, !!reFull));
-      }
-      internalData.rceTimeout = setTimeout(() => {
-        internalData.rceTimeout = undefined;
-        handleRecalculateLayout($xeTable, !!reFull);
-      }, refreshDelay);
-    });
+    const isForce = !!reFull;
+    return handleLazyRecalculate($xeTable, isForce, isForce, isForce);
   },
   updateStyle() {
     const $xeTable = this;
@@ -12453,9 +12515,11 @@ const Methods = {
     }
   },
   handleGlobalResizeEvent() {
-    this.closeMenu();
-    this.updateCellAreas();
-    this.recalculate(true);
+    const $xeTable = this;
+    $xeTable.closeMenu();
+    $xeTable.updateCellAreas();
+    handleLazyRecalculate($xeTable, true, true, true);
+    $xeTable.updateCellAreas();
   },
   /**
    * 处理合并
@@ -13155,7 +13219,8 @@ const Methods = {
         const childList = vals[2];
         let sLen = 0; // 已选
         let hLen = 0; // 半选
-        let vLen = 0; // 有效行
+        let vLen = 0; // 有效子行
+        const cLen = childList.length; // 有效子行
         childList.forEach(checkMethod ? item => {
           const childRowid = handleGetRowId(item);
           const isSelect = checkField ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().get(item, checkField) : selectCheckboxMaps[childRowid];
@@ -13186,18 +13251,25 @@ const Methods = {
           }
           vLen++;
         });
-        let isSelected = sLen >= vLen && (vLen >= 1 || hLen >= 1);
-        if (checkMethod) {
-          if (checkMethod({
-            $table: $xeTable,
-            row
-          })) {
-            isSelected = sLen >= vLen;
+        let isSelected = false;
+        if (cLen > 0) {
+          if (vLen > 0) {
+            isSelected = (sLen > 0 || hLen > 0) && sLen >= vLen;
           } else {
-            isSelected = selectCheckboxMaps[rowid];
+            // 如果存在子项禁用
+            if (sLen > 0 && sLen >= vLen) {
+              isSelected = true;
+            } else if (selectCheckboxMaps[rowid]) {
+              isSelected = true;
+            } else {
+              isSelected = false;
+            }
           }
+        } else {
+          // 如果无子项
+          isSelected = selectCheckboxMaps[rowid];
         }
-        const halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
+        const halfSelect = !isSelected && (sLen > 0 || hLen > 0);
         if (checkField) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().set(row, checkField, isSelected);
         }
@@ -13255,7 +13327,9 @@ const Methods = {
       handleGetRowId
     } = createHandleGetRowId($xeTable);
     let sLen = 0; // 已选
+    let dsLen = 0; // 禁用的已选
     let hLen = 0; // 半选
+    let dhLen = 0; // 禁用的半选
     let vLen = 0; // 有效行
     const rootList = treeConfig ? afterTreeFullData : isRowGroupStatus ? afterGroupFullData : afterFullData;
     rootList.forEach(checkMethod ? row => {
@@ -13273,9 +13347,9 @@ const Methods = {
         vLen++;
       } else {
         if (selected) {
-          sLen++;
+          dsLen++;
         } else if (treeIndeterminateRowMaps[childRowid]) {
-          hLen++;
+          dhLen++;
         }
       }
     } : row => {
@@ -13289,7 +13363,7 @@ const Methods = {
       vLen++;
     });
     const isSelected = rootList.length > 0 ? vLen > 0 ? sLen >= vLen : sLen >= rootList.length : false;
-    let halfSelect = !isSelected && (sLen >= 1 || hLen >= 1);
+    let halfSelect = !isSelected && (sLen > 0 || hLen > 0 || dsLen > 0 || dhLen > 0);
     // 如果复选框启用保留记录，当保留数据存在时显示半选
     if (!isSelected && !halfSelect && showReserveStatus) {
       halfSelect = !external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isEmpty(checkboxReserveRowMap);
@@ -14231,6 +14305,7 @@ const Methods = {
       fullAllDataRowIdData
     } = internalData;
     const {
+      animation,
       isPeerDrag,
       isCrossDrag,
       isSelfToChildDrag,
@@ -14238,6 +14313,9 @@ const Methods = {
       dragToChildMethod
     } = rowDragOpts;
     const treeOpts = $xeTable.computeTreeOpts;
+    const cellOpts = $xeTable.computeCellOpts;
+    const rowOpts = $xeTable.computeRowOpts;
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const {
       transform,
       rowField,
@@ -14247,80 +14325,71 @@ const Methods = {
     const childrenField = treeOpts.children || treeOpts.childrenField;
     const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null);
     const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+    const el = $xeTable.$refs.refElem;
     const errRest = {
       status: false
     };
-    if (prevDragRow && dragRow) {
-      // 判断是否有拖动
-      if (prevDragRow !== dragRow) {
-        const dragParams = {
-          oldRow: dragRow,
-          newRow: prevDragRow,
-          dragRow,
-          dragPos: prevDragPos,
-          dragToChild: !!prevDragToChild,
-          offsetIndex: dragOffsetIndex
-        };
-        const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
-        return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then(status => {
-          if (!status) {
-            return errRest;
+    if (!(el && prevDragRow && dragRow)) {
+      return Promise.resolve(errRest);
+    }
+    // 判断是否有拖动
+    if (prevDragRow !== dragRow) {
+      const dragParams = {
+        oldRow: dragRow,
+        newRow: prevDragRow,
+        dragRow,
+        dragPos: prevDragPos,
+        dragToChild: !!prevDragToChild,
+        offsetIndex: dragOffsetIndex
+      };
+      const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+      return Promise.resolve(dEndMethod ? dEndMethod(dragParams) : true).then(status => {
+        if (!status) {
+          return errRest;
+        }
+        const dragRowid = getRowid($xeTable, dragRow);
+        const dragRowRest = fullAllDataRowIdData[dragRowid] || {};
+        const _dragRowIndex = dragRowRest._index;
+        let dragRowHeight = 0;
+        let dragOffsetTop = -1;
+        if (animation) {
+          dragRowHeight = getCellRestHeight(dragRowRest, cellOpts, rowOpts, defaultRowHeight);
+          const oldTrEl = el.querySelector(`.vxe-body--row[rowid="${dragRowid}"]`);
+          if (oldTrEl) {
+            dragOffsetTop = oldTrEl.offsetTop;
           }
-          let oafIndex = -1;
-          let nafIndex = -1;
-          // 如果为树结构
-          if (treeConfig) {
-            if (transform) {
-              // 移出源位置
-              const oldRowid = getRowid($xeTable, dragRow);
-              const oldRest = fullAllDataRowIdData[oldRowid];
-              const newRowid = getRowid($xeTable, prevDragRow);
-              const newRest = fullAllDataRowIdData[newRowid];
-              if (oldRest && newRest) {
-                const {
-                  level: oldLevel
-                } = oldRest;
-                const {
-                  level: newLevel
-                } = newRest;
-                const oldAllMaps = {};
-                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragRow], item => {
-                  oldAllMaps[getRowid($xeTable, item)] = item;
-                }, {
-                  children: mapChildrenField
-                });
-                let isSelfToChildStatus = false;
-                if (oldLevel && newLevel) {
-                  // 子到子
-                  if (isPeerDrag && !isCrossDrag) {
-                    if (oldRest.row[parentField] !== newRest.row[parentField]) {
-                      // 非同级
-                      return errRest;
-                    }
-                  } else {
-                    if (!isCrossDrag) {
-                      return errRest;
-                    }
-                    if (oldAllMaps[newRowid]) {
-                      isSelfToChildStatus = true;
-                      if (!(isCrossDrag && isSelfToChildDrag)) {
-                        if (core_.VxeUI.modal) {
-                          core_.VxeUI.modal.message({
-                            status: 'error',
-                            content: methods_getI18n('vxe.error.treeDragChild')
-                          });
-                        }
-                        return errRest;
-                      }
-                    }
-                  }
-                } else if (oldLevel) {
-                  // 子到根
-                  if (!isCrossDrag) {
+        }
+        let oafIndex = -1;
+        let nafIndex = -1;
+        // 如果为树结构
+        if (treeConfig) {
+          if (transform) {
+            // 移出源位置
+            const oldRest = dragRowRest;
+            const newRowid = getRowid($xeTable, prevDragRow);
+            const newRest = fullAllDataRowIdData[newRowid];
+            if (oldRest && newRest) {
+              const {
+                level: oldLevel
+              } = oldRest;
+              const {
+                level: newLevel
+              } = newRest;
+              const oldAllMaps = {};
+              external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragRow], item => {
+                oldAllMaps[getRowid($xeTable, item)] = item;
+              }, {
+                children: mapChildrenField
+              });
+              let isSelfToChildStatus = false;
+              if (oldLevel && newLevel) {
+                // 子到子
+                if (isPeerDrag && !isCrossDrag) {
+                  if (oldRest.row[parentField] !== newRest.row[parentField]) {
+                    // 非同级
                     return errRest;
                   }
-                } else if (newLevel) {
-                  // 根到子
+                } else {
                   if (!isCrossDrag) {
                     return errRest;
                   }
@@ -14336,87 +14405,156 @@ const Methods = {
                       return errRest;
                     }
                   }
-                } else {
-                  // 根到根
                 }
-                const fullList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toTreeArray(internalData.afterTreeFullData, {
-                  key: rowField,
-                  parentKey: parentField,
-                  children: mapChildrenField
-                });
-                // 移出
-                const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
-                fullList.splice(otfIndex, 1);
-                // 插入
-                const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow);
-                const ntfIndex = ptfIndex + dragOffsetIndex;
-                fullList.splice(ntfIndex, 0, dragRow);
-                // 改变层级
-                if (isSelfToChildStatus && isCrossDrag && isSelfToChildDrag) {
-                  external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(dragRow[childrenField], childRow => {
-                    childRow[parentField] = dragRow[parentField];
-                  });
+              } else if (oldLevel) {
+                // 子到根
+                if (!isCrossDrag) {
+                  return errRest;
+                }
+              } else if (newLevel) {
+                // 根到子
+                if (!isCrossDrag) {
+                  return errRest;
+                }
+                if (oldAllMaps[newRowid]) {
+                  isSelfToChildStatus = true;
+                  if (!(isCrossDrag && isSelfToChildDrag)) {
+                    if (core_.VxeUI.modal) {
+                      core_.VxeUI.modal.message({
+                        status: 'error',
+                        content: methods_getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return errRest;
+                  }
                 }
-                dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
-                internalData.tableFullTreeData = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toArrayTree(fullList, {
-                  key: rowField,
-                  parentKey: parentField,
-                  children: childrenField,
-                  mapChildren: mapChildrenField
+              } else {
+                // 根到根
+              }
+              const fullList = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toTreeArray(internalData.afterTreeFullData, {
+                key: rowField,
+                parentKey: parentField,
+                children: mapChildrenField
+              });
+              // 移出
+              const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow);
+              fullList.splice(otfIndex, 1);
+              // 插入
+              const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow);
+              const ntfIndex = ptfIndex + dragOffsetIndex;
+              fullList.splice(ntfIndex, 0, dragRow);
+              // 改变层级
+              if (isSelfToChildStatus && isCrossDrag && isSelfToChildDrag) {
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(dragRow[childrenField], childRow => {
+                  childRow[parentField] = dragRow[parentField];
                 });
               }
+              dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
+              internalData.tableFullTreeData = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().toArrayTree(fullList, {
+                key: rowField,
+                parentKey: parentField,
+                children: childrenField,
+                mapChildren: mapChildrenField
+              });
             }
-          } else {
-            // 移出
-            oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
-            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;
-            const ntfIndex = ptfIndex + dragOffsetIndex;
-            afterFullData.splice(nafIndex, 0, dragRow);
-            tableFullData.splice(ntfIndex, 0, dragRow);
-          }
-          reactData.isDragRowMove = true;
-          $xeTable.handleTableData(treeConfig && transform);
-          $xeTable.cacheRowMap(false);
-          updateScrollYStatus($xeTable);
-          if (!(treeConfig && transform)) {
-            updateAfterDataIndex($xeTable);
-          }
-          $xeTable.checkSelectionStatus();
-          if (reactData.scrollYLoad) {
-            $xeTable.updateScrollYSpace();
           }
-          if (evnt) {
-            $xeTable.dispatchEvent('row-dragend', {
-              oldRow: dragRow,
-              newRow: prevDragRow,
-              dragRow,
-              dragPos: prevDragPos,
-              dragToChild: isDragToChildFlag,
-              offsetIndex: dragOffsetIndex,
-              _index: {
-                newIndex: nafIndex,
-                oldIndex: oafIndex
+        } else {
+          // 移出
+          oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow);
+          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;
+          const ntfIndex = ptfIndex + dragOffsetIndex;
+          afterFullData.splice(nafIndex, 0, dragRow);
+          tableFullData.splice(ntfIndex, 0, dragRow);
+        }
+        $xeTable.handleTableData(treeConfig && transform);
+        $xeTable.cacheRowMap(false);
+        updateScrollYStatus($xeTable);
+        if (!(treeConfig && transform)) {
+          updateAfterDataIndex($xeTable);
+        }
+        $xeTable.checkSelectionStatus();
+        if (reactData.scrollYLoad) {
+          $xeTable.updateScrollYSpace();
+        }
+        if (evnt) {
+          $xeTable.dispatchEvent('row-dragend', {
+            oldRow: dragRow,
+            newRow: prevDragRow,
+            dragRow,
+            dragPos: prevDragPos,
+            dragToChild: isDragToChildFlag,
+            offsetIndex: dragOffsetIndex,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }
+        return $xeTable.$nextTick().then(() => {
+          if (animation) {
+            const {
+              tableData
+            } = reactData;
+            const dragRowRest = fullAllDataRowIdData[dragRowid];
+            const _newRowIndex = dragRowRest._index;
+            const firstRow = tableData[0];
+            const firstRowRest = fullAllDataRowIdData[getRowid($xeTable, firstRow)];
+            if (firstRowRest) {
+              const _firstRowIndex = firstRowRest._index;
+              const _lastRowIndex = _firstRowIndex + tableData.length;
+              let rsIndex = -1;
+              let reIndex = -1;
+              let offsetRate = 1;
+              if (_dragRowIndex < _firstRowIndex) {
+                // 从上往下虚拟拖拽
+                rsIndex = 0;
+                reIndex = _newRowIndex - _firstRowIndex;
+              } else if (_dragRowIndex > _lastRowIndex) {
+                // 从下往上虚拟拖拽
+                const $newRowIndex = dragRowRest.$index;
+                rsIndex = $newRowIndex + 1;
+                reIndex = tableData.length;
+                offsetRate = -1;
+              } else {
+                if (_newRowIndex > _dragRowIndex) {
+                  // 从上往下拖拽
+                  rsIndex = _dragRowIndex - _firstRowIndex;
+                  reIndex = rsIndex + _newRowIndex - _dragRowIndex;
+                } else {
+                  // 从下往上拖拽
+                  rsIndex = _newRowIndex - _firstRowIndex;
+                  reIndex = rsIndex + _dragRowIndex - _newRowIndex + 1;
+                  offsetRate = -1;
+                }
               }
-            }, evnt);
+              const dragRangeList = tableData.slice(rsIndex, reIndex);
+              if (dragRangeList.length) {
+                const dtTrList = el.querySelectorAll(dragRangeList.map(row => `.vxe-body--row[rowid="${getRowid($xeTable, row)}"]`).join(','));
+                moveRowAnimateToTb(dtTrList, offsetRate * dragRowHeight);
+              }
+            }
+            const newTrList = el.querySelectorAll(`.vxe-body--row[rowid="${dragRowid}"]`);
+            const newTrEl = newTrList[0];
+            if (dragOffsetTop > -1 && newTrEl) {
+              moveRowAnimateToTb(newTrList, dragOffsetTop - newTrEl.offsetTop);
+            }
           }
-          return $xeTable.$nextTick().then(() => {
-            $xeTable.updateCellAreas();
-            $xeTable.recalculate();
-          }).then(() => {
-            return {
-              status: true
-            };
-          });
-        }).catch(() => {
-          return errRest;
+          $xeTable.updateCellAreas();
+          $xeTable.recalculate();
+        }).then(() => {
+          return {
+            status: true
+          };
         });
-      }
+      }).catch(() => {
+        return errRest;
+      });
     }
     return Promise.resolve(errRest);
   },
@@ -14444,6 +14582,7 @@ const Methods = {
       prevDragRow,
       prevDragPos
     } = internalData;
+    const el = $xeTable.$refs.refElem;
     if (treeConfig && lazy && prevDragToChild) {
       // 懒加载
       const newRowid = getRowid($xeTable, prevDragRow);
@@ -14460,18 +14599,16 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
+    clearRowAnimate(el);
     internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
-    setTimeout(() => {
-      reactData.isDragRowMove = false;
-    }, 500);
   },
   handleRowDragDragoverEvent(evnt) {
     const $xeTable = this;
     const props = $xeTable;
-    const internalData = $xeTable;
     const reactData = $xeTable;
+    const internalData = $xeTable;
     const {
       treeConfig
     } = props;
@@ -14547,7 +14684,6 @@ const Methods = {
     const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : dragEl.parentElement?.parentElement;
     const trEl = tdEl.parentElement;
     const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
-    reactData.isDragRowMove = false;
     clearRowDropOrigin($xeTable);
     if (dStartMethod && !dStartMethod(params)) {
       trEl.draggable = false;
@@ -14578,7 +14714,7 @@ const Methods = {
   handleColDragSwapColumn() {
     const $xeTable = this;
     handleUpdateColumn($xeTable);
-    parseColumns($xeTable, false).then(() => {
+    return parseColumns($xeTable, false).then(() => {
       $xeTable.updateCellAreas();
       $xeTable.saveCustomStore('update:sort');
     });
@@ -14593,6 +14729,7 @@ const Methods = {
     } = props;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
+      animation,
       isPeerDrag,
       isCrossDrag,
       isSelfToChildDrag,
@@ -14601,68 +14738,73 @@ const Methods = {
       dragToChildMethod
     } = columnDragOpts;
     const {
-      collectColumn
+      collectColumn,
+      fullColumnIdData
     } = internalData;
+    const el = $xeTable.$refs.refElem;
     const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0;
     const errRest = {
       status: false
     };
-    if (prevDragCol && dragCol) {
-      // 判断是否有拖动
-      if (prevDragCol !== dragCol) {
-        const dragColumn = dragCol;
-        const newColumn = prevDragCol;
-        const dragParams = {
-          oldColumn: dragColumn,
-          newColumn,
-          dragColumn,
-          dragPos: prevDragPos,
-          dragToChild: !!prevDragToChild,
-          offsetIndex: dragOffsetIndex
-        };
-        const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
-        return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then(status => {
-          if (!status) {
-            return errRest;
-          }
-          let oafIndex = -1;
-          let nafIndex = -1;
-          const oldAllMaps = {};
+    if (!(el && prevDragCol && dragCol)) {
+      return Promise.resolve(errRest);
+    }
+    // 判断是否有拖动
+    if (prevDragCol !== dragCol) {
+      const dragColumn = dragCol;
+      const newColumn = prevDragCol;
+      const dragParams = {
+        oldColumn: dragColumn,
+        newColumn,
+        dragColumn,
+        dragPos: prevDragPos,
+        dragToChild: !!prevDragToChild,
+        offsetIndex: dragOffsetIndex
+      };
+      const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+      return Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then(status => {
+        if (!status) {
+          return errRest;
+        }
+        let dragTargetColumn = null;
+        const dragAllTargetCols = [];
+        let dragColWidth = 0;
+        if (animation) {
           external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragColumn], column => {
-            oldAllMaps[column.id] = column;
-          });
-          let isSelfToChildStatus = false;
-          if (dragColumn.parentId && newColumn.parentId) {
-            // 子到子
-            if (isPeerDrag && !isCrossDrag) {
-              if (dragColumn.parentId !== newColumn.parentId) {
-                // 非同级
-                return errRest;
-              }
-            } else {
-              if (!isCrossDrag) {
-                return errRest;
-              }
-              if (oldAllMaps[newColumn.id]) {
-                isSelfToChildStatus = true;
-                if (!(isCrossDrag && isSelfToChildDrag)) {
-                  if (core_.VxeUI.modal) {
-                    core_.VxeUI.modal.message({
-                      status: 'error',
-                      content: methods_getI18n('vxe.error.treeDragChild')
-                    });
-                  }
-                  return errRest;
-                }
-              }
+            if (!dragTargetColumn && (!column.children || !column.children.length)) {
+              dragTargetColumn = column;
+              dragColWidth += column.renderWidth;
             }
-          } else if (dragColumn.parentId) {
-            // 子到根
-            if (!isCrossDrag) {
+            dragAllTargetCols.push(column);
+          });
+        }
+        if (!dragTargetColumn) {
+          dragTargetColumn = dragColumn;
+        }
+        const dragColRest = fullColumnIdData[dragTargetColumn.id] || {};
+        const _dragColIndex = dragColRest._index;
+        let dragOffsetLeft = -1;
+        if (animation) {
+          const oldTrEl = el.querySelector(`.vxe-table--column[colid="${dragTargetColumn.id}"]`);
+          if (oldTrEl) {
+            dragOffsetLeft = oldTrEl.offsetLeft;
+          }
+        }
+        let oafIndex = -1;
+        let nafIndex = -1;
+        const oldAllMaps = {};
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragColumn], column => {
+          oldAllMaps[column.id] = column;
+        });
+        let isSelfToChildStatus = false;
+        if (dragColumn.parentId && newColumn.parentId) {
+          // 子到子
+          if (isPeerDrag && !isCrossDrag) {
+            if (dragColumn.parentId !== newColumn.parentId) {
+              // 非同级
               return errRest;
             }
-          } else if (newColumn.parentId) {
-            // 根到子
+          } else {
             if (!isCrossDrag) {
               return errRest;
             }
@@ -14678,96 +14820,199 @@ const Methods = {
                 return errRest;
               }
             }
-          } else {
-            // 根到根
           }
-          const oldewMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === dragColumn.id);
-          // 改变层级
-          if (isSelfToChildStatus && isCrossDrag && isSelfToChildDrag) {
-            if (oldewMatchRest) {
-              const {
-                items: oCols,
-                index: oIndex
-              } = oldewMatchRest;
-              const childList = dragColumn.children || [];
-              childList.forEach(column => {
-                column.parentId = dragColumn.parentId;
-              });
-              oCols.splice(oIndex, 1, ...childList);
-              dragColumn.children = [];
-            }
-          } else {
-            if (oldewMatchRest) {
-              const {
-                items: oCols,
-                index: oIndex,
-                parent: oParent
-              } = oldewMatchRest;
-              oCols.splice(oIndex, 1);
-              if (!oParent) {
-                oafIndex = oIndex;
+        } else if (dragColumn.parentId) {
+          // 子到根
+          if (!isCrossDrag) {
+            return errRest;
+          }
+        } else if (newColumn.parentId) {
+          // 根到子
+          if (!isCrossDrag) {
+            return errRest;
+          }
+          if (oldAllMaps[newColumn.id]) {
+            isSelfToChildStatus = true;
+            if (!(isCrossDrag && isSelfToChildDrag)) {
+              if (core_.VxeUI.modal) {
+                core_.VxeUI.modal.message({
+                  status: 'error',
+                  content: methods_getI18n('vxe.error.treeDragChild')
+                });
               }
+              return errRest;
             }
           }
-          const newMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === newColumn.id);
-          if (newMatchRest) {
+        } else {
+          // 根到根
+        }
+        const oldewMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === dragColumn.id);
+        // 改变层级
+        if (isSelfToChildStatus && isCrossDrag && isSelfToChildDrag) {
+          if (oldewMatchRest) {
             const {
-              items: nCols,
-              index: nIndex,
-              parent: nParent
-            } = newMatchRest;
-            // 转子级
-            if (isCrossDrag && isToChildDrag && isDragToChildFlag) {
-              dragColumn.parentId = newColumn.id;
-              newColumn.children = (newColumn.children || []).concat([dragColumn]);
-            } else {
-              dragColumn.parentId = newColumn.parentId;
-              nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
-            }
-            if (!nParent) {
-              nafIndex = nIndex;
-            }
+              items: oCols,
+              index: oIndex
+            } = oldewMatchRest;
+            const childList = dragColumn.children || [];
+            childList.forEach(column => {
+              column.parentId = dragColumn.parentId;
+            });
+            oCols.splice(oIndex, 1, ...childList);
+            dragColumn.children = [];
           }
-          external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parentColumn) => {
-            if (!parentColumn) {
-              const sortIndex = index + 1;
-              column.renderSortNumber = sortIndex;
-            }
-          });
-          reactData.isDragColMove = true;
-          if (mouseConfig) {
-            if ($xeTable.clearSelected) {
-              $xeTable.clearSelected();
-            }
-            if ($xeTable.clearCellAreas) {
-              $xeTable.clearCellAreas();
-              $xeTable.clearCopyCellArea();
+        } else {
+          if (oldewMatchRest) {
+            const {
+              items: oCols,
+              index: oIndex,
+              parent: oParent
+            } = oldewMatchRest;
+            oCols.splice(oIndex, 1);
+            if (!oParent) {
+              oafIndex = oIndex;
             }
           }
-          if (evnt) {
-            $xeTable.dispatchEvent('column-dragend', {
-              oldColumn: dragColumn,
-              newColumn,
-              dragColumn,
-              dragPos: prevDragPos,
-              dragToChild: isDragToChildFlag,
-              offsetIndex: dragOffsetIndex,
-              _index: {
-                newIndex: nafIndex,
-                oldIndex: oafIndex
-              }
-            }, evnt);
+        }
+        const newMatchRest = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findTree(collectColumn, item => item.id === newColumn.id);
+        if (newMatchRest) {
+          const {
+            items: nCols,
+            index: nIndex,
+            parent: nParent
+          } = newMatchRest;
+          // 转子级
+          if (isCrossDrag && isToChildDrag && isDragToChildFlag) {
+            dragColumn.parentId = newColumn.id;
+            newColumn.children = (newColumn.children || []).concat([dragColumn]);
+          } else {
+            dragColumn.parentId = newColumn.parentId;
+            nCols.splice(nIndex + dragOffsetIndex, 0, dragColumn);
+          }
+          if (!nParent) {
+            nafIndex = nIndex;
+          }
+        }
+        external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree(collectColumn, (column, index, items, path, parentColumn) => {
+          if (!parentColumn) {
+            const sortIndex = index + 1;
+            column.renderSortNumber = sortIndex;
+          }
+        });
+        if (mouseConfig) {
+          if ($xeTable.clearSelected) {
+            $xeTable.clearSelected();
           }
+          if ($xeTable.clearCellAreas) {
+            $xeTable.clearCellAreas();
+            $xeTable.clearCopyCellArea();
+          }
+        }
+        if (evnt) {
+          $xeTable.dispatchEvent('column-dragend', {
+            oldColumn: dragColumn,
+            newColumn,
+            dragColumn,
+            dragPos: prevDragPos,
+            dragToChild: isDragToChildFlag,
+            offsetIndex: dragOffsetIndex,
+            _index: {
+              newIndex: nafIndex,
+              oldIndex: oafIndex
+            }
+          }, evnt);
+        }
+        return $xeTable.$nextTick().then(() => {
           if (isSyncColumn) {
-            $xeTable.handleColDragSwapColumn();
+            return $xeTable.handleColDragSwapColumn();
           }
+        }).then(() => {
+          if (animation) {
+            const {
+              tableColumn
+            } = reactData;
+            const {
+              visibleColumn,
+              fullColumnIdData
+            } = internalData;
+            let dragNewColumn = null;
+            const dragNewColMaps = {};
+            external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([dragColumn], column => {
+              if (!dragNewColumn && (!column.children || !column.children.length)) {
+                dragNewColumn = column;
+              }
+              dragNewColMaps[column.id] = column;
+            });
+            if (!dragNewColumn) {
+              dragNewColumn = dragColumn;
+            }
+            if (dragColWidth && dragAllTargetCols.length) {
+              const _newColIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(visibleColumn, column => !!dragNewColumn && column.id === dragNewColumn.id);
+              const firstCol = tableColumn[0];
+              const firstColRest = fullColumnIdData[firstCol.id];
+              if (firstColRest) {
+                const _firstColIndex = firstColRest._index;
+                const _lastColIndex = _firstColIndex + tableColumn.length;
+                let csIndex = -1;
+                let ceIndex = -1;
+                let offsetRate = 1;
+                if (_dragColIndex < _firstColIndex) {
+                  // 从左往右虚拟拖拽
+                  csIndex = 0;
+                  ceIndex = _newColIndex - _firstColIndex;
+                } else if (_dragColIndex > _lastColIndex) {
+                  // 从右往左虚拟拖拽
+                  const $newRowIndex = dragColRest.$index;
+                  csIndex = $newRowIndex + 1;
+                  ceIndex = tableColumn.length;
+                  offsetRate = -1;
+                } else {
+                  if (_newColIndex > _dragColIndex) {
+                    // 从左往右拖拽
+                    csIndex = _dragColIndex - _firstColIndex;
+                    ceIndex = csIndex + _newColIndex - _dragColIndex;
+                  } else {
+                    // 从右往左拖拽
+                    csIndex = _newColIndex - _firstColIndex + 1;
+                    ceIndex = csIndex + _dragColIndex - _newColIndex;
+                    offsetRate = -1;
+                  }
+                }
+                const dragRangeList = [];
+                const dragRangeMaps = {};
+                for (let i = csIndex; i < ceIndex; i++) {
+                  const column = tableColumn[i];
+                  if (!dragRangeMaps[column.id] && !dragNewColMaps[column.id]) {
+                    dragRangeMaps[column.id] = column;
+                    dragRangeList.push(column);
+                  }
+                }
+                external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().eachTree([newColumn], column => {
+                  if (!dragRangeMaps[column.id]) {
+                    dragRangeMaps[column.id] = column;
+                    dragRangeList.push(column);
+                  }
+                });
+                if (dragRangeList.length) {
+                  const dtTrList = el.querySelectorAll(dragRangeList.map(column => `.vxe-table--column[colid="${column.id}"]`).join(','));
+                  moveColAnimateToLr(dtTrList, offsetRate * dragColWidth);
+                }
+              }
+              const newTrList = el.querySelectorAll(dragAllTargetCols.map(column => `.vxe-table--column[colid="${column.id}"]`).join(','));
+              const newTdEl = newTrList[0];
+              if (dragOffsetLeft > -1 && newTdEl) {
+                moveColAnimateToLr(newTrList, dragOffsetLeft - newTdEl.offsetLeft);
+              }
+            }
+          }
+          loadScrollXData($xeTable);
           return {
             status: true
           };
-        }).catch(() => {
-          return errRest;
         });
-      }
+      }).catch(() => {
+        return errRest;
+      });
     }
     return Promise.resolve(errRest);
   },
@@ -14783,18 +15028,14 @@ const Methods = {
       prevDragPos,
       prevDragToChild
     } = internalData;
+    const el = $xeTable.$refs.refElem;
     $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
     hideDropTip($xeTable);
     clearColDropOrigin($xeTable);
+    clearColAnimate(el);
     internalData.prevDragToChild = false;
     reactData.dragRow = null;
     reactData.dragCol = null;
-    setTimeout(() => {
-      reactData.isDragColMove = false;
-      $xeTable.recalculate().then(() => {
-        loadScrollXData($xeTable);
-      });
-    }, 500);
   },
   handleHeaderCellDragDragoverEvent(evnt) {
     const $xeTable = this;
@@ -14882,7 +15123,6 @@ const Methods = {
     } = params;
     const dragEl = evnt.currentTarget;
     const thEl = trigger === 'cell' ? dragEl : dragEl.parentElement?.parentElement;
-    reactData.isDragColMove = false;
     clearColDropOrigin($xeTable);
     if (dragStartMethod && !dragStartMethod(params)) {
       thEl.draggable = false;
@@ -14905,7 +15145,6 @@ const Methods = {
     hideDropTip($xeTable);
     reactData.dragRow = null;
     reactData.dragCol = null;
-    reactData.isDragColMove = false;
   },
   setPendingRow(rows, status) {
     const $xeTable = this;
@@ -15490,7 +15729,7 @@ const Methods = {
       }
     }
     reactData.rowExpandedFlag++;
-    return Promise.all(lazyRests).then(() => $xeTable.$nextTick()).then(() => $xeTable.recalculate(true)).then(() => {
+    return Promise.all(lazyRests).then(() => $xeTable.$nextTick()).then(() => handleLazyRecalculate($xeTable, true, true, true)).then(() => {
       updateRowOffsetTop($xeTable);
       updateRowExpandStyle($xeTable);
       handleRowExpandScroll($xeTable);
@@ -15541,7 +15780,7 @@ const Methods = {
     }
     return $xeTable.$nextTick().then(() => {
       if (expList.length) {
-        return $xeTable.recalculate(true);
+        return handleLazyRecalculate($xeTable, true, true, true);
       }
     }).then(() => {
       updateRowOffsetTop($xeTable);
@@ -15701,7 +15940,7 @@ const Methods = {
     $xeTable.handleTableData();
     updateAfterDataIndex($xeTable);
     reactData.rowGroupExpandedFlag++;
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   },
   clearRowGroupExpand() {
     const $xeTable = this;
@@ -15712,7 +15951,7 @@ const Methods = {
     $xeTable.handleTableData();
     updateAfterDataIndex($xeTable);
     reactData.rowGroupExpandedFlag++;
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   },
   getTreeExpandRecords() {
     const $xeTable = this;
@@ -16131,8 +16370,6 @@ const Methods = {
       }
       internalData.lastScrollTop = scrollTop;
     }
-    reactData.isDragColMove = false;
-    reactData.isDragRowMove = false;
     reactData.lastScrollTime = Date.now();
     const evntParams = {
       scrollTop,
@@ -17750,7 +17987,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     }));
   }
   return h('td', {
-    class: ['vxe-body--column', colid, cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '', cellAlign ? `col--${cellAlign}` : '', type ? `col--${type}` : '', {
+    class: ['vxe-table--column vxe-body--column', colid, cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '', cellAlign ? `col--${cellAlign}` : '', type ? `col--${type}` : '', {
       'col--last': isLastColumn,
       'col--tree-node': treeNode,
       'col--edit': isEdit,
@@ -17794,7 +18031,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
   const {
     hasFixedColumn,
     treeExpandedFlag,
-    isColLoading,
     scrollXLoad,
     scrollYLoad,
     isAllOverflow,
@@ -17802,7 +18038,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     expandColumn,
     selectRadioRow,
     pendingRowFlag,
-    isDragColMove,
     rowExpandHeightFlag,
     isRowGroupStatus
   } = tableReactData;
@@ -17819,7 +18054,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
   const editOpts = $xeTable.computeEditOpts;
   const rowOpts = $xeTable.computeRowOpts;
   const columnOpts = $xeTable.computeColumnOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     transform,
     seqMode
@@ -17913,19 +18147,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const tdVNs = tableColumn.map((column, $columnIndex) => {
       return renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
     });
-    rows.push(!isColLoading && columnOpts.drag && columnDragOpts.animation ? 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 : undefined,
-      key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-      nativeOn: trOn
-    }, tdVNs) : h('tr', {
+    rows.push(h('tr', {
       class: trClass,
       attrs: {
         rowid
@@ -18106,13 +18328,11 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const {
       isGroup,
       tableData,
-      isRowLoading,
       isColLoading,
       overflowX,
       scrollXLoad,
       scrollYLoad,
       isAllOverflow,
-      isDragRowMove,
       expandColumn,
       dragRow,
       dragCol
@@ -18122,10 +18342,8 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
       fullAllDataRowIdData,
       fullColumnIdData
     } = tableInternalData;
-    const rowOpts = $xeTable.computeRowOpts;
     const emptyOpts = $xeTable.computeEmptyOpts;
     const mouseOpts = $xeTable.computeMouseOpts;
-    const rowDragOpts = $xeTable.computeRowDragOpts;
     const expandOpts = $xeTable.computeExpandOpts;
     let renderDataList = tableData;
     let renderColumnList = tableColumn;
@@ -18260,13 +18478,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     /**
      * 内容
      */
-    !(isRowLoading || isColLoading) && rowOpts.drag && rowDragOpts.animation ? h('transition-group', {
-      ref: 'refBodyTBody',
-      props: {
-        tag: 'tbody',
-        name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
-      }
-    }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList)) : h('tbody', {
+    h('tbody', {
       ref: 'refBodyTBody'
     }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))]), h('div', {
       class: 'vxe-table--checkbox-range'
@@ -18450,7 +18662,7 @@ const header_renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) =>
       tcStyle.minHeight = `${currCellHeight}px`;
     }
     return h('th', {
-      class: ['vxe-header--column', colid, {
+      class: ['vxe-table--column vxe-header--column', colid, {
         [`col--${headAlign}`]: headAlign,
         [`col--${type}`]: type,
         'col--last': isLastColumn,
@@ -18500,20 +18712,13 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
   const props = _vm;
   const $xeTable = _vm.$parent;
   const tableProps = $xeTable;
-  const tableReactData = $xeTable;
   const {
     fixedType
   } = props;
-  const columnOpts = $xeTable.computeColumnOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
   const {
     headerRowClassName,
     headerRowStyle
   } = tableProps;
-  const {
-    isColLoading,
-    isDragColMove
-  } = tableReactData;
   return headerGroups.map((cols, $rowIndex) => {
     const params = {
       $table: $xeTable,
@@ -18521,17 +18726,6 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
       fixed: fixedType,
       type: cellType
     };
-    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-      return h('transition-group', {
-        key: $rowIndex,
-        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, isGroup, isOptimizeMode, cols, $rowIndex));
-    }
     return h('tr', {
       key: $rowIndex,
       class: ['vxe-header--row', headerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''],
@@ -18947,7 +19141,7 @@ function footer_renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData,
       tcStyle.minHeight = `${currCellHeight}px`;
     }
     return h('td', {
-      class: ['vxe-footer--column', column.id, {
+      class: ['vxe-table--column vxe-footer--column', column.id, {
         [`col--${footAlign}`]: footAlign,
         [`col--${type}`]: type,
         'col--last': isLastColumn,
@@ -18992,7 +19186,6 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
   const props = _vm;
   const $xeTable = _vm.$parent;
   const tableProps = $xeTable;
-  const tableReactData = $xeTable;
   const {
     fixedType,
     footerTableData
@@ -19001,12 +19194,6 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     footerRowClassName,
     footerRowStyle
   } = tableProps;
-  const {
-    isColLoading,
-    isDragColMove
-  } = tableReactData;
-  const columnOpts = $xeTable.computeColumnOpts;
-  const columnDragOpts = $xeTable.computeColumnDragOpts;
   return footerTableData.map((row, $rowIndex) => {
     const _rowIndex = $rowIndex;
     const rowParams = {
@@ -19017,17 +19204,6 @@ function footer_renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
       fixed: fixedType,
       type: footer_renderType
     };
-    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-      return h('transition-group', {
-        key: $rowIndex,
-        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 : undefined
-        }
-      }, footer_renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
-    }
     return h('tr', {
       key: $rowIndex,
       class: ['vxe-footer--row', footerRowClassName ? external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''],
@@ -20768,7 +20944,6 @@ const renderPopupPanel = (h, $xeTableCustomPanel) => {
               nafIndex = external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().findIndexOf(customColumnList, item => item.id === newColumn.id);
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn);
             }
-            tableReactData.isDragColMove = true;
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected();
@@ -27272,10 +27447,6 @@ function emitCustomEvent($xeTable, type, evnt) {
         }
       });
       reactData.isCustomStatus = true;
-      reactData.isDragColMove = true;
-      setTimeout(() => {
-        reactData.isDragColMove = false;
-      }, 1000);
       return $xeTable.saveCustomStore('confirm').then(() => {
         if (allowGroup && allowValues && $xeTable.handlePivotTableAggregateData) {
           if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
@@ -28701,6 +28872,7 @@ function renderBody(h, $xeTable) {
       const reactData = $xeTable;
       const internalData = $xeTable;
       const {
+        tableData,
         rowExpandedFlag,
         expandColumn,
         rowGroupExpandedFlag,
@@ -28711,7 +28883,7 @@ function renderBody(h, $xeTable) {
         rowExpandedMaps
       } = internalData;
       const expandList = [];
-      if (expandColumn && rowExpandedFlag && rowGroupExpandedFlag && treeExpandedFlag) {
+      if (tableData.length && expandColumn && rowExpandedFlag && rowGroupExpandedFlag && treeExpandedFlag) {
         external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default().each(rowExpandedMaps, (row, rowid) => {
           if (visibleDataRowIdData[rowid]) {
             expandList.push(row);
@@ -29394,11 +29566,30 @@ function renderBody(h, $xeTable) {
     $xeTable.$nextTick(() => {
       if (props.loading) {
         if (!VxeUILoadingComponent && !this.$scopedSlots.loading) {
+          errLog('vxe.error.errProp', ['loading=true', 'loading=false | <template #loading>...</template>']);
           errLog('vxe.error.reqComp', ['vxe-loading']);
         }
       }
       if (props.showOverflow === true || props.showOverflow === 'tooltip' || props.showHeaderOverflow === true || props.showHeaderOverflow === 'tooltip' || props.showFooterOverflow === true || props.showFooterOverflow === 'tooltip' || props.tooltipConfig || props.editRules) {
         if (!VxeUITooltipComponent) {
+          if (props.showOverflow === true) {
+            errLog('vxe.error.errProp', ['show-overflow=true', 'show-overflow=title']);
+          }
+          if (props.showOverflow === 'tooltip') {
+            errLog('vxe.error.errProp', ['show-overflow=tooltip', 'show-overflow=title']);
+          }
+          if (props.showHeaderOverflow === true) {
+            errLog('vxe.error.errProp', ['show-header-overflow=true', 'show-header-overflow=title']);
+          }
+          if (props.showHeaderOverflow === 'tooltip') {
+            errLog('vxe.error.errProp', ['show-header-overflow=tooltip', 'show-header-overflow=title']);
+          }
+          if (props.showFooterOverflow === true) {
+            errLog('vxe.error.errProp', ['show-footer-overflow=true', 'show-footer-overflow=title']);
+          }
+          if (props.showFooterOverflow === 'tooltip') {
+            errLog('vxe.error.errProp', ['show-footer-overflow=tooltip', 'show-footer-overflow=title']);
+          }
           errLog('vxe.error.reqComp', ['vxe-tooltip']);
         }
       }
@@ -30869,18 +31060,17 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
       const {
         seqConfig,
         pagerConfig,
-        loading,
         editConfig,
         proxyConfig
       } = props;
       const {
         isZMax,
-        tableLoading,
         tablePage
       } = reactData;
       const tableExtendProps = $xeGrid.computeTableExtendProps;
       const proxyOpts = $xeGrid.computeProxyOpts;
       const pagerOpts = $xeGrid.computePagerOpts;
+      const isLoading = $xeGrid.computeIsLoading;
       const tProps = Object.assign({}, tableExtendProps);
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -30890,7 +31080,7 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
         }
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
-        tProps.loading = loading || tableLoading;
+        tProps.loading = isLoading;
         if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
           tProps.seqConfig = Object.assign({}, seqConfig, {
             startIndex: (tablePage.currentPage - 1) * tablePage.pageSize
@@ -30950,6 +31140,23 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
       const $xeGrid = this;
       const pagerOpts = $xeGrid.computePagerOpts;
       return pagerOpts.total;
+    },
+    computeIsLoading() {
+      const $xeGrid = this;
+      const props = $xeGrid;
+      const reactData = $xeGrid.reactData;
+      const {
+        loading,
+        proxyConfig
+      } = props;
+      const {
+        tableLoading
+      } = reactData;
+      const proxyOpts = $xeGrid.computeProxyOpts;
+      const {
+        showLoading
+      } = proxyOpts;
+      return loading || tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts);
     }
   },
   watch: {
@@ -31344,9 +31551,7 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
                   reactData.formData = formData;
                 }
                 if ($xeTable) {
-                  const {
-                    internalData: tableInternalData
-                  } = $xeTable;
+                  const tableInternalData = $xeTable;
                   const {
                     tableFullColumn,
                     fullColumnFieldData
@@ -32315,6 +32520,7 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
       const reactData = $xeGrid.reactData;
       const vSize = $xeGrid.computeSize;
       const styles = $xeGrid.computeStyles;
+      const isLoading = $xeGrid.computeIsLoading;
       return h('div', {
         ref: 'refElem',
         class: ['vxe-grid', {
@@ -32322,7 +32528,7 @@ external_root_XEUtils_commonjs_xe_utils_commonjs2_xe_utils_amd_xe_utils_default(
           'is--animat': !!props.animat,
           'is--round': props.round,
           'is--maximize': reactData.isZMax,
-          'is--loading': props.loading || reactData.tableLoading
+          'is--loading': isLoading
         }],
         style: styles
       }, $xeGrid.renderLayout(h));