vxe-table 4.16.0 → 4.16.2

package/es/table/src/table.js

@@ -8,6 +8,7 @@ import { createInternalData, getRowUniqueId, clearTableAllStatus, getColumnList,
 import { getSlotVNs } from '../../ui/src/vn';
 import { moveRowAnimateToTb, clearRowAnimate, moveColAnimateToLr, clearColAnimate } from './anime';
 import { warnLog, errLog } from '../../ui/src/log';
+import { getCrossTableDragRowInfo } from './store';
 import Cell from './cell';
 import TableBodyComponent from './body';
 import TableHeaderComponent from './header';
@@ -32,6 +33,7 @@ const supportMaxRow = 5e6;
 const customStorageKey = 'VXE_CUSTOM_STORE';
 const maxYHeight = 5e6;
 const maxXWidth = 5e6;
+let crossTableDragRowObj = null;
 export default defineVxeComponent({
     name: 'VxeTable',
     props: tableProps,
@@ -48,6 +50,7 @@ export default defineVxeComponent({
         const $xeGantt = inject('$xeGantt', null);
         const $xeGGWrapper = $xeGrid || $xeGantt;
         const { computeSize } = useFns.useSize(props);
+        const crossTableDragRowInfo = getCrossTableDragRowInfo();
         const reactData = reactive({
             // 低性能的静态列
             staticColumns: [],
@@ -257,6 +260,7 @@ export default defineVxeComponent({
             pendingRowFlag: 1,
             insertRowFlag: 1,
             removeRowFlag: 1,
+            mergeHeadFlag: 1,
             mergeBodyFlag: 1,
             mergeFootFlag: 1,
             rowHeightStore: {
@@ -279,9 +283,9 @@ export default defineVxeComponent({
             resizeHeightFlag: 1,
             resizeWidthFlag: 1,
             isCustomStatus: false,
-            isDragRowMove: false,
+            isCrossDragRow: false,
             dragRow: null,
-            isDragColMove: false,
+            isCrossDragCol: false,
             dragCol: null,
             dragTipText: '',
             isDragResize: false,
@@ -1123,15 +1127,62 @@ export default defineVxeComponent({
                 });
             }
         };
-        const handleUpdateMergeFooterCells = (merges) => {
-            internalData.mergeFooterList = [];
-            internalData.mergeFooterMaps = {};
-            internalData.mergeFooterCellMaps = {};
-            $xeTable.setMergeFooterItems(merges);
+        const removeBodyMerges = (merges) => {
+            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;
         };
-        const handleFooterMerge = (merges) => {
+        const handleUpdateMergeHeaderCells = (merges) => {
+            internalData.mergeHeaderList = [];
+            internalData.mergeHeaderMaps = {};
+            internalData.mergeHeaderCellMaps = {};
+            $xeTable.setMergeHeaderCells(merges);
+        };
+        const handleHeaderMerge = (merges) => {
             const { footerTableData } = reactData;
-            const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData;
+            const { mergeHeaderList, mergeHeaderMaps, fullColumnIdData } = internalData;
             if (merges) {
                 const { visibleColumn } = internalData;
                 if (!XEUtils.isArray(merges)) {
@@ -1157,7 +1208,7 @@ export default defineVxeComponent({
                         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;
@@ -1175,36 +1226,25 @@ export default defineVxeComponent({
                                     _rowspan: rowspan,
                                     _colspan: colspan
                                 };
-                                mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
-                                mergeFooterList.push(mergeItem);
+                                mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem;
+                                mergeHeaderList.push(mergeItem);
                             }
                         }
                     }
                 });
             }
         };
-        const removeBodyMerges = (merges) => {
-            const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData;
+        const removeHeaderMerges = (merges) => {
+            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;
                     }
@@ -1215,14 +1255,14 @@ export default defineVxeComponent({
                             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}`];
                             }
                         }
                     }
@@ -1230,6 +1270,66 @@ export default defineVxeComponent({
             }
             return rest;
         };
+        const handleUpdateMergeFooterCells = (merges) => {
+            internalData.mergeFooterList = [];
+            internalData.mergeFooterMaps = {};
+            internalData.mergeFooterCellMaps = {};
+            $xeTable.setMergeFooterCells(merges);
+        };
+        const handleFooterMerge = (merges) => {
+            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);
+                            }
+                        }
+                    }
+                });
+            }
+        };
         const removeFooterMerges = (merges) => {
             const { mergeFooterList, fullColumnIdData, mergeFooterMaps } = internalData;
             const rest = [];
@@ -1335,8 +1435,23 @@ export default defineVxeComponent({
             });
         };
         const calcTableHeight = (key) => {
+            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') {
@@ -2190,22 +2305,28 @@ export default defineVxeComponent({
                 emptyPlaceholderElem.style.top = `${tHeaderHeight}px`;
                 emptyPlaceholderElem.style.height = bodyWrapperElem ? `${bodyWrapperElem.offsetHeight - osbHeight}px` : '';
             }
+            const scrollbarXConf = scrollbarOpts.x || {};
             const scrollbarXToTop = computeScrollbarXToTop.value;
+            const scrollbarYConf = scrollbarOpts.y || {};
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
             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;
@@ -2244,7 +2365,7 @@ export default defineVxeComponent({
             }
             if (xRightCornerEl) {
                 xRightCornerEl.style.width = scrollbarXToTop ? '' : `${osbWidth}px`;
-                xRightCornerEl.style.display = scrollbarXToTop ? '' : (overflowX && osbHeight ? 'block' : '');
+                xRightCornerEl.style.display = scrollbarXToTop ? '' : (xScrollbarVisible === 'visible' ? 'block' : '');
             }
             const scrollYVirtualEl = refScrollYVirtualElem.value;
             if (scrollYVirtualEl) {
@@ -2255,7 +2376,7 @@ export default defineVxeComponent({
             const yTopCornerEl = refScrollYTopCornerElem.value;
             if (yTopCornerEl) {
                 yTopCornerEl.style.height = `${tHeaderHeight}px`;
-                yTopCornerEl.style.display = overflowY && tHeaderHeight ? 'block' : '';
+                yTopCornerEl.style.display = tHeaderHeight && yScrollbarVisible === 'visible' ? 'block' : '';
             }
             const yWrapperEl = refScrollYWrapperElem.value;
             if (yWrapperEl) {
@@ -2266,7 +2387,7 @@ export default defineVxeComponent({
             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 = refRowExpandElem.value;
             if (rowExpandEl) {
@@ -2956,10 +3077,17 @@ export default defineVxeComponent({
                 $xeTable.setMergeCells(mergeCells);
             }
         };
+        const handleDefaultMergeHeaderItems = () => {
+            const { mergeHeaderCells } = props;
+            if (mergeHeaderCells) {
+                $xeTable.setMergeHeaderCells(mergeHeaderCells);
+            }
+        };
         const handleDefaultMergeFooterItems = () => {
-            const { mergeFooterItems } = props;
-            if (mergeFooterItems) {
-                $xeTable.setMergeFooterItems(mergeFooterItems);
+            const { mergeFooterCells, mergeFooterItems } = props;
+            const mFooterCells = mergeFooterCells || mergeFooterItems;
+            if (mFooterCells) {
+                $xeTable.setMergeFooterCells(mFooterCells);
             }
         };
         // 计算可视渲染相关数据
@@ -3396,6 +3524,10 @@ export default defineVxeComponent({
                 }
                 handleReserveStatus();
                 $xeTable.checkSelectionStatus();
+                $xeTable.dispatchEvent('data-change', {
+                    visibleColumn: internalData.visibleColumn,
+                    visibleData: internalData.afterFullData
+                }, null);
                 return new Promise(resolve => {
                     nextTick()
                         .then(() => handleRecalculateStyle(false, false, false))
@@ -3458,6 +3590,7 @@ export default defineVxeComponent({
             handleDefaultTreeExpand();
             handleDefaultRowGroupExpand();
             handleDefaultMergeCells();
+            handleDefaultMergeHeaderItems();
             handleDefaultMergeFooterItems();
             nextTick(() => setTimeout(() => $xeTable.recalculate()));
         };
@@ -4903,7 +5036,9 @@ export default defineVxeComponent({
                         }
                     }
                 }
-                return $xeTable.handleRowDragSwapEvent(null, true, dragRow, prevDragRow, dragPos || defPos, dragToChild === true);
+                const rest = $xeTable.handleRowDragSwapEvent(null, true, dragRow, prevDragRow, dragPos || defPos, dragToChild === true);
+                clearRowDragData();
+                return rest;
             },
             /**
              * 获取表格的全量列
@@ -6774,6 +6909,10 @@ export default defineVxeComponent({
                 }
                 reactData.footerTableData = footData;
                 $xeTable.handleUpdateFooterMerge();
+                $xeTable.dispatchEvent('footer-data-change', {
+                    visibleColumn: internalData.visibleColumn,
+                    footData
+                }, null);
                 return nextTick();
             },
             /**
@@ -6841,39 +6980,85 @@ export default defineVxeComponent({
                     return updateStyle();
                 });
             },
-            setMergeFooterItems(merges) {
+            setMergeHeaderCells(merges) {
+                handleHeaderMerge(merges);
+                $xeTable.handleUpdateHeaderMerge();
+                return nextTick().then(() => {
+                    return updateStyle();
+                });
+            },
+            /**
+             * 移除表头单元格合并 [{row:Row|number, col:ColumnInfo|number}]
+             */
+            removeMergeHeaderCells(merges) {
+                const rest = removeHeaderMerges(merges);
+                $xeTable.handleUpdateHeaderMerge();
+                return nextTick().then(() => {
+                    updateStyle();
+                    return rest;
+                });
+            },
+            /**
+             * 获取所有被合并的表头单元格
+             */
+            getMergeHeaderCells() {
+                return internalData.mergeHeaderList.slice(0);
+            },
+            /**
+             * 清除所有表头单元格合并
+             */
+            clearMergeHeaderCells() {
+                internalData.mergeHeaderList = [];
+                internalData.mergeHeaderMaps = {};
+                internalData.mergeHeaderCellMaps = {};
+                reactData.mergeHeadFlag++;
+                return nextTick().then(() => {
+                    return updateStyle();
+                });
+            },
+            setMergeFooterCells(merges) {
                 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(merges);
                 $xeTable.handleUpdateFooterMerge();
                 return nextTick().then(() => {
-                    $xeTable.updateCellAreas();
                     return updateStyle();
                 });
             },
-            removeMergeFooterItems(merges) {
+            setMergeFooterItems(merges) {
+                // errLog('vxe.error.delFunc', ['setMergeFooterItems', 'setMergeFooterCells'])
+                return $xeTable.setMergeFooterCells(merges);
+            },
+            removeMergeFooterCells(merges) {
                 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(merges);
                 $xeTable.handleUpdateFooterMerge();
                 return nextTick().then(() => {
-                    $xeTable.updateCellAreas();
                     updateStyle();
                     return rest;
                 });
             },
+            removeMergeFooterItems(merges) {
+                // errLog('vxe.error.delFunc', ['removeMergeFooterItems', 'removeMergeFooterCells'])
+                return $xeTable.removeMergeFooterCells(merges);
+            },
             /**
              * 获取所有被合并的表尾
              */
-            getMergeFooterItems() {
+            getMergeFooterCells() {
                 return internalData.mergeFooterList.slice(0);
             },
+            getMergeFooterItems() {
+                // errLog('vxe.error.delFunc', ['getMergeFooterItems', 'getMergeFooterCells'])
+                return $xeTable.getMergeFooterCells();
+            },
             /**
              * 清除所有表尾合并
              */
-            clearMergeFooterItems() {
+            clearMergeFooterCells() {
                 internalData.mergeFooterList = [];
                 internalData.mergeFooterMaps = {};
                 internalData.mergeFooterCellMaps = {};
@@ -6882,6 +7067,10 @@ export default defineVxeComponent({
                     return updateStyle();
                 });
             },
+            clearMergeFooterItems() {
+                // errLog('vxe.error.delFunc', ['clearMergeFooterItems', 'clearMergeFooterCells'])
+                return $xeTable.clearMergeFooterCells();
+            },
             updateCellAreas() {
                 const { mouseConfig } = props;
                 const mouseOpts = computeMouseOpts.value;
@@ -7627,12 +7816,17 @@ export default defineVxeComponent({
                 }
             }
         };
+        const clearCrossTableDragStatus = () => {
+            crossTableDragRowObj = null;
+            crossTableDragRowInfo.row = null;
+        };
         const clearDragStatus = () => {
             const { dragRow, dragCol } = reactData;
             if (dragRow || dragCol) {
                 clearColDropOrigin();
                 clearRowDropOrigin();
                 hideDropTip();
+                clearCrossTableDragStatus();
                 reactData.dragRow = null;
                 reactData.dragCol = null;
             }
@@ -7821,6 +8015,24 @@ export default defineVxeComponent({
                 cdLineEl.style.display = '';
             }
         };
+        const clearRowDragData = () => {
+            let wrapperEl = refElem.value;
+            const dtClss = ['.vxe-body--row'];
+            if ($xeGantt) {
+                const { refGanttContainerElem } = $xeGantt.getRefMaps();
+                const ganttContainerElem = refGanttContainerElem.value;
+                if (ganttContainerElem) {
+                    wrapperEl = ganttContainerElem;
+                }
+                dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
+            }
+            hideDropTip();
+            clearRowDropOrigin();
+            clearRowAnimate(wrapperEl, dtClss);
+            internalData.prevDragToChild = false;
+            reactData.dragRow = null;
+            reactData.dragCol = null;
+        };
         /**
          * 处理显示 tooltip
          * @param {Event} evnt 事件
@@ -8922,6 +9134,11 @@ export default defineVxeComponent({
                 internalData.mergeBodyCellMaps = buildMergeData(mergeBodyList);
                 reactData.mergeBodyFlag++;
             },
+            handleUpdateHeaderMerge() {
+                const { mergeHeaderList } = internalData;
+                internalData.mergeHeaderCellMaps = buildMergeData(mergeHeaderList);
+                reactData.mergeHeadFlag++;
+            },
             handleUpdateFooterMerge() {
                 const { mergeFooterList } = internalData;
                 internalData.mergeFooterCellMaps = buildMergeData(mergeFooterList);
@@ -9860,6 +10077,221 @@ export default defineVxeComponent({
                 }
                 return Promise.resolve(errRest);
             },
+            /**
+             * 处理跨表拖拽完成
+             */
+            handleCrossTableRowDragFinishEvent(evnt) {
+                const { tableData } = reactData;
+                const { fullAllDataRowIdData } = internalData;
+                const rowOpts = computeRowOpts.value;
+                const cellOpts = computeCellOpts.value;
+                const defaultRowHeight = computeDefaultRowHeight.value;
+                const rowDragOpts = computeRowDragOpts.value;
+                const { animation, isCrossTableDrag } = rowDragOpts;
+                const treeOpts = computeTreeOpts.value;
+                const { mapChildrenField } = treeOpts;
+                const el = refElem.value;
+                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 { refGanttContainerElem } = $xeGantt.getRefMaps();
+                                    const ganttContainerElem = refGanttContainerElem.value;
+                                    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);
+                            }
+                        });
+                        dispatchEvent('row-remove-dragend', {
+                            row: dragRow
+                        }, evnt);
+                        clearRowDragData();
+                        clearCrossTableDragStatus();
+                    }
+                }
+            },
+            /**
+             * 处理跨表拖至新的空表
+             */
+            handleCrossTableRowDragoverEmptyEvent(evnt) {
+                const { tableData } = reactData;
+                const rowDragOpts = computeRowDragOpts.value;
+                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 { treeConfig } = props;
+                const { prevDragRow, prevDragPos, prevDragToChild } = internalData;
+                const rowDragOpts = computeRowDragOpts.value;
+                const { animation, isSelfToChildDrag, isCrossTableDrag, dragEndMethod, dragToChildMethod } = rowDragOpts;
+                const rowOpts = computeRowOpts.value;
+                const cellOpts = computeCellOpts.value;
+                const defaultRowHeight = computeDefaultRowHeight.value;
+                const treeOpts = computeTreeOpts.value;
+                const { parentField, mapChildrenField } = treeOpts;
+                const childrenField = treeOpts.children || treeOpts.childrenField;
+                // 跨表拖拽
+                if (isCrossTableDrag && crossTableDragRowObj && crossTableDragRowInfo) {
+                    const { row: oldRow } = crossTableDragRowInfo;
+                    const { $oldTable } = crossTableDragRowObj;
+                    const el = refElem.value;
+                    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);
+                                }
+                            }
+                            dispatchEvent('row-insert-dragend', {
+                                oldRow,
+                                newRow: prevDragRow,
+                                dragRow,
+                                dragPos: prevDragPos,
+                                dragToChild: isDragToChildFlag,
+                                offsetIndex: dragOffsetIndex
+                            }, evnt);
+                            clearRowDragData();
+                            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 { refGanttContainerElem } = $xeGantt.getRefMaps();
+                                        const ganttContainerElem = refGanttContainerElem.value;
+                                        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() {
+                hideDropTip();
+            },
             handleRowDragDragendEvent(evnt) {
                 const { treeConfig } = props;
                 const { fullAllDataRowIdData, prevDragToChild } = internalData;
@@ -9868,7 +10300,16 @@ export default defineVxeComponent({
                 const { lazy } = treeOpts;
                 const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
                 const { prevDragRow, prevDragPos } = internalData;
-                let wrapperEl = refElem.value;
+                const rowDragOpts = computeRowDragOpts.value;
+                const { isCrossTableDrag } = rowDragOpts;
+                // 跨表拖拽
+                if (isCrossTableDrag && crossTableDragRowObj) {
+                    const { $newTable } = crossTableDragRowObj;
+                    if ($newTable && $newTable.xID !== $xeTable.xID) {
+                        $newTable.handleCrossTableRowDragInsertEvent(evnt);
+                        return;
+                    }
+                }
                 if (treeConfig && lazy && prevDragToChild) {
                     // 懒加载
                     const newRowid = getRowid($xeTable, prevDragRow);
@@ -9885,21 +10326,8 @@ export default defineVxeComponent({
                 else {
                     $xeTable.handleRowDragSwapEvent(evnt, true, dragRow, prevDragRow, prevDragPos, prevDragToChild);
                 }
-                const dtClss = ['.vxe-body--row'];
-                if ($xeGantt) {
-                    const { refGanttContainerElem } = $xeGantt.getRefMaps();
-                    const ganttContainerElem = refGanttContainerElem.value;
-                    if (ganttContainerElem) {
-                        wrapperEl = ganttContainerElem;
-                    }
-                    dtClss.push('.vxe-gantt-view--body-row', '.vxe-gantt-view--chart-row');
-                }
-                hideDropTip();
-                clearRowDropOrigin();
-                clearRowAnimate(wrapperEl, dtClss);
-                internalData.prevDragToChild = false;
-                reactData.dragRow = null;
-                reactData.dragCol = null;
+                clearRowDragData();
+                clearCrossTableDragStatus();
             },
             handleRowDragDragoverEvent(evnt) {
                 const { treeConfig } = props;
@@ -9909,8 +10337,8 @@ export default defineVxeComponent({
                 const { lazy, transform, parentField } = treeOpts;
                 const hasChildField = treeOpts.hasChild || treeOpts.hasChildField;
                 const rowDragOpts = computeRowDragOpts.value;
-                const { isPeerDrag, isCrossDrag, isToChildDrag } = rowDragOpts;
-                if (!dragRow) {
+                const { isPeerDrag, isCrossDrag, isToChildDrag, isCrossTableDrag } = rowDragOpts;
+                if (!dragRow && !(isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj)) {
                     evnt.preventDefault();
                     return;
                 }
@@ -9919,16 +10347,38 @@ export default defineVxeComponent({
                 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 && (isCrossDrag && isToChildDrag) && isControlKey);
                     internalData.prevDragRow = row;
                     internalData.prevDragPos = dragPos;
+                    // 跨表拖拽
+                    if (isCrossTableDrag && (!treeConfig || isCrossDrag) && crossTableDragRowObj) {
+                        const { $oldTable, $newTable } = crossTableDragRowObj;
+                        if ($oldTable) {
+                            const oldTableReactData = $oldTable.reactData;
+                            if ($oldTable.xID === $xeTable.xID) {
+                                if ($newTable) {
+                                    $newTable.hideCrossTableRowDropClearStatus();
+                                }
+                                reactData.isCrossDragRow = false;
+                                oldTableReactData.isCrossDragRow = false;
+                                crossTableDragRowObj.$newTable = null;
+                            }
+                            else {
+                                $oldTable.hideCrossTableRowDropClearStatus();
+                                oldTableReactData.isCrossDragRow = true;
+                                reactData.dragTipText = oldTableReactData.dragTipText;
+                                crossTableDragRowObj.$newTable = $xeTable;
+                                showDropTip(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))) {
@@ -9948,7 +10398,7 @@ export default defineVxeComponent({
                 evnt.stopPropagation();
                 const { dragConfig } = props;
                 const rowDragOpts = computeRowDragOpts.value;
-                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;
@@ -9959,10 +10409,16 @@ export default defineVxeComponent({
                     trEl.draggable = false;
                     reactData.dragRow = null;
                     reactData.dragCol = null;
+                    clearCrossTableDragStatus();
                     hideDropTip();
                     return;
                 }
+                if (isCrossTableDrag) {
+                    crossTableDragRowInfo.row = row;
+                    crossTableDragRowObj = { $oldTable: $xeTable, $newTable: null };
+                }
                 reactData.dragRow = row;
+                reactData.isCrossDragRow = false;
                 reactData.dragCol = null;
                 trEl.draggable = true;
                 updateRowDropOrigin(row);
@@ -10273,6 +10729,7 @@ export default defineVxeComponent({
                 internalData.prevDragToChild = false;
                 reactData.dragRow = null;
                 reactData.dragCol = null;
+                clearCrossTableDragStatus();
             },
             handleHeaderCellDragDragoverEvent(evnt) {
                 const { dragCol } = reactData;
@@ -10351,12 +10808,14 @@ export default defineVxeComponent({
                     thEl.draggable = false;
                     reactData.dragRow = null;
                     reactData.dragCol = null;
+                    clearCrossTableDragStatus();
                     hideDropTip();
                     return;
                 }
                 reactData.dragCol = column;
                 reactData.dragRow = null;
                 thEl.draggable = true;
+                clearCrossTableDragStatus();
                 updateColDropOrigin(column);
                 updateColDropTipContent(thEl);
                 dispatchEvent('column-dragstart', params, evnt);
@@ -10364,6 +10823,7 @@ export default defineVxeComponent({
             handleHeaderCellDragMouseupEvent() {
                 clearColDropOrigin();
                 hideDropTip();
+                clearCrossTableDragStatus();
                 reactData.dragRow = null;
                 reactData.dragCol = null;
             },
@@ -11252,8 +11712,9 @@ export default defineVxeComponent({
             const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null);
             const columnDragSlots = columnDragOpts.slots || {};
             const cTipSlot = columnDragSlots.tip;
-            if (dragRow && rTipSlot) {
-                return callSlot(rTipSlot, { row: dragRow });
+            const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null);
+            if (dRow && rTipSlot) {
+                return callSlot(rTipSlot, { row: dRow });
             }
             if (dragCol && cTipSlot) {
                 return callSlot(cTipSlot, { column: dragCol });
@@ -11266,6 +11727,7 @@ export default defineVxeComponent({
             const columnOpts = computeColumnOpts.value;
             const rowDragOpts = computeRowDragOpts.value;
             const columnDragOpts = computeColumnDragOpts.value;
+            const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null);
             if (rowOpts.drag || columnOpts.drag) {
                 return h('div', {
                     class: 'vxe-table--drag-wrapper'
@@ -11282,7 +11744,7 @@ export default defineVxeComponent({
                                 'is--guides': columnDragOpts.showGuidesStatus
                             }]
                     }),
-                    (dragRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
+                    (dRow && rowDragOpts.showDragTip) || (dragCol && columnDragOpts.showDragTip)
                         ? h('div', {
                             ref: refDragTipElem,
                             class: 'vxe-table--drag-sort-tip'
@@ -11294,7 +11756,7 @@ export default defineVxeComponent({
                                     class: 'vxe-table--drag-sort-tip-status'
                                 }, [
                                     h('span', {
-                                        class: ['vxe-table--drag-sort-tip-normal-status', dragRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
+                                        class: ['vxe-table--drag-sort-tip-normal-status', dRow ? getIcon().TABLE_DRAG_STATUS_ROW : getIcon().TABLE_DRAG_STATUS_COLUMN]
                                     }),
                                     h('span', {
                                         class: ['vxe-table--drag-sort-tip-sub-status', getIcon().TABLE_DRAG_STATUS_SUB_ROW]
@@ -11435,7 +11897,10 @@ export default defineVxeComponent({
                             ref: refScrollXSpaceElem,
                             class: 'vxe-table--scroll-x-space'
                         })
-                    ])
+                    ]),
+                    h('div', {
+                        class: 'vxe-table--scroll-x-handle-appearance'
+                    })
                 ]),
                 h('div', {
                     ref: refScrollXRightCornerElem,
@@ -11465,7 +11930,10 @@ export default defineVxeComponent({
                             ref: refScrollYSpaceElem,
                             class: 'vxe-table--scroll-y-space'
                         })
-                    ])
+                    ]),
+                    h('div', {
+                        class: 'vxe-table--scroll-y-handle-appearance'
+                    })
                 ]),
                 h('div', {
                     ref: refScrollYBottomCornerElem,
@@ -11543,6 +12011,7 @@ export default defineVxeComponent({
             const { teleportToWrapperElem } = internalData;
             const { leftList, rightList } = columnStore;
             const loadingSlot = slots.loading;
+            const rowDragOpts = computeRowDragOpts.value;
             const tableTipConfig = computeTableTipConfig.value;
             const validTipConfig = computeValidTipConfig.value;
             const validOpts = computeValidOpts.value;
@@ -11562,6 +12031,11 @@ export default defineVxeComponent({
             const columnDragOpts = computeColumnDragOpts.value;
             const scrollbarXToTop = computeScrollbarXToTop.value;
             const scrollbarYToLeft = computeScrollbarYToLeft.value;
+            const { isCrossTableDrag } = rowDragOpts;
+            const rwOns = {};
+            if (isCrossTableDrag && !tableData.length) {
+                rwOns.onDragover = $xeTable.handleCrossTableRowDragoverEmptyEvent;
+            }
             return h('div', {
                 ref: refElem,
                 class: ['vxe-table', 'vxe-table--render-default', `tid_${xID}`, `border--${tableBorder}`, `sx-pos--${scrollbarXToTop ? 'top' : 'bottom'}`, `sy-pos--${scrollbarYToLeft ? 'left' : 'right'}`, {
@@ -11621,10 +12095,7 @@ export default defineVxeComponent({
                         class: 'vxe-table-var-mini'
                     })
                 ]),
-                h('div', {
-                    key: 'tw',
-                    class: 'vxe-table--render-wrapper'
-                }, scrollbarXToTop
+                h('div', Object.assign({ key: 'tw', class: 'vxe-table--render-wrapper' }, rwOns), scrollbarXToTop
                     ? [
                         renderScrollX(),
                         renderBody()
@@ -11939,15 +12410,32 @@ export default defineVxeComponent({
         watch(mergeCellFlag, () => {
             handleUpdateMergeBodyCells(props.mergeCells || []);
         });
-        const mergeFooterItemFlag = ref(0);
+        const mergeHeaderItemFlag = ref(0);
+        watch(() => props.mergeHeaderCells ? props.mergeHeaderCells.length : -1, () => {
+            mergeHeaderItemFlag.value++;
+        });
+        watch(() => props.mergeHeaderCells, () => {
+            mergeHeaderItemFlag.value++;
+        });
+        watch(mergeHeaderItemFlag, () => {
+            handleUpdateMergeHeaderCells(props.mergeHeaderCells || []);
+        });
+        const mergeFooteCellFlag = ref(0);
+        watch(() => props.mergeFooterCells ? props.mergeFooterCells.length : -1, () => {
+            mergeFooteCellFlag.value++;
+        });
+        watch(() => props.mergeFooterCells, () => {
+            mergeFooteCellFlag.value++;
+        });
         watch(() => props.mergeFooterItems ? props.mergeFooterItems.length : -1, () => {
-            mergeFooterItemFlag.value++;
+            mergeFooteCellFlag.value++;
         });
         watch(() => props.mergeFooterItems, () => {
-            mergeFooterItemFlag.value++;
+            mergeFooteCellFlag.value++;
         });
-        watch(mergeFooterItemFlag, () => {
-            handleUpdateMergeFooterCells(props.mergeFooterItems || []);
+        watch(mergeFooteCellFlag, () => {
+            const mFooterCells = props.mergeFooterCells || props.mergeFooterItems;
+            handleUpdateMergeFooterCells(mFooterCells || []);
         });
         watch(computeRowGroupFields, (val) => {
             handleUpdateRowGroup(val);
@@ -12028,6 +12516,7 @@ export default defineVxeComponent({
                 const currentColumnOpts = computeCurrentColumnOpts.value;
                 const keyboardOpts = computeKeyboardOpts.value;
                 const aggregateOpts = computeAggregateOpts.value;
+                const rowDragOpts = computeRowDragOpts.value;
                 if (props.rowId) {
                     warnLog('vxe.error.delProp', ['row-id', 'row-config.keyField']);
                 }
@@ -12129,7 +12618,10 @@ export default defineVxeComponent({
                     }
                 }
                 if (treeConfig && rowOpts.drag && !treeOpts.transform) {
-                    errLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+                    errLog('vxe.error.notSupportProp', ['row-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
+                }
+                if (treeConfig && rowDragOpts.isCrossTableDrag && !rowDragOpts.isCrossDrag) {
+                    errLog('vxe.error.reqSupportProp', ['tree-config & row-drag-config.isCrossTableDrag', 'row-drag-config.isCrossDrag']);
                 }
                 if (props.dragConfig) {
                     warnLog('vxe.error.delProp', ['drag-config', 'row-drag-config']);