vxe-table 3.11.25 → 3.11.27-beta.0

package/packages/locale/lang/uk-UA.ts

@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {

package/packages/locale/lang/vi-VN.ts

@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {

package/packages/locale/lang/zh-CHT.ts

@@ -47,8 +47,8 @@ export default {
       notExp: '該瀏覽器不支援匯入/匯出功能',
       impFields: '匯入失敗，請檢查欄位名稱和資料格式是否正確',
       treeNotImp: '樹表格不支援導入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可選擴展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {

package/packages/locale/lang/zh-CN.ts

@@ -47,8 +47,8 @@ export default {
       notExp: '该浏览器不支持导入/导出功能',
       impFields: '导入失败，请检查字段名和数据格式是否正确',
       treeNotImp: '树表格不支持导入',
-      treeCrossDrag: '只能拖拽第一层级的数据',
-      treeDragChild: '父级数据不能拖拽到自己的子级中',
+      treeCrossDrag: '只能拖拽第一层级',
+      treeDragChild: '父级不能拖拽到自己的子级中',
       reqPlugin: '可选扩展插件 "{1}" https://vxeui.com/other{0}/#/{1}/install'
     },
     table: {

package/packages/table/src/body.ts

@@ -323,7 +323,7 @@ function renderColumn (h: any, _vm: any, $xetable: any, seq: any, rowid: any, fi
       getClass(className, params),
       getClass(allCellClassName, params)
     ],
-    key: columnKey || columnOpts.useKey || rowOpts.useKey ? column.id : $columnIndex,
+    key: columnKey || columnOpts.useKey || rowOpts.useKey || columnOpts.drag ? column.id : $columnIndex,
     attrs,
     style: Object.assign({
       height: cellHeight
@@ -453,7 +453,7 @@ function renderRows (h: CreateElement, _vm: any, $xeTable: any, fixedType: any,
             rowid
           },
           style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-          key: rowKey || rowOpts.useKey || rowOpts.drag || treeConfig ? rowid : $rowIndex,
+          key: rowKey || rowOpts.useKey || rowOpts.drag || columnOpts.drag || treeConfig ? rowid : $rowIndex,
           nativeOn: trOn
         }, tdVNs)
         : h('tr', {

package/packages/table/src/cell.ts

@@ -106,10 +106,10 @@ function renderHeaderCellDragIcon (h: CreateElement, params: VxeTableDefines.Cel
   const { $table, column } = params
   const columnOpts = $table.computeColumnOpts
   const columnDragOpts = $table.computeColumnDragOpts
-  const { showIcon, icon, visibleMethod, disabledMethod } = columnDragOpts
+  const { showIcon, icon, isCrossDrag, visibleMethod, disabledMethod } = columnDragOpts
   const isDisabled = disabledMethod && disabledMethod(params)
   if (columnOpts.drag && showIcon && (!visibleMethod || visibleMethod(params))) {
-    if (!(column.fixed || column.parentId)) {
+    if (!column.fixed && (isCrossDrag || !column.parentId)) {
       return h('span', {
         key: 'dg',
         class: ['vxe-cell--drag-handle', {

package/packages/table/src/column.ts

@@ -1,7 +1,8 @@
 import Cell from './cell'
+import { defineVxeComponent } from '../../ui/src/comp'
 import { assembleColumn, destroyColumn } from './util'
 
-const props = {
+export const columnProps = {
   // 列唯一主键
   colId: [String, Number],
   // 渲染类型 seq,radio,checkbox,expand,html
@@ -94,9 +95,9 @@ const props = {
   params: Object
 }
 
-const watch: any = {}
-Object.keys(props).forEach(name => {
-  watch[name] = function (value: any) {
+export const columnWatch: Record<string, any> = {}
+Object.keys(columnProps).forEach(name => {
+  columnWatch[name] = function (value: any) {
     this.columnConfig.update(name, value)
     if (this.$xetable) {
       if (name === 'filters') {
@@ -109,9 +110,9 @@ Object.keys(props).forEach(name => {
   }
 })
 
-export default {
+export default defineVxeComponent({
   name: 'VxeColumn',
-  props,
+  props: columnProps,
   provide () {
     return {
       $xecolumn: this,
@@ -126,11 +127,12 @@ export default {
       default: null
     }
   },
-  watch,
+  watch: columnWatch,
   created (this: any) {
     this.columnConfig = this.createColumn(this.$xetable, this)
   },
   mounted () {
+    this.columnConfig.slots = this.$scopedSlots
     assembleColumn(this)
   },
   destroyed () {
@@ -140,4 +142,4 @@ export default {
     return h('div', this.$slots.default)
   },
   methods: Cell
-}
+})

package/packages/table/src/group.ts

@@ -1,12 +1,46 @@
-import VxeTableColumn from './column'
+import Cell from './cell'
+import { defineVxeComponent } from '../../ui/src/comp'
+import { assembleColumn, destroyColumn } from './util'
+import { columnProps, columnWatch } from './column'
 
-export default {
+export default defineVxeComponent({
   name: 'VxeColgroup',
-  extends: VxeTableColumn,
+  props: columnProps,
   provide () {
     return {
-      xecolgroup: this,
+      $xecolumn: this,
       $xegrid: null
     }
-  }
-}
+  },
+  inject: {
+    $xetable: {
+      default: null
+    },
+    $xecolumn: {
+      default: null
+    }
+  },
+  watch: columnWatch,
+  created (this: any) {
+    this.columnConfig = this.createColumn(this.$xetable, this)
+  },
+  mounted () {
+    const { $scopedSlots } = this
+    const columnSlots: {
+      header?: any
+    } = {}
+
+    if ($scopedSlots.header) {
+      columnSlots.header = $scopedSlots.header
+    }
+    this.columnConfig.slots = columnSlots
+    assembleColumn(this)
+  },
+  destroyed () {
+    destroyColumn(this)
+  },
+  render (this: any, h: any) {
+    return h('div', this.$slots.default)
+  },
+  methods: Cell
+})

package/packages/table/src/methods.ts

@@ -7,7 +7,7 @@ import { getRowUniqueId, clearTableAllStatus, getRowkey, getRowid, rowToVisible,
 import { getSlotVNs } from '../../ui/src/vn'
 import { warnLog, errLog } from '../../ui/src/log'
 
-import type { VxeTableDefines, VxeTableEmits, ValueOf } from '../../../types'
+import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf } from '../../../types'
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
@@ -16,6 +16,8 @@ const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeU
 
 const customStorageKey = 'VXE_CUSTOM_STORE'
 
+const tpImg = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII='
+
 // 获取所有的列，排除分组
 const getColumnList = (columns: any[]) => {
   const result: any[] = []
@@ -470,11 +472,18 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
     if (cdLineEl) {
       if (showLine) {
         const thRect = thEl.getBoundingClientRect()
+        const offsetTop = Math.max(0, thRect.y - wrapperRect.y)
         cdLineEl.style.display = 'block'
+        cdLineEl.style.top = `${offsetTop}px`
         cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`
         cdLineEl.style.width = `${thRect.width}px`
-        cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`
+        if (prevDragToChild) {
+          cdLineEl.style.height = `${thRect.height}px`
+        } else {
+          cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`
+        }
         cdLineEl.setAttribute('drag-pos', dragPos)
+        cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
       } else {
         cdLineEl.style.display = ''
       }
@@ -971,12 +980,12 @@ const Methods = {
       if (!cacheItem) {
         cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 }
       }
+      cacheItem.row = row
+      cacheItem.items = items
+      cacheItem.parent = parent
+      cacheItem.level = level
+      cacheItem.index = treeConfig && parent ? -1 : index
       if (isSource) {
-        cacheItem.row = row
-        cacheItem.items = items
-        cacheItem.parent = parent
-        cacheItem.level = level
-        cacheItem.index = treeConfig && parent ? -1 : index
         fullDataRowIdMaps[rowid] = cacheItem
       }
       fullAllDataRowIdMaps[rowid] = cacheItem
@@ -1059,36 +1068,46 @@ const Methods = {
    * 牺牲数据组装的耗时，用来换取使用过程中的流畅
    */
   cacheColumnMap () {
-    const { tableFullColumn, collectColumn, fullColumnMap, showOverflow, columnOpts, rowOpts } = this
-    const fullColumnIdData: any = this.fullColumnIdData = {}
-    const fullColumnFieldData: any = this.fullColumnFieldData = {}
+    const $xeTable = this
+    const props = $xeTable
+    const reactData = $xeTable
+    const internalData = $xeTable
+
+    const { tableFullColumn, collectColumn } = internalData
+    const fullColumnIdData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnIdData = {}
+    const fullColumnFieldData: Record<string, VxeTableDefines.ColumnCacheItem> = internalData.fullColumnFieldData = {}
+    const mouseOpts = $xeTable.computeMouseOpts
+    const columnOpts = $xeTable.computeColumnOpts
+    const columnDragOpts = $xeTable.computeColumnDragOpts
+    const { isCrossDrag, isSelfToChildDrag } = columnDragOpts
+    const rowOpts = $xeTable.computeRowOpts
     const isGroup = collectColumn.some(hasChildrenList)
-    let isAllOverflow = !!showOverflow
-    let expandColumn: any
-    let treeNodeColumn: any
-    let checkboxColumn: any
-    let radioColumn: any
-    let htmlColumn: any
-    let hasFixed: any
-    const handleFunc = (column: any, index: any, items: any, path: any, parent: any) => {
+    let isAllOverflow = !!props.showOverflow
+    let expandColumn: VxeTableDefines.ColumnInfo | undefined
+    let treeNodeColumn: VxeTableDefines.ColumnInfo | undefined
+    let checkboxColumn: VxeTableDefines.ColumnInfo | undefined
+    let radioColumn: VxeTableDefines.ColumnInfo | undefined
+    let htmlColumn: VxeTableDefines.ColumnInfo | undefined
+    let hasFixed: VxeColumnPropTypes.Fixed | undefined
+    const handleFunc = (column: VxeTableDefines.ColumnInfo, index: number, items: VxeTableDefines.ColumnInfo[], path?: string[], parent?: VxeTableDefines.ColumnInfo) => {
       const { id: colid, field, fixed, type, treeNode } = column
-      const rest = { column, colid, index, items, parent: parent || null, width: 0 }
+      const rest = { $index: -1, _index: -1, column, colid, index, items, parent: parent || null, width: 0 }
       if (field) {
-        if (process.env.VUE_APP_VXE_ENV === 'development') {
-          if (fullColumnFieldData[field]) {
-            warnLog('vxe.error.colRepet', ['field', field])
-          }
+        if (fullColumnFieldData[field]) {
+          errLog('vxe.error.colRepet', ['field', field])
         }
         fullColumnFieldData[field] = rest
+      } else {
+        if (isCrossDrag || isSelfToChildDrag) {
+          errLog('vxe.error.emptyProp', ['column.field'])
+        }
       }
-
       if (!hasFixed && fixed) {
         hasFixed = fixed
       }
       if (!htmlColumn && type === 'html') {
         htmlColumn = column
       }
-
       if (treeNode) {
         if (process.env.VUE_APP_VXE_ENV === 'development') {
           if (treeNodeColumn) {
@@ -1125,29 +1144,6 @@ const Methods = {
           }
         }
       }
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (this.showOverflow && column.showOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-overflow=${this.showOverflow}`, `column.show-overflow=${column.showOverflow}`])
-        }
-        if (this.showHeaderOverflow && column.showHeaderOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-header-overflow=${this.showHeaderOverflow}`, `column.show-header-overflow=${column.showHeaderOverflow}`])
-        }
-        if (this.showFooterOverflow && column.showFooterOverflow === false) {
-          warnLog('vxe.error.errConflicts', [`table.show-footer-overflow=${this.showFooterOverflow}`, `column.show-footer-overflow=${column.showFooterOverflow}`])
-        }
-      }
-
-      if (process.env.VUE_APP_VXE_ENV === 'development') {
-        if (htmlColumn) {
-          if (!columnOpts.useKey) {
-            errLog('vxe.error.reqProp', ['column-config.useKey', 'column.type=html'])
-          }
-          if (!rowOpts.useKey) {
-            errLog('vxe.error.reqProp', ['row-config.useKey', 'column.type=html'])
-          }
-        }
-      }
-
       if (isAllOverflow && column.showOverflow === false) {
         isAllOverflow = false
       }
@@ -1155,9 +1151,8 @@ const Methods = {
         errLog('vxe.error.colRepet', ['colId', colid])
       }
       fullColumnIdData[colid] = rest
-      fullColumnMap.set(column, rest)
     }
-    fullColumnMap.clear()
+
     if (isGroup) {
       XEUtils.eachTree(collectColumn, (column, index, items, path, parent, nodes) => {
         column.level = nodes.length
@@ -1168,15 +1163,26 @@ const Methods = {
     }
 
     if (process.env.VUE_APP_VXE_ENV === 'development') {
-      if (expandColumn && this.mouseOpts.area) {
+      if (expandColumn && mouseOpts.area) {
         errLog('vxe.error.errConflicts', ['mouse-config.area', 'column.type=expand'])
       }
     }
 
-    this.isGroup = isGroup
-    this.treeNodeColumn = treeNodeColumn
-    this.expandColumn = expandColumn
-    this.isAllOverflow = isAllOverflow
+    if (process.env.VUE_APP_VXE_ENV === 'development') {
+      if (htmlColumn) {
+        if (!columnOpts.useKey) {
+          errLog('vxe.error.reqProp', ['column-config.useKey & column.type=html'])
+        }
+        if (!rowOpts.useKey) {
+          errLog('vxe.error.reqProp', ['row-config.useKey & column.type=html'])
+        }
+      }
+    }
+
+    reactData.isGroup = isGroup
+    reactData.treeNodeColumn = treeNodeColumn
+    reactData.expandColumn = expandColumn
+    reactData.isAllOverflow = isAllOverflow
   },
   /**
    * 根据 tr 元素获取对应的 row 信息
@@ -2679,6 +2685,10 @@ const Methods = {
       const internalData = $xeTable
 
       const { rceTimeout } = internalData
+      const el = $xeTable.$refs.refElem
+      if (!el || !el.clientWidth) {
+        $xeTable.autoCellWidth()
+      }
       if (rceTimeout) {
         clearTimeout(rceTimeout)
         $xeTable.$nextTick(() => {
@@ -5070,8 +5080,9 @@ const Methods = {
    * 行拖拽
    */
   handleRowDragDragstartEvent (evnt: DragEvent) {
-    const img = new Image()
     if (evnt.dataTransfer) {
+      const img = new Image()
+      img.src = tpImg
       evnt.dataTransfer.setDragImage(img, 0, 0)
     }
   },
@@ -5137,8 +5148,8 @@ const Methods = {
                     return
                   }
                   if (oldAllMaps[newRowid]) {
+                    isSelfToChildStatus = true
                     if (!isSelfToChildDrag) {
-                      isSelfToChildStatus = true
                       if (VxeUI.modal) {
                         VxeUI.modal.message({
                           status: 'error',
@@ -5220,7 +5231,7 @@ const Methods = {
 
           reactData.isDragRowMove = true
           $xeTable.handleTableData(treeConfig && transform)
-          $xeTable.cacheRowMap(true)
+          $xeTable.cacheRowMap()
           $xeTable.updateScrollYStatus()
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex()
@@ -5250,6 +5261,7 @@ const Methods = {
     }
     hideDropTip($xeTable)
     clearRowDropOrigin($xeTable)
+    internalData.prevDragToChild = false
     reactData.dragRow = null
     reactData.dragCol = null
     setTimeout(() => {
@@ -5342,8 +5354,9 @@ const Methods = {
    * 列拖拽
    */
   handleHeaderCellDragDragstartEvent (evnt: DragEvent) {
-    const img = new Image()
     if (evnt.dataTransfer) {
+      const img = new Image()
+      img.src = tpImg
       evnt.dataTransfer.setDragImage(img, 0, 0)
     }
   },
@@ -5355,18 +5368,20 @@ const Methods = {
 
     const { mouseConfig } = props
     const columnDragOpts = $xeTable.computeColumnDragOpts
-    const { dragEndMethod } = columnDragOpts
+    const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts
     const { dragCol } = reactData
-    const { collectColumn, prevDragCol, prevDragPos } = internalData
+    const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData
     const dragOffsetIndex = prevDragPos === 'right' ? 1 : 0
     if (prevDragCol && dragCol) {
       // 判断是否有拖动
       if (prevDragCol !== dragCol) {
+        const oldColumn: VxeTableDefines.ColumnInfo = dragCol
+        const newColumn: VxeTableDefines.ColumnInfo = prevDragCol
         Promise.resolve(
           dragEndMethod
             ? dragEndMethod({
-              oldColumn: dragCol,
-              newColumn: prevDragCol,
+              oldColumn,
+              newColumn,
               dragPos: prevDragPos as any,
               offsetIndex: dragOffsetIndex
             })
@@ -5376,6 +5391,101 @@ const Methods = {
             return
           }
 
+          let oafIndex = -1
+          let nafIndex = -1
+
+          const oldAllMaps: Record<string, any> = {}
+          XEUtils.eachTree([oldColumn], column => {
+            oldAllMaps[column.id] = column
+          })
+
+          let isSelfToChildStatus = false
+
+          if (oldColumn.parentId && newColumn.parentId) {
+            // 子到子
+
+            if (!isCrossDrag) {
+              return
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true
+              if (!isSelfToChildDrag) {
+                if (VxeUI.modal) {
+                  VxeUI.modal.message({
+                    status: 'error',
+                    content: getI18n('vxe.error.treeDragChild')
+                  })
+                }
+                return
+              }
+            }
+          } else if (oldColumn.parentId) {
+            // 子到根
+
+            if (!isCrossDrag) {
+              return
+            }
+          } else if (newColumn.parentId) {
+            // 根到子
+
+            if (!isCrossDrag) {
+              return
+            }
+            if (oldAllMaps[newColumn.id]) {
+              isSelfToChildStatus = true
+              if (!isSelfToChildDrag) {
+                if (VxeUI.modal) {
+                  VxeUI.modal.message({
+                    status: 'error',
+                    content: getI18n('vxe.error.treeDragChild')
+                  })
+                }
+                return
+              }
+            }
+          } else {
+            // 根到根
+          }
+
+          const oldewMatchRest = XEUtils.findTree(collectColumn as VxeTableDefines.ColumnInfo[], item => item.id === oldColumn.id)
+
+          // 改变层级
+          if (isSelfToChildStatus && isSelfToChildDrag) {
+            if (oldewMatchRest) {
+              const { items: oCols, index: oIndex } = oldewMatchRest
+              const childList = oldColumn.children || []
+              childList.forEach(column => {
+                column.parentId = oldColumn.parentId
+              })
+              oCols.splice(oIndex, 1, ...childList)
+              oldColumn.children = []
+            }
+          } else {
+            if (oldewMatchRest) {
+              const { items: oCols, index: oIndex, parent: oParent } = oldewMatchRest
+              oCols.splice(oIndex, 1)
+              if (!oParent) {
+                oafIndex = oIndex
+              }
+            }
+          }
+
+          const newMatchRest = XEUtils.findTree(collectColumn as VxeTableDefines.ColumnInfo[], item => item.id === newColumn.id)
+          if (newMatchRest) {
+            const { items: nCols, index: nIndex, parent: nParent } = newMatchRest
+            // 转子级
+            if (isToChildDrag && prevDragToChild) {
+              oldColumn.parentId = newColumn.id
+              newColumn.children = (newColumn.children || []).concat([oldColumn])
+            } else {
+              oldColumn.parentId = newColumn.parentId
+              nCols.splice(nIndex + dragOffsetIndex, 0, oldColumn)
+            }
+            if (!nParent) {
+              nafIndex = nIndex
+            }
+          }
+
           XEUtils.eachTree(collectColumn, (column, index, items, path, parent) => {
             if (!parent) {
               const sortIndex = index + 1
@@ -5383,19 +5493,6 @@ const Methods = {
             }
           })
 
-          const oafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === dragCol.id)
-          const nafIndex = XEUtils.findIndexOf(collectColumn, item => item.id === prevDragCol.id) + dragOffsetIndex
-
-          const newTargetCol = collectColumn[nafIndex]
-          if (newTargetCol) {
-            // 插入最后位置
-            dragCol.renderSortNumber = newTargetCol.renderSortNumber
-            newTargetCol.renderSortNumber = dragCol.renderSortNumber + 0.5
-          } else {
-            // 插入新位置
-            dragCol.renderSortNumber = collectColumn.length + 1.5
-          }
-
           reactData.isDragColMove = true
           if (mouseConfig) {
             if ($xeTable.clearSelected) {
@@ -5406,15 +5503,14 @@ const Methods = {
               $xeTable.clearCopyCellArea()
             }
           }
-          $xeTable.analyColumnWidth()
-          $xeTable.$nextTick().then(() => {
+
+          $xeTable.refreshColumn(true).then(() => {
             $xeTable.updateCellAreas()
-            $xeTable.refreshColumn(true)
           })
 
           $xeTable.dispatchEvent('column-dragend', {
-            oldColumn: dragCol,
-            newColumn: prevDragCol,
+            oldColumn,
+            newColumn,
             dragPos: prevDragPos,
             offsetIndex: dragOffsetIndex,
             _index: {
@@ -5430,6 +5526,7 @@ const Methods = {
     }
     hideDropTip($xeTable)
     clearColDropOrigin($xeTable)
+    internalData.prevDragToChild = false
     reactData.dragRow = null
     reactData.dragCol = null
     setTimeout(() => {
@@ -5442,10 +5539,13 @@ const Methods = {
     const internalData = $xeTable
 
     const { dragCol } = reactData
+    const columnDragOpts = $xeTable.computeColumnDragOpts
+    const { isToChildDrag, isCrossDrag } = columnDragOpts
     if (!dragCol) {
       evnt.preventDefault()
       return
     }
+    const hasCtrlKey = evnt.ctrlKey
     const thEl = evnt.currentTarget as HTMLElement
     const colid = thEl.getAttribute('colid')
     const column = $xeTable.getColumnById(colid)
@@ -5454,11 +5554,11 @@ const Methods = {
       const { dragCol } = reactData
       const offsetX = evnt.clientX - thEl.getBoundingClientRect().x
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right'
-      if (dragCol.id === column.id || column.parentId) {
+      if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
         showDropTip($xeTable, evnt, null, thEl, false, dragPos)
         return
       }
-      internalData.prevDragToChild = false
+      internalData.prevDragToChild = !!(isToChildDrag && hasCtrlKey)
       internalData.prevDragCol = column
       internalData.prevDragPos = dragPos
       showDropTip($xeTable, evnt, null, thEl, true, dragPos)

package/packages/table/src/util.ts

@@ -137,7 +137,6 @@ export function handleFieldOrColumn (_vm: any, fieldOrColumn: any) {
 export function assembleColumn (_vm: any) {
   const { $el, $xetable, $xecolumn, columnConfig } = _vm
   const groupConfig = $xecolumn ? $xecolumn.columnConfig : null
-  columnConfig.slots = _vm.$scopedSlots
   if (groupConfig) {
     if (process.env.VUE_APP_VXE_ENV === 'development') {
       if ($xecolumn.$options._componentTag === 'vxe-table-column') {

package/styles/components/table.scss

@@ -1286,6 +1286,11 @@
     &[drag-pos="right"] {
       border-right-color: var(--vxe-ui-font-primary-color);
     }
+    &[drag-to-child="y"] {
+      border-left-color: transparent;
+      border-right-color: transparent;
+      border-bottom-color: var(--vxe-ui-status-success-color);
+    }
     &.is--guides {
       background-color: var( --vxe-ui-table-drag-over-background-color);
     }