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

package/lib/table/src/methods.js

@@ -11,6 +11,7 @@ var _ui = require("../../ui");
 var _cell = _interopRequireDefault(require("./cell"));
 var _util = require("./util");
 var _vn = require("../../ui/src/vn");
+var _anime = require("./anime");
 var _log = require("../../ui/src/log");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const {
@@ -514,7 +515,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();
@@ -599,7 +600,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();
@@ -2719,8 +2720,6 @@ function clearDragStatus($xeTable) {
     hideDropTip($xeTable);
     reactData.dragRow = null;
     reactData.dragCol = null;
-    reactData.isDragColMove = false;
-    reactData.isDragRowMove = false;
   }
 }
 function clearRowDropOrigin($xeTable) {
@@ -3102,7 +3101,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();
@@ -3117,19 +3116,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);
     }
@@ -3139,6 +3147,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;
@@ -3398,8 +3438,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;
@@ -3459,10 +3497,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;
@@ -3476,7 +3514,7 @@ function loadTableData($xeTable, datas, isReset) {
           targetScrollTop = 0;
         }
         reactData.isRowLoading = false;
-        handleRecalculateLayout($xeTable, false);
+        handleRecalculateStyle($xeTable, false, false, false);
         // 是否变更虚拟滚动
         if (oldScrollYLoad === sYLoad) {
           (0, _util.restoreScrollLocation)($xeTable, targetScrollLeft, targetScrollTop).then(() => {
@@ -3753,7 +3791,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 {
@@ -4309,10 +4346,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) {
@@ -4371,7 +4408,7 @@ const Methods = {
       if (!initStatus) {
         handleLoadDefaults($xeTable);
       }
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -4386,7 +4423,7 @@ const Methods = {
       return loadTableData($xeTable, datas, true);
     }).then(() => {
       handleLoadDefaults($xeTable);
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -4979,7 +5016,7 @@ const Methods = {
       }
       return $xeTable.$nextTick().then(() => {
         $xeTable.updateCellAreas();
-        return $xeTable.recalculate();
+        return handleLazyRecalculate($xeTable, false, true, true);
       });
     }
     return $xeTable.reloadData(tableSourceData);
@@ -5986,7 +6023,7 @@ const Methods = {
     return parseColumns($xeTable, true).then(() => {
       return this.refreshScroll();
     }).then(() => {
-      return this.recalculate();
+      return handleLazyRecalculate($xeTable, false, true, true);
     });
   },
   /**
@@ -6592,36 +6629,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;
@@ -7294,9 +7303,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();
   },
   /**
    * 处理合并
@@ -7996,7 +8007,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 ? _xeUtils.default.get(item, checkField) : selectCheckboxMaps[childRowid];
@@ -8027,18 +8039,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) {
           _xeUtils.default.set(row, checkField, isSelected);
         }
@@ -8096,7 +8115,9 @@ const Methods = {
       handleGetRowId
     } = (0, _util.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 => {
@@ -8114,9 +8135,9 @@ const Methods = {
         vLen++;
       } else {
         if (selected) {
-          sLen++;
+          dsLen++;
         } else if (treeIndeterminateRowMaps[childRowid]) {
-          hLen++;
+          dhLen++;
         }
       }
     } : row => {
@@ -8130,7 +8151,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 = !_xeUtils.default.isEmpty(checkboxReserveRowMap);
@@ -9068,6 +9089,7 @@ const Methods = {
       fullAllDataRowIdData
     } = internalData;
     const {
+      animation,
       isPeerDrag,
       isCrossDrag,
       isSelfToChildDrag,
@@ -9075,6 +9097,9 @@ const Methods = {
       dragToChildMethod
     } = rowDragOpts;
     const treeOpts = $xeTable.computeTreeOpts;
+    const cellOpts = $xeTable.computeCellOpts;
+    const rowOpts = $xeTable.computeRowOpts;
+    const defaultRowHeight = $xeTable.computeDefaultRowHeight;
     const {
       transform,
       rowField,
@@ -9084,80 +9109,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 = (0, _util.getRowid)($xeTable, dragRow);
+        const dragRowRest = fullAllDataRowIdData[dragRowid] || {};
+        const _dragRowIndex = dragRowRest._index;
+        let dragRowHeight = 0;
+        let dragOffsetTop = -1;
+        if (animation) {
+          dragRowHeight = (0, _util.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 = (0, _util.getRowid)($xeTable, dragRow);
-              const oldRest = fullAllDataRowIdData[oldRowid];
-              const newRowid = (0, _util.getRowid)($xeTable, prevDragRow);
-              const newRest = fullAllDataRowIdData[newRowid];
-              if (oldRest && newRest) {
-                const {
-                  level: oldLevel
-                } = oldRest;
-                const {
-                  level: newLevel
-                } = newRest;
-                const oldAllMaps = {};
-                _xeUtils.default.eachTree([dragRow], item => {
-                  oldAllMaps[(0, _util.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 (_ui.VxeUI.modal) {
-                          _ui.VxeUI.modal.message({
-                            status: 'error',
-                            content: 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 = (0, _util.getRowid)($xeTable, prevDragRow);
+            const newRest = fullAllDataRowIdData[newRowid];
+            if (oldRest && newRest) {
+              const {
+                level: oldLevel
+              } = oldRest;
+              const {
+                level: newLevel
+              } = newRest;
+              const oldAllMaps = {};
+              _xeUtils.default.eachTree([dragRow], item => {
+                oldAllMaps[(0, _util.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;
                   }
@@ -9173,87 +9189,156 @@ const Methods = {
                       return errRest;
                     }
                   }
-                } else {
-                  // 根到根
                 }
-                const fullList = _xeUtils.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) {
-                  _xeUtils.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 (_ui.VxeUI.modal) {
+                      _ui.VxeUI.modal.message({
+                        status: 'error',
+                        content: getI18n('vxe.error.treeDragChild')
+                      });
+                    }
+                    return errRest;
+                  }
                 }
-                dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
-                internalData.tableFullTreeData = _xeUtils.default.toArrayTree(fullList, {
-                  key: rowField,
-                  parentKey: parentField,
-                  children: childrenField,
-                  mapChildren: mapChildrenField
+              } else {
+                // 根到根
+              }
+              const fullList = _xeUtils.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) {
+                _xeUtils.default.each(dragRow[childrenField], childRow => {
+                  childRow[parentField] = dragRow[parentField];
                 });
               }
+              dragRow[parentField] = isDragToChildFlag ? prevDragRow[rowField] : prevDragRow[parentField];
+              internalData.tableFullTreeData = _xeUtils.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[(0, _util.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="${(0, _util.getRowid)($xeTable, row)}"]`).join(','));
+                (0, _anime.moveRowAnimateToTb)(dtTrList, offsetRate * dragRowHeight);
+              }
+            }
+            const newTrList = el.querySelectorAll(`.vxe-body--row[rowid="${dragRowid}"]`);
+            const newTrEl = newTrList[0];
+            if (dragOffsetTop > -1 && newTrEl) {
+              (0, _anime.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);
   },
@@ -9281,6 +9366,7 @@ const Methods = {
       prevDragRow,
       prevDragPos
     } = internalData;
+    const el = $xeTable.$refs.refElem;
     if (treeConfig && lazy && prevDragToChild) {
       // 懒加载
       const newRowid = (0, _util.getRowid)($xeTable, prevDragRow);
@@ -9297,18 +9383,16 @@ const Methods = {
     }
     hideDropTip($xeTable);
     clearRowDropOrigin($xeTable);
+    (0, _anime.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;
@@ -9385,7 +9469,6 @@ const Methods = {
     const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
     const trEl = tdEl.parentElement;
     const dStartMethod = dragStartMethod || (dragConfig ? dragConfig.dragStartMethod : null);
-    reactData.isDragRowMove = false;
     clearRowDropOrigin($xeTable);
     if (dStartMethod && !dStartMethod(params)) {
       trEl.draggable = false;
@@ -9416,7 +9499,7 @@ const Methods = {
   handleColDragSwapColumn() {
     const $xeTable = this;
     handleUpdateColumn($xeTable);
-    parseColumns($xeTable, false).then(() => {
+    return parseColumns($xeTable, false).then(() => {
       $xeTable.updateCellAreas();
       $xeTable.saveCustomStore('update:sort');
     });
@@ -9431,6 +9514,7 @@ const Methods = {
     } = props;
     const columnDragOpts = $xeTable.computeColumnDragOpts;
     const {
+      animation,
       isPeerDrag,
       isCrossDrag,
       isSelfToChildDrag,
@@ -9439,68 +9523,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) {
           _xeUtils.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 (_ui.VxeUI.modal) {
-                    _ui.VxeUI.modal.message({
-                      status: 'error',
-                      content: 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 = {};
+        _xeUtils.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;
             }
@@ -9516,96 +9605,199 @@ const Methods = {
                 return errRest;
               }
             }
-          } else {
-            // 根到根
           }
-          const oldewMatchRest = _xeUtils.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 (_ui.VxeUI.modal) {
+                _ui.VxeUI.modal.message({
+                  status: 'error',
+                  content: getI18n('vxe.error.treeDragChild')
+                });
               }
+              return errRest;
             }
           }
-          const newMatchRest = _xeUtils.default.findTree(collectColumn, item => item.id === newColumn.id);
-          if (newMatchRest) {
+        } else {
+          // 根到根
+        }
+        const oldewMatchRest = _xeUtils.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 = [];
           }
-          _xeUtils.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 = _xeUtils.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;
+          }
+        }
+        _xeUtils.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 = {};
+            _xeUtils.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 = _xeUtils.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);
+                  }
+                }
+                _xeUtils.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(','));
+                  (0, _anime.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) {
+                (0, _anime.moveColAnimateToLr)(newTrList, dragOffsetLeft - newTdEl.offsetLeft);
+              }
+            }
+          }
+          loadScrollXData($xeTable);
           return {
             status: true
           };
-        }).catch(() => {
-          return errRest;
         });
-      }
+      }).catch(() => {
+        return errRest;
+      });
     }
     return Promise.resolve(errRest);
   },
@@ -9621,18 +9813,14 @@ const Methods = {
       prevDragPos,
       prevDragToChild
     } = internalData;
+    const el = $xeTable.$refs.refElem;
     $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild);
     hideDropTip($xeTable);
     clearColDropOrigin($xeTable);
+    (0, _anime.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;
@@ -9721,7 +9909,6 @@ const Methods = {
     } = params;
     const dragEl = evnt.currentTarget;
     const thEl = trigger === 'cell' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
-    reactData.isDragColMove = false;
     clearColDropOrigin($xeTable);
     if (dragStartMethod && !dragStartMethod(params)) {
       thEl.draggable = false;
@@ -9744,7 +9931,6 @@ const Methods = {
     hideDropTip($xeTable);
     reactData.dragRow = null;
     reactData.dragCol = null;
-    reactData.isDragColMove = false;
   },
   setPendingRow(rows, status) {
     const $xeTable = this;
@@ -10329,7 +10515,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);
@@ -10380,7 +10566,7 @@ const Methods = {
     }
     return $xeTable.$nextTick().then(() => {
       if (expList.length) {
-        return $xeTable.recalculate(true);
+        return handleLazyRecalculate($xeTable, true, true, true);
       }
     }).then(() => {
       updateRowOffsetTop($xeTable);
@@ -10540,7 +10726,7 @@ const Methods = {
     $xeTable.handleTableData();
     updateAfterDataIndex($xeTable);
     reactData.rowGroupExpandedFlag++;
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   },
   clearRowGroupExpand() {
     const $xeTable = this;
@@ -10551,7 +10737,7 @@ const Methods = {
     $xeTable.handleTableData();
     updateAfterDataIndex($xeTable);
     reactData.rowGroupExpandedFlag++;
-    return $xeTable.recalculate(true);
+    return handleLazyRecalculate($xeTable, true, true, true);
   },
   getTreeExpandRecords() {
     const $xeTable = this;
@@ -10970,8 +11156,6 @@ const Methods = {
       }
       internalData.lastScrollTop = scrollTop;
     }
-    reactData.isDragColMove = false;
-    reactData.isDragRowMove = false;
     reactData.lastScrollTime = Date.now();
     const evntParams = Object.assign({
       scrollTop,