vxe-table 3.18.0 → 3.18.2

package/es/table/src/methods.js

@@ -7,12 +7,14 @@ import { getRowUniqueId, clearTableAllStatus, getColumnList, toFilters, getRowke
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime';
 import { warnLog, errLog } from '../../ui/src/log';
+import { getCrossTableDragRowInfo } from './store';
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI;
 const browseObj = XEUtils.browse();
 const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
 const maxXWidth = 5e6;
+let crossTableDragRowObj = null;
 function eqCellValue(row1, row2, field) {
     const val1 = XEUtils.get(row1, field);
     const val2 = XEUtils.get(row2, field);
@@ -960,22 +962,28 @@ function updateStyle($xeTable) {
         emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
         emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
     }
+    const scrollbarXConf = scrollbarOpts.x || {};
     const scrollbarXToTop = $xeTable.computeScrollbarXToTop;
+    const scrollbarYConf = scrollbarOpts.y || {};
     const scrollbarYToLeft = $xeTable.computeScrollbarYToLeft;
     let xScrollbarVisible = overflowX ? 'visible' : 'hidden';
-    if ($xeGanttView) {
+    if (scrollbarXConf.visible === 'visible' || $xeGanttView) {
         osbHeight = scrollbarHeight;
         xScrollbarVisible = 'visible';
     }
-    else if (scrollbarOpts.x && scrollbarOpts.x.visible === false) {
+    else if (scrollbarXConf.visible === 'hidden' || scrollbarXConf.visible === false) {
         osbHeight = 0;
         xScrollbarVisible = 'hidden';
     }
     let yScrollbarVisible = overflowY ? 'visible' : 'hidden';
-    if ((scrollbarOpts.y && scrollbarOpts.y.visible === false) || ($xeGanttView && !scrollbarYToLeft)) {
+    if ((scrollbarYConf.visible === 'hidden' || scrollbarYConf.visible === false) || ($xeGanttView && !scrollbarYToLeft)) {
         osbWidth = 0;
         yScrollbarVisible = 'hidden';
     }
+    else if (scrollbarYConf.visible === 'visible') {
+        osbWidth = scrollbarWidth;
+        yScrollbarVisible = 'visible';
+    }
     let tbHeight = 0;
     let bodyMaxHeight = 0;
     const bodyMinHeight = customMinHeight - tHeaderHeight - tFooterHeight - osbHeight;
@@ -1014,7 +1022,7 @@ function updateStyle($xeTable) {
     }
     if (xRightCornerEl) {
         xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-        xRightCornerEl.style.display = scrollbarXToTop ? '' : (overflowX && osbHeight ? 'block' : '');
+        xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '');
     }
     const scrollYVirtualEl = $xeTable.$refs.refScrollYVirtualElem;
     if (scrollYVirtualEl) {
@@ -1025,7 +1033,7 @@ function updateStyle($xeTable) {
     const yTopCornerEl = $xeTable.$refs.refScrollYTopCornerElem;
     if (yTopCornerEl) {
         yTopCornerEl.style.height = `${tHeaderHeight}px`;
-        yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
+        yTopCornerEl.style.display = tHeaderHeight && yScrollbarVisible === 'visible' ? 'block' : '';
     }
     const yWrapperEl = $xeTable.$refs.refScrollYWrapperElem;
     if (yWrapperEl) {
@@ -1036,7 +1044,7 @@ function updateStyle($xeTable) {
     if (yBottomCornerEl) {
         yBottomCornerEl.style.height = `${tFooterHeight}px`;
         yBottomCornerEl.style.top = `${tHeaderHeight + tbHeight}px`;
-        yBottomCornerEl.style.display = overflowY && tFooterHeight ? 'block' : '';
+        yBottomCornerEl.style.display = tFooterHeight && yScrollbarVisible === 'visible' ? 'block' : '';
     }
     const rowExpandEl = $xeTable.$refs.refRowExpandElem;
     if (rowExpandEl) {
@@ -1926,11 +1934,59 @@ function handleBodyMerge($xeTable, merges) {
         });
     }
 }
-function handleFooterMerge($xeTable, merges) {
+function removeBodyMerges($xeTable, merges) {
+    const internalData = $xeTable;
+    const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData;
+    const rest = [];
+    if (merges) {
+        const { handleGetRowId } = createHandleGetRowId($xeTable);
+        if (!XEUtils.isArray(merges)) {
+            merges = [merges];
+        }
+        merges.forEach((item) => {
+            const { row: margeRow, col: margeCol } = item;
+            let mergeRowIndex = -1;
+            let mergeColumnIndex = -1;
+            if (XEUtils.isNumber(margeRow)) {
+                mergeRowIndex = margeRow;
+            }
+            else {
+                const rowid = margeRow ? handleGetRowId(margeRow) : null;
+                const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
+                if (rowRest) {
+                    mergeRowIndex = rowRest._index;
+                }
+            }
+            if (XEUtils.isNumber(margeCol)) {
+                mergeColumnIndex = margeCol;
+            }
+            else {
+                const colid = margeCol ? margeCol.id : null;
+                const colRest = colid ? fullColumnIdData[colid] : null;
+                if (colRest) {
+                    mergeColumnIndex = colRest._index;
+                }
+            }
+            const mcIndex = XEUtils.findIndexOf(mergeBodyList, item => (item.row === mergeRowIndex) && (item.col === mergeColumnIndex));
+            if (mcIndex > -1) {
+                const rItems = mergeBodyList.splice(mcIndex, 1);
+                const item = rItems[0];
+                if (item) {
+                    rest.push(rItems[0]);
+                    if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+                        delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                    }
+                }
+            }
+        });
+    }
+    return rest;
+}
+function handleHeaderMerge($xeTable, merges) {
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { footerTableData } = reactData;
-    const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData;
+    const { mergeHeaderList, mergeHeaderMaps, fullColumnIdData } = internalData;
     if (merges) {
         const { visibleColumn } = internalData;
         if (!XEUtils.isArray(merges)) {
@@ -1956,7 +2012,7 @@ function handleFooterMerge($xeTable, merges) {
                 if (rowspan > 1 || colspan > 1) {
                     const row = footerTableData[mergeRowIndex];
                     const column = visibleColumn[mergeColumnIndex];
-                    let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                    let mergeItem = mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
                     if (mergeItem) {
                         mergeItem.rowspan = rowspan;
                         mergeItem.colspan = colspan;
@@ -1974,37 +2030,26 @@ function handleFooterMerge($xeTable, merges) {
                             _rowspan: rowspan,
                             _colspan: colspan
                         };
-                        mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
-                        mergeFooterList.push(mergeItem);
+                        mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+                        mergeHeaderList.push(mergeItem);
                     }
                 }
             }
         });
     }
 }
-function removeBodyMerges($xeTable, merges) {
+function removeHeaderMerges($xeTable, merges) {
     const internalData = $xeTable;
-    const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData;
+    const { mergeHeaderList, fullColumnIdData, mergeHeaderMaps } = internalData;
     const rest = [];
     if (merges) {
-        const { handleGetRowId } = createHandleGetRowId($xeTable);
         if (!XEUtils.isArray(merges)) {
             merges = [merges];
         }
         merges.forEach((item) => {
             const { row: margeRow, col: margeCol } = item;
-            let mergeRowIndex = -1;
+            const mergeRowIndex = XEUtils.isNumber(margeRow) ? margeRow : -1;
             let mergeColumnIndex = -1;
-            if (XEUtils.isNumber(margeRow)) {
-                mergeRowIndex = margeRow;
-            }
-            else {
-                const rowid = margeRow ? handleGetRowId(margeRow) : null;
-                const rowRest = rowid ? fullAllDataRowIdData[rowid] : null;
-                if (rowRest) {
-                    mergeRowIndex = rowRest._index;
-                }
-            }
             if (XEUtils.isNumber(margeCol)) {
                 mergeColumnIndex = margeCol;
             }
@@ -2015,14 +2060,14 @@ function removeBodyMerges($xeTable, merges) {
                     mergeColumnIndex = colRest._index;
                 }
             }
-            const mcIndex = XEUtils.findIndexOf(mergeBodyList, item => (item.row === mergeRowIndex) && (item.col === mergeColumnIndex));
+            const mcIndex = XEUtils.findIndexOf(mergeHeaderList, item => item.row === mergeRowIndex && item.col === mergeColumnIndex);
             if (mcIndex > -1) {
-                const rItems = mergeBodyList.splice(mcIndex, 1);
+                const rItems = mergeHeaderList.splice(mcIndex, 1);
                 const item = rItems[0];
                 if (item) {
-                    rest.push(rItems[0]);
-                    if (mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
-                        delete mergeBodyMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                    rest.push(item);
+                    if (mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`]) {
+                        delete mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
                     }
                 }
             }
@@ -2030,6 +2075,62 @@ function removeBodyMerges($xeTable, merges) {
     }
     return rest;
 }
+function handleFooterMerge($xeTable, merges) {
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    const { footerTableData } = reactData;
+    const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData;
+    if (merges) {
+        const { visibleColumn } = internalData;
+        if (!XEUtils.isArray(merges)) {
+            merges = [merges];
+        }
+        merges.forEach((item) => {
+            let { row: margeRow, col: margeCol, rowspan, colspan } = item;
+            const mergeRowIndex = XEUtils.isNumber(margeRow) ? margeRow : -1;
+            let mergeColumnIndex = -1;
+            if (XEUtils.isNumber(margeCol)) {
+                mergeColumnIndex = margeCol;
+            }
+            else {
+                const colid = margeCol ? margeCol.id : null;
+                const colRest = colid ? fullColumnIdData[colid] : null;
+                if (colRest) {
+                    mergeColumnIndex = colRest._index;
+                }
+            }
+            if (mergeRowIndex > -1 && mergeColumnIndex > -1 && (rowspan || colspan)) {
+                rowspan = XEUtils.toNumber(rowspan) || 1;
+                colspan = XEUtils.toNumber(colspan) || 1;
+                if (rowspan > 1 || colspan > 1) {
+                    const row = footerTableData[mergeRowIndex];
+                    const column = visibleColumn[mergeColumnIndex];
+                    let mergeItem = mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`];
+                    if (mergeItem) {
+                        mergeItem.rowspan = rowspan;
+                        mergeItem.colspan = colspan;
+                        mergeItem._rowspan = rowspan;
+                        mergeItem._colspan = colspan;
+                    }
+                    else {
+                        mergeItem = {
+                            row: mergeRowIndex,
+                            col: mergeColumnIndex,
+                            rowspan,
+                            colspan,
+                            _row: row,
+                            _col: column,
+                            _rowspan: rowspan,
+                            _colspan: colspan
+                        };
+                        mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+                        mergeFooterList.push(mergeItem);
+                    }
+                }
+            }
+        });
+    }
+}
 function removeFooterMerges($xeTable, merges) {
     const internalData = $xeTable;
     const { mergeFooterList, fullColumnIdData, mergeFooterMaps } = internalData;
@@ -2140,8 +2241,23 @@ function clearAllSort($xeTable) {
 function calcTableHeight($xeTable, key) {
     const props = $xeTable;
     const reactData = $xeTable;
+    const { editConfig } = props;
     const { parentHeight } = reactData;
-    const val = props[key];
+    let val = props[key];
+    if (key === 'minHeight') {
+        const defMinHeight = getConfig().table.minHeight;
+        if (XEUtils.eqNull(val)) {
+            if (eqEmptyValue(defMinHeight)) {
+                // 编辑模式默认最小高度
+                if (isEnableConf(editConfig)) {
+                    val = 144;
+                }
+            }
+            else {
+                val = defMinHeight;
+            }
+        }
+    }
     let num = 0;
     if (val) {
         if (val === '100%' || val === 'auto') {
@@ -2348,6 +2464,11 @@ function handleTargetEnterEvent($xeTable, isClear) {
         }
     }
 }
+function clearCrossTableDragStatus($xeTable) {
+    const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
+    crossTableDragRowObj = null;
+    crossTableDragRowInfo.row = null;
+}
 function clearDragStatus($xeTable) {
     const reactData = $xeTable;
     const { dragRow, dragCol } = reactData;
@@ -2355,6 +2476,7 @@ function clearDragStatus($xeTable) {
         clearColDropOrigin($xeTable);
         clearRowDropOrigin($xeTable);
         hideDropTip($xeTable);
+        clearCrossTableDragStatus($xeTable);
         reactData.dragRow = null;
         reactData.dragCol = null;
     }
@@ -2548,6 +2670,26 @@ function hideDropTip($xeTable) {
         cdLineEl.style.display = '';
     }
 }
+function clearRowDragData($xeTable) {
+    const $xeGantt = $xeTable.$xeGantt;
+    const reactData = $xeTable;
+    const internalData = $xeTable;
+    let wrapperEl = $xeTable.$refs.refElem;
+    const dtClss = ['.vxe-body--row'];
+    if ($xeGantt) {
+        const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+        if (ganttContainerElem) {
+            wrapperEl = ganttContainerElem;
+        }
+        dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
+    }
+    hideDropTip($xeTable);
+    clearRowDropOrigin($xeTable);
+    clearRowAnimate(wrapperEl, dtClss);
+    internalData.prevDragToChild = false;
+    reactData.dragRow = null;
+    reactData.dragCol = null;
+}
 /**
  * 处理显示 tooltip
  * @param {Event} evnt 事件
@@ -2614,11 +2756,19 @@ function handleDefaultMergeCells($xeTable) {
         $xeTable.setMergeCells(mergeCells);
     }
 }
+function handleDefaultMergeHeaderItems($xeTable) {
+    const props = $xeTable;
+    const { mergeHeaderCells } = props;
+    if (mergeHeaderCells) {
+        $xeTable.setMergeHeaderCells(mergeHeaderCells);
+    }
+}
 function handleDefaultMergeFooterItems($xeTable) {
     const props = $xeTable;
-    const { mergeFooterItems } = props;
-    if (mergeFooterItems) {
-        $xeTable.setMergeFooterItems(mergeFooterItems);
+    const { mergeFooterCells, mergeFooterItems } = props;
+    const mFooterCells = mergeFooterCells || mergeFooterItems;
+    if (mFooterCells) {
+        $xeTable.setMergeFooterCells(mFooterCells);
     }
 }
 // 计算可视渲染相关数据
@@ -3071,6 +3221,10 @@ function loadTableData($xeTable, datas, isReset) {
         }
         handleReserveStatus($xeTable);
         $xeTable.checkSelectionStatus();
+        $xeTable.dispatchEvent('data-change', {
+            visibleColumn: internalData.visibleColumn,
+            visibleData: internalData.afterFullData
+        }, null);
         return new Promise(resolve => {
             $xeTable.$nextTick()
                 .then(() => handleRecalculateStyle($xeTable, false, false, false))
@@ -3133,6 +3287,7 @@ function handleLoadDefaults($xeTable) {
     handleDefaultTreeExpand($xeTable);
     handleDefaultRowGroupExpand($xeTable);
     handleDefaultMergeCells($xeTable);
+    handleDefaultMergeHeaderItems($xeTable);
     handleDefaultMergeFooterItems($xeTable);
     $xeTable.$nextTick(() => setTimeout(() => $xeTable.recalculate()));
 }
@@ -4778,7 +4933,9 @@ const Methods = {
                 }
             }
         }
-        return $xeTable.handleRowDragSwapEvent(null, true, dragRow, prevDragRow, dragPos || defPos, dragToChild === true);
+        const rest = $xeTable.handleRowDragSwapEvent(null, true, dragRow, prevDragRow, dragPos || defPos, dragToChild === true);
+        clearRowDragData($xeTable);
+        return rest;
     },
     /**
      * 获取表格的全量列
@@ -6162,7 +6319,7 @@ const Methods = {
                                     // 如果点击了当前表格之外
                                     !getEventTargetNode(evnt, $el).flag) {
                                     setTimeout(() => {
-                                        this.handleClearEdit(evnt).then(() => {
+                                        $xeTable.handleClearEdit(evnt).then(() => {
                                             // 如果存在校验，点击了表格之外则清除
                                             if (!this.isActivated && editRules && validOpts.autoClear) {
                                                 this.validErrorMaps = {};
@@ -6178,17 +6335,17 @@ const Methods = {
         }
         else if (mouseConfig) {
             if (!getEventTargetNode(evnt, $el).flag && !($xeGGWrapper && getEventTargetNode(evnt, $xeGGWrapper.$el).flag) && !(tableMenu && getEventTargetNode(evnt, tableMenu.$el).flag) && !($toolbar && getEventTargetNode(evnt, $toolbar.$el).flag)) {
-                if (this.clearSelected) {
-                    this.clearSelected();
+                if ($xeTable.clearSelected) {
+                    $xeTable.clearSelected();
                 }
                 if (areaOpts.autoClear) {
-                    if (this.getCellAreas) {
-                        const cellAreas = this.getCellAreas();
+                    if ($xeTable.getCellAreas) {
+                        const cellAreas = $xeTable.getCellAreas();
                         if (cellAreas && cellAreas.length && !getEventTargetNode(evnt, document.body, 'vxe-table--ignore-areas-clear').flag) {
-                            this.preventEvent(evnt, 'event.clearAreas', {}, () => {
-                                this.clearCellAreas();
-                                this.clearCopyCellArea();
-                                this.emitEvent('clear-cell-area-selection', { cellAreas }, evnt);
+                            $xeTable.preventEvent(evnt, 'event.clearAreas', {}, () => {
+                                $xeTable.clearCellAreas();
+                                $xeTable.clearCopyCellArea();
+                                $xeTable.dispatchEvent('clear-cell-area-selection', { cellAreas }, evnt);
                             });
                         }
                     }
@@ -6225,13 +6382,14 @@ const Methods = {
      * 表格键盘事件
      */
     keydownEvent(evnt) {
+        const $xeTable = this;
         const { filterStore, ctxMenuStore, editStore, keyboardConfig, mouseConfig, mouseOpts, keyboardOpts } = this;
         const { actived } = editStore;
         const { keyCode } = evnt;
         const isEsc = keyCode === 27;
         if (isEsc) {
             this.preventEvent(evnt, 'event.keydown', null, () => {
-                this.emitEvent('keydown-start', {}, evnt);
+                $xeTable.dispatchEvent('keydown-start', {}, evnt);
                 if (keyboardConfig && mouseConfig && mouseOpts.area && this.handleKeyboardCellAreaEvent) {
                     this.handleKeyboardCellAreaEvent(evnt);
                 }
@@ -6252,8 +6410,8 @@ const Methods = {
                         }
                     }
                 }
-                this.emitEvent('keydown', {}, evnt);
-                this.emitEvent('keydown-end', {}, evnt);
+                $xeTable.dispatchEvent('keydown', {}, evnt);
+                $xeTable.dispatchEvent('keydown-end', {}, evnt);
             });
         }
     },
@@ -6584,6 +6742,7 @@ const Methods = {
         }
     },
     handleGlobalPasteEvent(evnt) {
+        const $xeTable = this;
         const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
@@ -6592,10 +6751,11 @@ const Methods = {
                     this.handlePasteCellAreaEvent(evnt);
                 }
             }
-            this.emitEvent('paste', {}, evnt);
+            $xeTable.dispatchEvent('paste', {}, evnt);
         }
     },
     handleGlobalCopyEvent(evnt) {
+        const $xeTable = this;
         const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
@@ -6604,10 +6764,11 @@ const Methods = {
                     this.handleCopyCellAreaEvent(evnt);
                 }
             }
-            this.emitEvent('copy', {}, evnt);
+            $xeTable.dispatchEvent('copy', {}, evnt);
         }
     },
     handleGlobalCutEvent(evnt) {
+        const $xeTable = this;
         const { isActivated, keyboardConfig, keyboardOpts, mouseConfig, mouseOpts, editStore, filterStore } = this;
         const { actived } = editStore;
         if (isActivated && !filterStore.visible) {
@@ -6616,7 +6777,7 @@ const Methods = {
                     this.handleCutCellAreaEvent(evnt);
                 }
             }
-            this.emitEvent('cut', {}, evnt);
+            $xeTable.dispatchEvent('cut', {}, evnt);
         }
     },
     handleGlobalResizeEvent() {
@@ -6637,6 +6798,14 @@ const Methods = {
         internalData.mergeBodyCellMaps = buildMergeData(mergeBodyList);
         reactData.mergeBodyFlag++;
     },
+    handleUpdateHeaderMerge() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { mergeHeaderList } = internalData;
+        internalData.mergeHeaderCellMaps = buildMergeData(mergeHeaderList);
+        reactData.mergeHeadFlag++;
+    },
     handleUpdateFooterMerge() {
         const $xeTable = this;
         const reactData = $xeTable;
@@ -7789,7 +7958,8 @@ const Methods = {
         return $xeTable.$nextTick();
     },
     triggerHeaderCellDblclickEvent(evnt, params) {
-        this.emitEvent('header-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, params), evnt);
+        const $xeTable = this;
+        $xeTable.dispatchEvent('header-cell-dblclick', Object.assign({ cell: evnt.currentTarget }, params), evnt);
     },
     getCurrentColumn() {
         return this.columnOpts.isCurrent || this.highlightCurrentColumn ? this.currentColumn : null;
@@ -7975,7 +8145,7 @@ const Methods = {
                 }
             }
         }
-        this.emitEvent('cell-dblclick', params, evnt);
+        $xeTable.dispatchEvent('cell-dblclick', params, evnt);
     },
     handleColumnSortEvent(evnt, column) {
         const $xeTable = this;
@@ -8399,12 +8569,239 @@ const Methods = {
         }
         return Promise.resolve(errRest);
     },
-    handleRowDragDragendEvent(evnt) {
+    /**
+     * 处理跨表拖拽完成
+     */
+    handleCrossTableRowDragFinishEvent(evnt) {
+        const $xeTable = this;
+        const $xeGantt = $xeTable.$xeGantt;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
+        const { tableData } = reactData;
+        const { fullAllDataRowIdData } = internalData;
+        const rowOpts = $xeTable.computeRowOpts;
+        const cellOpts = $xeTable.computeCellOpts;
+        const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { animation, isCrossTableDrag } = rowDragOpts;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const { mapChildrenField } = treeOpts;
+        const el = $xeTable.$refs.refElem;
+        if (isCrossTableDrag && crossTableDragRowObj && crossTableDragRowInfo) {
+            const { row: dragRow } = crossTableDragRowInfo;
+            if (dragRow) {
+                const dragRowid = getRowid($xeTable, dragRow);
+                const dragRowRest = fullAllDataRowIdData[dragRowid];
+                let dragRowHeight = 0;
+                let rsIndex = -1;
+                if (dragRowRest) {
+                    if (animation) {
+                        dragRowHeight = getCellRestHeight(dragRowRest, cellOpts, rowOpts, defaultRowHeight);
+                    }
+                    rsIndex = dragRowRest.$index;
+                }
+                const dragRangeList = rsIndex > -1 && rsIndex < tableData.length - 1 ? tableData.slice(rsIndex + 1) : [];
+                const dragList = XEUtils.toTreeArray([dragRow], {
+                    updated: true,
+                    children: mapChildrenField
+                });
+                $xeTable.remove(dragList).then(() => {
+                    if (animation && dragRowHeight && dragRangeList.length) {
+                        const $xeGanttView = internalData.xeGanttView;
+                        let wrapperEl = el;
+                        if ($xeGantt && $xeGanttView) {
+                            const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+                            if (ganttContainerElem) {
+                                wrapperEl = ganttContainerElem;
+                            }
+                        }
+                        const dtClss = [];
+                        dragRangeList.forEach(row => {
+                            const rowid = getRowid($xeTable, row);
+                            dtClss.push(`.vxe-body--row[rowid="${rowid}"]`);
+                            if ($xeGantt) {
+                                dtClss.push(`.vxe-gantt-view--body-row[rowid="${rowid}"]`, `.vxe-gantt-view--chart-row[rowid="${rowid}"]`);
+                            }
+                        });
+                        const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                        moveRowAnimateToTb(dtTrList, dragRowHeight);
+                    }
+                });
+                $xeTable.dispatchEvent('row-remove-dragend', {
+                    row: dragRow
+                }, evnt);
+                clearRowDragData($xeTable);
+                clearCrossTableDragStatus($xeTable);
+            }
+        }
+    },
+    /**
+     * 处理跨表拖至新的空表
+     */
+    handleCrossTableRowDragoverEmptyEvent(evnt) {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        const { tableData } = reactData;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { isCrossTableDrag } = rowDragOpts;
+        if (isCrossTableDrag && crossTableDragRowObj && !tableData.length) {
+            const { $oldTable } = crossTableDragRowObj;
+            if ($oldTable && $oldTable.xID !== $xeTable.xID) {
+                evnt.preventDefault();
+                crossTableDragRowObj.$newTable = $xeTable;
+                internalData.prevDragRow = null;
+            }
+        }
+    },
+    /**
+     * 处理跨表拖插入
+     */
+    handleCrossTableRowDragInsertEvent(evnt) {
         const $xeTable = this;
         const $xeGantt = $xeTable.$xeGantt;
         const props = $xeTable;
         const reactData = $xeTable;
         const internalData = $xeTable;
+        const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
+        const { treeConfig } = props;
+        const { prevDragRow, prevDragPos, prevDragToChild } = internalData;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { animation, isSelfToChildDrag, isCrossTableDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
+        const rowOpts = $xeTable.computeRowOpts;
+        const cellOpts = $xeTable.computeCellOpts;
+        const defaultRowHeight = $xeTable.computeDefaultRowHeight;
+        const treeOpts = $xeTable.computeTreeOpts;
+        const { parentField, mapChildrenField } = treeOpts;
+        const childrenField = treeOpts.children || treeOpts.childrenField;
+        // 跨表拖拽
+        if (isCrossTableDrag && crossTableDragRowObj && crossTableDragRowInfo) {
+            const { row: oldRow } = crossTableDragRowInfo;
+            const { $oldTable } = crossTableDragRowObj;
+            const el = $xeTable.$refs.refElem;
+            if ($oldTable && oldRow) {
+                const dragRow = oldRow;
+                let dragOffsetIndex = -1;
+                if (prevDragRow) {
+                    dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
+                }
+                const dragParams = {
+                    oldRow: dragRow,
+                    newRow: prevDragRow,
+                    dragRow,
+                    dragPos: prevDragPos,
+                    dragToChild: !!prevDragToChild,
+                    offsetIndex: dragOffsetIndex
+                };
+                const isDragToChildFlag = isSelfToChildDrag && dragToChildMethod ? dragToChildMethod(dragParams) : prevDragToChild;
+                const errRest = {
+                    status: false
+                };
+                Promise.resolve(dragEndMethod ? dragEndMethod(dragParams) : true).then((status) => {
+                    if (!status) {
+                        return errRest;
+                    }
+                    let insertRest = Promise.resolve();
+                    if (treeConfig) {
+                        const dragList = XEUtils.toTreeArray([dragRow], {
+                            updated: true,
+                            children: mapChildrenField
+                        });
+                        $oldTable.handleCrossTableRowDragFinishEvent(evnt);
+                        if (prevDragRow) {
+                            dragRow[parentField] = prevDragRow[parentField];
+                        }
+                        else {
+                            dragRow[parentField] = null;
+                        }
+                        dragList.forEach(row => {
+                            row[childrenField] = undefined;
+                            row[mapChildrenField] = undefined;
+                        });
+                        if (prevDragRow) {
+                            if (prevDragPos === 'bottom') {
+                                insertRest = $xeTable.insertNextAt(dragList, prevDragRow);
+                            }
+                            else {
+                                insertRest = $xeTable.insertAt(dragList, prevDragRow);
+                            }
+                        }
+                        else {
+                            insertRest = $xeTable.insert(dragList);
+                        }
+                    }
+                    else {
+                        $oldTable.handleCrossTableRowDragFinishEvent(evnt);
+                        if (prevDragRow) {
+                            if (prevDragPos === 'bottom') {
+                                insertRest = $xeTable.insertNextAt(dragRow, prevDragRow);
+                            }
+                            else {
+                                insertRest = $xeTable.insertAt(dragRow, prevDragRow);
+                            }
+                        }
+                        else {
+                            insertRest = $xeTable.insert(dragRow);
+                        }
+                    }
+                    $xeTable.dispatchEvent('row-insert-dragend', {
+                        oldRow,
+                        newRow: prevDragRow,
+                        dragRow,
+                        dragPos: prevDragPos,
+                        dragToChild: isDragToChildFlag,
+                        offsetIndex: dragOffsetIndex
+                    }, evnt);
+                    clearRowDragData($xeTable);
+                    insertRest.then(() => {
+                        const { tableData } = reactData;
+                        const { fullAllDataRowIdData } = internalData;
+                        const oldRowid = getRowid($xeTable, dragRow);
+                        const oldRowRest = fullAllDataRowIdData[oldRowid];
+                        let dragRowHeight = 0;
+                        let rsIndex = -1;
+                        if (oldRowRest) {
+                            if (animation) {
+                                dragRowHeight = getCellRestHeight(oldRowRest, cellOpts, rowOpts, defaultRowHeight);
+                            }
+                            rsIndex = oldRowRest.$index;
+                        }
+                        const dragRangeList = rsIndex > -1 ? tableData.slice(rsIndex) : [];
+                        if (animation && dragRowHeight && dragRangeList.length) {
+                            const $xeGanttView = internalData.xeGanttView;
+                            let wrapperEl = el;
+                            if ($xeGantt && $xeGanttView) {
+                                const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
+                                if (ganttContainerElem) {
+                                    wrapperEl = ganttContainerElem;
+                                }
+                            }
+                            const dtClss = [];
+                            dragRangeList.forEach(row => {
+                                const rowid = getRowid($xeTable, row);
+                                dtClss.push(`.vxe-body--row[rowid="${rowid}"]`);
+                                if ($xeGantt) {
+                                    dtClss.push(`.vxe-gantt-view--body-row[rowid="${rowid}"]`, `.vxe-gantt-view--chart-row[rowid="${rowid}"]`);
+                                }
+                            });
+                            const dtTrList = wrapperEl.querySelectorAll(dtClss.join(','));
+                            moveRowAnimateToTb(dtTrList, -dragRowHeight);
+                        }
+                    });
+                });
+            }
+        }
+    },
+    hideCrossTableRowDropClearStatus() {
+        const $xeTable = this;
+        hideDropTip($xeTable);
+    },
+    handleRowDragDragendEvent(evnt) {
+        const $xeTable = this;
+        const props = $xeTable;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
         const { treeConfig } = props;
         const { fullAllDataRowIdData, prevDragToChild } = internalData;
         const { dragRow } = reactData;
@@ -8412,7 +8809,18 @@ const Methods = {
         const { lazy } = treeOpts;
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
         const { prevDragRow, prevDragPos } = internalData;
-        let wrapperEl = $xeTable.$refs.refElem;
+        const rowDragOpts = $xeTable.computeRowDragOpts;
+        const { isCrossTableDrag, isCrossDrag } = rowDragOpts;
+        // 跨表拖拽
+        if (isCrossTableDrag && crossTableDragRowObj) {
+            const { $newTable } = crossTableDragRowObj;
+            if ($newTable && $newTable.xID !== $xeTable.xID) {
+                if (!treeConfig || isCrossDrag) {
+                    $newTable.handleCrossTableRowDragInsertEvent(evnt);
+                }
+                return;
+            }
+        }
         if (treeConfig && lazy && prevDragToChild) {
             // 懒加载
             const newRowid = getRowid($xeTable, prevDragRow);
@@ -8429,20 +8837,8 @@ const Methods = {
         else {
             $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
         }
-        const dtClss = ['.vxe-body--row'];
-        if ($xeGantt) {
-            const ganttContainerElem = $xeGantt.$refs.refGanttContainerElem;
-            if (ganttContainerElem) {
-                wrapperEl = ganttContainerElem;
-            }
-            dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
-        }
-        hideDropTip($xeTable);
-        clearRowDropOrigin($xeTable);
-        clearRowAnimate(wrapperEl, dtClss);
-        internalData.prevDragToChild = false;
-        reactData.dragRow = null;
-        reactData.dragCol = null;
+        clearRowDragData($xeTable);
+        clearCrossTableDragStatus($xeTable);
     },
     handleRowDragDragoverEvent(evnt) {
         const $xeTable = this;
@@ -8456,8 +8852,8 @@ const Methods = {
         const { lazy, transform, parentField } = treeOpts;
         const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
         const rowDragOpts = $xeTable.computeRowDragOpts;
-        const { isPeerDrag, isCrossDrag, isToChildDrag } = rowDragOpts;
-        if (!dragRow) {
+        const { isPeerDrag, isCrossDrag, isToChildDrag, isCrossTableDrag } = rowDragOpts;
+        if (!dragRow && !(isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj)) {
             evnt.preventDefault();
             return;
         }
@@ -8466,16 +8862,38 @@ const Methods = {
         const rowid = trEl.getAttribute('rowid') || '';
         const rest = fullAllDataRowIdData[rowid];
         if (rest) {
+            evnt.preventDefault();
             const row = rest.row;
             const rowid = getRowid($xeTable, row);
             const rowRest = fullAllDataRowIdData[rowid];
-            evnt.preventDefault();
-            const { dragRow } = reactData;
             const offsetY = evnt.clientY - trEl.getBoundingClientRect().y;
             const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom';
-            internalData.prevDragToChild = !!(treeConfig && transform && isToChildDrag && isControlKey);
+            internalData.prevDragToChild = !!(treeConfig && transform && (isCrossDrag && isToChildDrag) && isControlKey);
             internalData.prevDragRow = row;
             internalData.prevDragPos = dragPos;
+            // 跨表拖拽
+            if (isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj) {
+                const { $oldTable, $newTable } = crossTableDragRowObj;
+                if ($oldTable) {
+                    const oldTableReactData = $oldTable;
+                    if ($oldTable.xID === $xeTable.xID) {
+                        if ($newTable) {
+                            $newTable.hideCrossTableRowDropClearStatus();
+                        }
+                        reactData.isCrossDragRow = false;
+                        oldTableReactData.isCrossDragRow = false;
+                        crossTableDragRowObj.$newTable = null;
+                    }
+                    else if (!treeConfig || isCrossDrag) {
+                        $oldTable.hideCrossTableRowDropClearStatus();
+                        oldTableReactData.isCrossDragRow = true;
+                        reactData.dragTipText = oldTableReactData.dragTipText;
+                        crossTableDragRowObj.$newTable = $xeTable;
+                        showDropTip($xeTable, evnt, trEl, null, true, dragPos);
+                        return;
+                    }
+                }
+            }
             if ($xeTable.eqRow(dragRow, row) ||
                 (isControlKey && treeConfig && lazy && row[hasChildField] && rowRest && !rowRest.treeLoaded) ||
                 (!isCrossDrag && treeConfig && transform && (isPeerDrag ? dragRow[parentField] !== row[parentField] : rest.level))) {
@@ -8495,10 +8913,11 @@ const Methods = {
         const $xeTable = this;
         const props = $xeTable;
         const reactData = $xeTable;
+        const crossTableDragRowInfo = getCrossTableDragRowInfo($xeTable);
         evnt.stopPropagation();
         const { dragConfig } = props;
         const rowDragOpts = $xeTable.computeRowDragOpts;
-        const { trigger, dragStartMethod } = rowDragOpts;
+        const { isCrossTableDrag, trigger, dragStartMethod } = rowDragOpts;
         const { row } = params;
         const dragEl = evnt.currentTarget;
         const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : (_a = dragEl.parentElement) === null || _a === void 0 ? void 0 : _a.parentElement;
@@ -8509,10 +8928,16 @@ const Methods = {
             trEl.draggable = false;
             reactData.dragRow = null;
             reactData.dragCol = null;
+            clearCrossTableDragStatus($xeTable);
             hideDropTip($xeTable);
             return;
         }
+        if (isCrossTableDrag) {
+            crossTableDragRowInfo.row = row;
+            crossTableDragRowObj = { $oldTable: $xeTable, $newTable: null };
+        }
         reactData.dragRow = row;
+        reactData.isCrossDragRow = false;
         reactData.dragCol = null;
         trEl.draggable = true;
         updateRowDropOrigin($xeTable, row);
@@ -8832,6 +9257,7 @@ const Methods = {
         internalData.prevDragToChild = false;
         reactData.dragRow = null;
         reactData.dragCol = null;
+        clearCrossTableDragStatus($xeTable);
     },
     handleHeaderCellDragDragoverEvent(evnt) {
         const $xeTable = this;
@@ -8916,11 +9342,13 @@ const Methods = {
             reactData.dragRow = null;
             reactData.dragCol = null;
             hideDropTip($xeTable);
+            clearCrossTableDragStatus($xeTable);
             return;
         }
         reactData.dragCol = column;
         reactData.dragRow = null;
         thEl.draggable = true;
+        clearCrossTableDragStatus($xeTable);
         updateColDropOrigin($xeTable, column);
         updateColDropTipContent($xeTable, thEl);
         $xeTable.dispatchEvent('column-dragstart', params, evnt);
@@ -8930,6 +9358,7 @@ const Methods = {
         const reactData = $xeTable;
         clearColDropOrigin($xeTable);
         hideDropTip($xeTable);
+        clearCrossTableDragStatus($xeTable);
         reactData.dragRow = null;
         reactData.dragCol = null;
     },
@@ -10839,6 +11268,10 @@ const Methods = {
         }
         reactData.footerTableData = footData;
         $xeTable.handleUpdateFooterMerge();
+        $xeTable.dispatchEvent('footer-data-change', {
+            visibleColumn: internalData.visibleColumn,
+            footData
+        }, null);
         return $xeTable.$nextTick();
     },
     /**
@@ -10919,45 +11352,101 @@ const Methods = {
             return updateStyle($xeTable);
         });
     },
-    setMergeFooterItems(merges) {
+    setMergeHeaderCells(merges) {
+        const $xeTable = this;
+        handleHeaderMerge($xeTable, merges);
+        $xeTable.handleUpdateHeaderMerge();
+        return $xeTable.$nextTick().then(() => {
+            return updateStyle($xeTable);
+        });
+    },
+    /**
+     * 移除表头单元格合并 [{row:Row|number, col:ColumnInfo|number}]
+     */
+    removeMergeHeaderCells(merges) {
+        const $xeTable = this;
+        const rest = removeHeaderMerges($xeTable, merges);
+        $xeTable.handleUpdateHeaderMerge();
+        return $xeTable.$nextTick().then(() => {
+            updateStyle($xeTable);
+            return rest;
+        });
+    },
+    /**
+     * 获取所有被合并的表头单元格
+     */
+    getMergeHeaderCells() {
+        const $xeTable = this;
+        const internalData = $xeTable;
+        return internalData.mergeHeaderList.slice(0);
+    },
+    /**
+     * 清除所有表头单元格合并
+     */
+    clearMergeHeaderCells() {
+        const $xeTable = this;
+        const reactData = $xeTable;
+        const internalData = $xeTable;
+        internalData.mergeHeaderList = [];
+        internalData.mergeHeaderMaps = {};
+        internalData.mergeHeaderCellMaps = {};
+        reactData.mergeHeadFlag++;
+        return $xeTable.$nextTick().then(() => {
+            return updateStyle($xeTable);
+        });
+    },
+    setMergeFooterCells(merges) {
         const $xeTable = this;
         const props = $xeTable;
         if (props.footerSpanMethod) {
-            errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+            errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
         }
         handleFooterMerge($xeTable, merges);
         $xeTable.handleUpdateFooterMerge();
         return $xeTable.$nextTick().then(() => {
-            $xeTable.updateCellAreas();
             return updateStyle($xeTable);
         });
     },
-    removeMergeFooterItems(merges) {
+    setMergeFooterItems(merges) {
+        const $xeTable = this;
+        // errLog('vxe.error.delFunc', ['setMergeFooterItems', 'setMergeFooterCells'])
+        return $xeTable.setMergeFooterCells(merges);
+    },
+    removeMergeFooterCells(merges) {
         const $xeTable = this;
         const props = $xeTable;
         if (props.footerSpanMethod) {
-            errLog('vxe.error.errConflicts', ['merge-footer-items', 'footer-span-method']);
+            errLog('vxe.error.errConflicts', ['merge-footer-cells | merge-footer-items', 'footer-span-method']);
         }
         const rest = removeFooterMerges($xeTable, merges);
         $xeTable.handleUpdateFooterMerge();
         return $xeTable.$nextTick().then(() => {
-            $xeTable.updateCellAreas();
             updateStyle($xeTable);
             return rest;
         });
     },
+    removeMergeFooterItems(merges) {
+        const $xeTable = this;
+        // errLog('vxe.error.delFunc', ['removeMergeFooterItems', 'removeMergeFooterCells'])
+        return $xeTable.removeMergeFooterCells(merges);
+    },
     /**
      * 获取所有被合并的表尾
      */
-    getMergeFooterItems() {
+    getMergeFooterCells() {
         const $xeTable = this;
         const internalData = $xeTable;
         return internalData.mergeFooterList.slice(0);
     },
+    getMergeFooterItems() {
+        const $xeTable = this;
+        // errLog('vxe.error.delFunc', ['getMergeFooterItems', 'getMergeFooterCells'])
+        return $xeTable.getMergeFooterCells();
+    },
     /**
      * 清除所有表尾合并
      */
-    clearMergeFooterItems() {
+    clearMergeFooterCells() {
         const $xeTable = this;
         const reactData = $xeTable;
         const internalData = $xeTable;
@@ -10969,6 +11458,11 @@ const Methods = {
             return updateStyle($xeTable);
         });
     },
+    clearMergeFooterItems() {
+        const $xeTable = this;
+        // errLog('vxe.error.delFunc', ['clearMergeFooterItems', 'clearMergeFooterCells'])
+        return $xeTable.clearMergeFooterCells();
+    },
     handleUpdateAggData() {
         const $xeTable = this;
         const internalData = $xeTable;
@@ -11001,9 +11495,7 @@ const Methods = {
     // 已废弃，使用 dispatchEvent
     emitEvent(type, params, evnt) {
         const $xeTable = this;
-        const $xeGrid = $xeTable.$xeGrid;
-        const $xeGantt = $xeTable.$xeGantt;
-        $xeTable.$emit(type, createEvent(evnt, { $table: $xeTable, $grid: $xeGrid, $gantt: $xeGantt, $event: evnt }));
+        $xeTable.dispatchEvent(type, params, evnt);
     },
     focus() {
         this.isActivated = true;