vxe-table 4.16.0 → 4.16.2

package/packages/table/src/table.ts

@@ -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'
@@ -40,6 +41,11 @@ const customStorageKey = 'VXE_CUSTOM_STORE'
 const maxYHeight = 5e6
 const maxXWidth = 5e6
 
+let crossTableDragRowObj: {
+  $oldTable: VxeTableConstructor & VxeTablePrivateMethods
+  $newTable: (VxeTableConstructor & VxeTablePrivateMethods) | null
+} | null = null
+
 export default defineVxeComponent({
   name: 'VxeTable',
   props: tableProps,
@@ -62,6 +68,8 @@ export default defineVxeComponent({
 
     const { computeSize } = useFns.useSize(props)
 
+    const crossTableDragRowInfo = getCrossTableDragRowInfo()
+
     const reactData = reactive<TableReactData>({
       // 低性能的静态列
       staticColumns: [],
@@ -274,6 +282,8 @@ export default defineVxeComponent({
       pendingRowFlag: 1,
       insertRowFlag: 1,
       removeRowFlag: 1,
+
+      mergeHeadFlag: 1,
       mergeBodyFlag: 1,
       mergeFootFlag: 1,
 
@@ -302,9 +312,9 @@ export default defineVxeComponent({
 
       isCustomStatus: false,
 
-      isDragRowMove: false,
+      isCrossDragRow: false,
       dragRow: null,
-      isDragColMove: false,
+      isCrossDragCol: false,
       dragCol: null,
       dragTipText: '',
 
@@ -1241,16 +1251,62 @@ export default defineVxeComponent({
       }
     }
 
-    const handleUpdateMergeFooterCells = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
-      internalData.mergeFooterList = []
-      internalData.mergeFooterMaps = {}
-      internalData.mergeFooterCellMaps = {}
-      $xeTable.setMergeFooterItems(merges)
+    const removeBodyMerges = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+      const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData
+      const rest: VxeTableDefines.MergeItem[] = []
+      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: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+    const handleUpdateMergeHeaderCells = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+      internalData.mergeHeaderList = []
+      internalData.mergeHeaderMaps = {}
+      internalData.mergeHeaderCellMaps = {}
+      $xeTable.setMergeHeaderCells(merges)
+    }
+
+    const handleHeaderMerge = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
       const { footerTableData } = reactData
-      const { mergeFooterList, mergeFooterMaps, fullColumnIdData } = internalData
+      const { mergeHeaderList, mergeHeaderMaps, fullColumnIdData } = internalData
       if (merges) {
         const { visibleColumn } = internalData
         if (!XEUtils.isArray(merges)) {
@@ -1275,7 +1331,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
@@ -1292,8 +1348,8 @@ export default defineVxeComponent({
                   _rowspan: rowspan,
                   _colspan: colspan
                 }
-                mergeFooterMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem
-                mergeFooterList.push(mergeItem)
+                mergeHeaderMaps[`${mergeRowIndex}:${mergeColumnIndex}`] = mergeItem
+                mergeHeaderList.push(mergeItem)
               }
             }
           }
@@ -1301,27 +1357,17 @@ export default defineVxeComponent({
       }
     }
 
-    const removeBodyMerges = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
-      const { mergeBodyList, fullColumnIdData, fullAllDataRowIdData, mergeBodyMaps } = internalData
+    const removeHeaderMerges = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+      const { mergeHeaderList, fullColumnIdData, mergeHeaderMaps } = internalData
       const rest: VxeTableDefines.MergeItem[] = []
       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
           } else {
@@ -1331,14 +1377,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}`]
               }
             }
           }
@@ -1347,6 +1393,66 @@ export default defineVxeComponent({
       return rest
     }
 
+    const handleUpdateMergeFooterCells = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+      internalData.mergeFooterList = []
+      internalData.mergeFooterMaps = {}
+      internalData.mergeFooterCellMaps = {}
+      $xeTable.setMergeFooterCells(merges)
+    }
+
+    const handleFooterMerge = (merges: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
+      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: VxeTableDefines.MergeOptions | VxeTableDefines.MergeOptions[]) => {
       const { mergeFooterList, fullColumnIdData, mergeFooterMaps } = internalData
       const rest: VxeTableDefines.MergeItem[] = []
@@ -1454,8 +1560,22 @@ export default defineVxeComponent({
     }
 
     const calcTableHeight = (key: 'height' | 'minHeight' | 'maxHeight') => {
+      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') {
@@ -2318,22 +2438,27 @@ export default defineVxeComponent({
         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
@@ -2375,7 +2500,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
@@ -2387,7 +2512,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) {
@@ -2398,7 +2523,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
@@ -3106,10 +3231,18 @@ export default defineVxeComponent({
       }
     }
 
+    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)
       }
     }
 
@@ -3561,6 +3694,10 @@ export default defineVxeComponent({
 
         handleReserveStatus()
         $xeTable.checkSelectionStatus()
+        $xeTable.dispatchEvent('data-change', {
+          visibleColumn: internalData.visibleColumn,
+          visibleData: internalData.afterFullData
+        }, null)
         return new Promise<void>(resolve => {
           nextTick()
             .then(() => handleRecalculateStyle(false, false, false))
@@ -3623,6 +3760,7 @@ export default defineVxeComponent({
       handleDefaultTreeExpand()
       handleDefaultRowGroupExpand()
       handleDefaultMergeCells()
+      handleDefaultMergeHeaderItems()
       handleDefaultMergeFooterItems()
       nextTick(() => setTimeout(() => $xeTable.recalculate()))
     }
@@ -5079,7 +5217,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
       },
       /**
        * 获取表格的全量列
@@ -6945,6 +7085,10 @@ export default defineVxeComponent({
         }
         reactData.footerTableData = footData
         $xeTable.handleUpdateFooterMerge()
+        $xeTable.dispatchEvent('footer-data-change', {
+          visibleColumn: internalData.visibleColumn,
+          footData
+        }, null)
         return nextTick()
       },
       /**
@@ -7012,39 +7156,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 = {}
@@ -7053,6 +7243,10 @@ export default defineVxeComponent({
           return updateStyle()
         })
       },
+      clearMergeFooterItems () {
+        // errLog('vxe.error.delFunc', ['clearMergeFooterItems', 'clearMergeFooterCells'])
+        return $xeTable.clearMergeFooterCells()
+      },
       updateCellAreas () {
         const { mouseConfig } = props
         const mouseOpts = computeMouseOpts.value
@@ -7776,12 +7970,18 @@ 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
       }
@@ -7973,6 +8173,25 @@ export default defineVxeComponent({
       }
     }
 
+    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 事件
@@ -9069,6 +9288,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)
@@ -10010,6 +10234,218 @@ 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: string[] = []
+                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<HTMLElement>(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 as 'top' | 'bottom',
+              dragToChild: !!prevDragToChild,
+              offsetIndex: dragOffsetIndex as 0 | 1
+            }
+            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<any> = 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 as any,
+                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: string[] = []
+                  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<HTMLElement>(dtClss.join(','))
+                  moveRowAnimateToTb(dtTrList, -dragRowHeight)
+                }
+              })
+            })
+          }
+        }
+      },
+      hideCrossTableRowDropClearStatus () {
+        hideDropTip()
+      },
       handleRowDragDragendEvent (evnt) {
         const { treeConfig } = props
         const { fullAllDataRowIdData, prevDragToChild } = internalData
@@ -10018,7 +10454,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)
@@ -10033,21 +10478,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
@@ -10057,8 +10489,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
         }
@@ -10067,16 +10499,37 @@ 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))
@@ -10096,7 +10549,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 as HTMLElement
         const tdEl = trigger === 'cell' || trigger === 'row' ? dragEl : dragEl.parentElement?.parentElement as HTMLElement
@@ -10107,10 +10560,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)
@@ -10435,6 +10894,7 @@ export default defineVxeComponent({
         internalData.prevDragToChild = false
         reactData.dragRow = null
         reactData.dragCol = null
+        clearCrossTableDragStatus()
       },
       handleHeaderCellDragDragoverEvent (evnt) {
         const { dragCol } = reactData
@@ -10513,12 +10973,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)
@@ -10526,6 +10988,7 @@ export default defineVxeComponent({
       handleHeaderCellDragMouseupEvent () {
         clearColDropOrigin()
         hideDropTip()
+        clearCrossTableDragStatus()
         reactData.dragRow = null
         reactData.dragCol = null
       },
@@ -11428,9 +11891,10 @@ export default defineVxeComponent({
       const rTipSlot = rowDragSlots.tip || (dragConfig && dragConfig.slots ? dragConfig.slots.rowTip : null)
       const columnDragSlots = columnDragOpts.slots || {}
       const cTipSlot = columnDragSlots.tip
+      const dRow = dragRow || (rowDragOpts.isCrossTableDrag ? crossTableDragRowInfo.row : null)
 
-      if (dragRow && rTipSlot) {
-        return callSlot(rTipSlot, { row: dragRow })
+      if (dRow && rTipSlot) {
+        return callSlot(rTipSlot, { row: dRow })
       }
       if (dragCol && cTipSlot) {
         return callSlot(cTipSlot, { column: dragCol })
@@ -11444,6 +11908,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', {
@@ -11461,7 +11926,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'
@@ -11473,7 +11938,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]
@@ -11618,7 +12083,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,
@@ -11649,7 +12117,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,
@@ -11731,6 +12202,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
@@ -11750,6 +12222,11 @@ export default defineVxeComponent({
       const columnDragOpts = computeColumnDragOpts.value
       const scrollbarXToTop = computeScrollbarXToTop.value
       const scrollbarYToLeft = computeScrollbarYToLeft.value
+      const { isCrossTableDrag } = rowDragOpts
+      const rwOns: Record<string, any> = {}
+      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'}`, {
@@ -11811,7 +12288,8 @@ export default defineVxeComponent({
         ]),
         h('div', {
           key: 'tw',
-          class: 'vxe-table--render-wrapper'
+          class: 'vxe-table--render-wrapper',
+          ...rwOns
         }, scrollbarXToTop
           ? [
               renderScrollX(),
@@ -12137,15 +12615,33 @@ export default defineVxeComponent({
       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) => {
@@ -12240,6 +12736,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'])
@@ -12344,7 +12841,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'])