vxe-table 3.11.21 → 3.11.23

package/packages/table/src/methods.ts

@@ -439,7 +439,7 @@ const updateColDropTipContent = ($xeTable: any, tdEl: HTMLElement) => {
   reactData.dragTipText = tipContent
 }
 
-function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLElement | null, thEl: HTMLElement | null, dragPos: string) {
+function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLElement | null, thEl: HTMLElement | null, showLine: boolean, dragPos: string) {
   const reactData = $xeTable
 
   const el = $xeTable.$refs.refElem as HTMLElement
@@ -451,26 +451,30 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
   if (trEl) {
     const rdLineEl = $xeTable.$refs.refDragRowLineElem as HTMLElement
     if (rdLineEl) {
-      const trRect = trEl.getBoundingClientRect()
-      let top = Math.max(1, trRect.y - wrapperRect.y)
-      if (dragPos === 'bottom') {
-        top = Math.min(wrapperRect.height - 1, trRect.y - wrapperRect.y + trRect.height)
+      if (showLine) {
+        const trRect = trEl.getBoundingClientRect()
+        rdLineEl.style.display = 'block'
+        rdLineEl.style.top = `${Math.max(1, trRect.y - wrapperRect.y)}px`
+        rdLineEl.style.height = `${trRect.height}px`
+        rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`
+        rdLineEl.setAttribute('drag-pos', dragPos)
+      } else {
+        rdLineEl.style.display = ''
       }
-      rdLineEl.style.top = `${top}px`
-      rdLineEl.style.width = `${wrapperRect.width - scrollbarWidth}px`
-      rdLineEl.style.display = 'block'
     }
   } else if (thEl) {
     const cdLineEl = $xeTable.$refs.refDragColLineElem as HTMLElement
     if (cdLineEl) {
-      const thRect = thEl.getBoundingClientRect()
-      let left = Math.max(1, thRect.x - wrapperRect.x)
-      if (dragPos === 'right') {
-        left = Math.min(wrapperRect.width - 2, thRect.x - wrapperRect.x + thRect.width)
+      if (showLine) {
+        const thRect = thEl.getBoundingClientRect()
+        cdLineEl.style.display = 'block'
+        cdLineEl.style.left = `${Math.max(1, thRect.x - wrapperRect.x)}px`
+        cdLineEl.style.width = `${thRect.width}px`
+        cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`
+        cdLineEl.setAttribute('drag-pos', dragPos)
+      } else {
+        cdLineEl.style.display = ''
       }
-      cdLineEl.style.left = `${left}px`
-      cdLineEl.style.height = `${wrapperRect.height - scrollbarHeight}px`
-      cdLineEl.style.display = 'block'
     }
   }
   const rdTipEl = $xeTable.$refs.refDragTipElem as HTMLElement
@@ -478,6 +482,7 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
     rdTipEl.style.display = 'block'
     rdTipEl.style.top = `${Math.min(el.clientHeight - el.scrollTop - rdTipEl.clientHeight, evnt.clientY - wrapperRect.y)}px`
     rdTipEl.style.left = `${Math.min(el.clientWidth - el.scrollLeft - rdTipEl.clientWidth - 16, evnt.clientX - wrapperRect.x)}px`
+    rdTipEl.setAttribute('drag-status', showLine ? 'normal' : 'disabled')
   }
 }
 
@@ -964,6 +969,7 @@ const Methods = {
         cacheItem = { row, rowid, seq, index: -1, _index: -1, $index: -1, items, parent, level, height: 0 }
       }
       if (isSource) {
+        cacheItem.level = level
         cacheItem.index = treeConfig && parent ? -1 : index
         fullDataRowIdMaps[rowid] = cacheItem
       }
@@ -1663,6 +1669,16 @@ const Methods = {
       tableColumn: this.tableColumn.slice(0)
     }
   },
+  /**
+   * 获取表格的全量列
+   */
+  getFullColumns () {
+    const $xeTable = this
+    const internalData = $xeTable
+
+    const { collectColumn } = internalData
+    return collectColumn.slice(0)
+  },
   /**
    * 获取数据，和 data 的行为一致，也可以指定索引获取数据
    */
@@ -2016,6 +2032,32 @@ const Methods = {
       footerData: footerTableData.slice(0)
     }
   },
+  /**
+   * 获取表格的全量数据，如果是 tree-config 则返回带层级的树结构
+   */
+  getFullData () {
+    const $xeTable = this
+    const props = $xeTable
+    const internalData = $xeTable
+
+    const { treeConfig } = props
+    const { tableFullData, tableFullTreeData } = internalData
+    if (treeConfig) {
+      const treeOpts = $xeTable.computeTreeOpts
+      const { transform, mapChildrenField } = treeOpts
+      const childrenField = treeOpts.children || treeOpts.childrenField
+      if (transform) {
+        return XEUtils.toArrayTree(
+          XEUtils.toTreeArray(tableFullTreeData, {
+            children: mapChildrenField
+          }),
+          { children: childrenField }
+        )
+      }
+      return tableFullTreeData.slice(0)
+    }
+    return tableFullData.slice(0)
+  },
   /**
    * 处理数据加载默认行为
    * 默认执行一次，除非被重置
@@ -2218,7 +2260,11 @@ const Methods = {
     return this.refreshColumn(true)
   },
   handleCustomRestore (storeData: any) {
-    let { collectColumn } = this
+    const $xetable = this
+    const reactData = $xetable
+    const internalData = $xetable
+
+    let { collectColumn } = internalData
     const { resizableData, sortData, visibleData, fixedData } = storeData
     let hasCustomSort = false
     // 处理还原
@@ -2245,9 +2291,12 @@ const Methods = {
       // 如果自定义了顺序
       if (hasCustomSort) {
         collectColumn = XEUtils.orderBy(collectColumn, 'renderSortNumber')
-        this.collectColumn = collectColumn
-        this.tableFullColumn = getColumnList(collectColumn)
+        internalData.collectColumn = collectColumn
+        internalData.tableFullColumn = getColumnList(collectColumn)
       }
+      reactData.isCustomStatus = true
+    } else {
+      reactData.isCustomStatus = false
     }
   },
   /**
@@ -4668,13 +4717,30 @@ const Methods = {
       this.emitEvent('radio-change', { oldValue, newValue, ...params }, evnt)
     }
   },
+  triggerCurrentColumnEvent (evnt: any, params: any) {
+    const $xeTable = this
+
+    const columnOpts = $xeTable.computeColumnOpts
+    const { currentMethod } = columnOpts
+    const { column } = params
+    if (!currentMethod || currentMethod({ column })) {
+      $xeTable.setCurrentColumn(column)
+    }
+  },
   triggerCurrentRowEvent (evnt: any, params: any) {
-    const { currentRow: oldValue } = this
+    const $xeTable = this
+    const reactData = $xeTable
+
+    const { currentRow: oldValue } = reactData
+    const rowOpts = $xeTable.computeRowOpts
+    const { currentMethod } = rowOpts
     const { row: newValue } = params
     const isChange = oldValue !== newValue
-    this.setCurrentRow(newValue)
-    if (isChange) {
-      this.emitEvent('current-change', { oldValue, newValue, ...params }, evnt)
+    if (!currentMethod || currentMethod({ row: newValue })) {
+      $xeTable.setCurrentRow(newValue)
+      if (isChange) {
+        $xeTable.dispatchEvent('current-change', { oldValue, newValue, ...params }, evnt)
+      }
     }
   },
   /**
@@ -4790,7 +4856,7 @@ const Methods = {
     }
     this.emitEvent('header-cell-click', Object.assign({ triggerResizable, triggerSort, triggerFilter, cell }, params), evnt)
     if (this.columnOpts.isCurrent || this.highlightCurrentColumn) {
-      return this.setCurrentColumn(column)
+      this.triggerCurrentColumnEvent(evnt, params)
     }
     return this.$nextTick()
   },
@@ -4998,11 +5064,13 @@ const Methods = {
 
     const { treeConfig, dragConfig } = props
     const rowDragOpts = $xeTable.computeRowDragOpts
-    const { dragEndMethod } = rowDragOpts
+    const { fullAllDataRowIdData } = internalData
+    const { isCrossDrag, isSelfToChildDrag, dragEndMethod } = rowDragOpts
     const treeOpts = $xeTable.computeTreeOpts
-    const { transform } = treeOpts
+    const { transform, mapChildrenField, parentField } = treeOpts
+    const childrenField = treeOpts.children || treeOpts.childrenField
     const { dragRow } = reactData
-    const { afterFullData, afterTreeFullData, tableFullData, tableFullTreeData, prevDragRow, prevDragPos } = internalData
+    const { afterFullData, tableFullData, prevDragRow, prevDragPos } = internalData
     const dEndMethod = dragEndMethod || (dragConfig ? dragConfig.dragEndMethod : null)
     const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0
     if (prevDragRow && dragRow) {
@@ -5024,27 +5092,105 @@ const Methods = {
 
           let oafIndex = -1
           let nafIndex = -1
+          // 如果为树结构
           if (treeConfig) {
-            // 移出源位置
-            oafIndex = $xeTable.findRowIndexOf(afterTreeFullData, dragRow)
-            const otfIndex = $xeTable.findRowIndexOf(tableFullTreeData, dragRow)
-            afterTreeFullData.splice(oafIndex, 1)
-            tableFullTreeData.splice(otfIndex, 1)
-
-            // 插新位置
-            const pafIndex = $xeTable.findRowIndexOf(afterTreeFullData, prevDragRow)
-            const ptfIndex = $xeTable.findRowIndexOf(tableFullTreeData, prevDragRow)
-            nafIndex = pafIndex + dragOffsetIndex
-            const ntfIndex = ptfIndex + dragOffsetIndex
-            afterTreeFullData.splice(nafIndex, 0, dragRow)
-            tableFullTreeData.splice(ntfIndex, 0, dragRow)
+            if (transform) {
+              // 移出源位置
+              const oldRowid = getRowid($xeTable, dragRow)
+              const oldRest = fullAllDataRowIdData[oldRowid]
+              const newRowid = getRowid($xeTable, prevDragRow)
+              const newRest = fullAllDataRowIdData[newRowid]
+              if (oldRest && newRest) {
+                const { level: oldLevel } = oldRest
+                const { level: newLevel } = newRest
+
+                const oldAllMaps: Record<string, any> = {}
+                XEUtils.eachTree([dragRow], item => {
+                  oldAllMaps[getRowid($xeTable, item)] = item
+                }, { children: mapChildrenField })
+
+                let isSelfToChildStatus = false
+
+                if (oldLevel && newLevel) {
+                  // 子到子
+
+                  if (!isCrossDrag) {
+                    return
+                  }
+                  if (oldAllMaps[newRowid]) {
+                    if (!isSelfToChildDrag) {
+                      isSelfToChildStatus = true
+                      if (VxeUI.modal) {
+                        VxeUI.modal.message({
+                          status: 'error',
+                          content: getI18n('vxe.error.treeDragChild')
+                        })
+                      }
+                      return
+                    }
+                  }
+                } else if (oldLevel) {
+                  // 子到根
+
+                  if (!isCrossDrag) {
+                    return
+                  }
+                } else if (newLevel) {
+                  // 根到子
+
+                  if (!isCrossDrag) {
+                    return
+                  }
+                  if (oldAllMaps[newRowid]) {
+                    isSelfToChildStatus = true
+                    if (!isSelfToChildDrag) {
+                      if (VxeUI.modal) {
+                        VxeUI.modal.message({
+                          status: 'error',
+                          content: getI18n('vxe.error.treeDragChild')
+                        })
+                      }
+                      return
+                    }
+                  }
+                } else {
+                  // 根到根
+                }
+
+                const fullList = XEUtils.toTreeArray(internalData.afterTreeFullData, { children: childrenField })
+
+                // 移出
+                const otfIndex = $xeTable.findRowIndexOf(fullList, dragRow)
+                fullList.splice(otfIndex, 1)
+
+                // 插入
+                const ptfIndex = $xeTable.findRowIndexOf(fullList, prevDragRow)
+                const ntfIndex = ptfIndex + dragOffsetIndex
+                fullList.splice(ntfIndex, 0, dragRow)
+
+                // 改变层级
+                if (isSelfToChildStatus && isSelfToChildDrag) {
+                  XEUtils.each(dragRow[childrenField], childRow => {
+                    childRow[parentField] = dragRow[parentField]
+                  })
+                }
+                dragRow[parentField] = prevDragRow[parentField]
+
+                internalData.tableFullTreeData = XEUtils.toArrayTree(fullList, {
+                  key: treeOpts.rowField,
+                  parentKey: treeOpts.parentField,
+                  children: childrenField,
+                  mapChildren: treeOpts.mapChildrenField
+                })
+              }
+            }
           } else {
-            // 移出源位置
+            // 移出
             oafIndex = $xeTable.findRowIndexOf(afterFullData, dragRow)
             const otfIndex = $xeTable.findRowIndexOf(tableFullData, dragRow)
             afterFullData.splice(oafIndex, 1)
             tableFullData.splice(otfIndex, 1)
-            // 插新位置
+            // 插入
             const pafIndex = $xeTable.findRowIndexOf(afterFullData, prevDragRow)
             const ptfIndex = $xeTable.findRowIndexOf(tableFullData, prevDragRow)
             nafIndex = pafIndex + dragOffsetIndex
@@ -5054,9 +5200,9 @@ const Methods = {
           }
 
           reactData.isDragRowMove = true
-          $xeTable.cacheRowMap()
-          $xeTable.updateScrollYStatus()
           $xeTable.handleTableData(treeConfig && transform)
+          $xeTable.cacheRowMap(true)
+          $xeTable.updateScrollYStatus()
           if (!(treeConfig && transform)) {
             $xeTable.updateAfterDataIndex()
           }
@@ -5072,7 +5218,7 @@ const Methods = {
           $xeTable.dispatchEvent('row-dragend', {
             oldRow: dragRow,
             newRow: prevDragRow,
-            dragPos: prevDragPos,
+            dragPos: prevDragPos as any,
             offsetIndex: dragOffsetIndex,
             _index: {
               newIndex: nafIndex,
@@ -5093,26 +5239,35 @@ const Methods = {
   },
   handleRowDragDragoverEvent (evnt: DragEvent) {
     const $xeTable = this
+    const props = $xeTable
     const internalData = $xeTable
     const reactData = $xeTable
 
+    const { treeConfig } = props
+    const { fullAllDataRowIdData } = internalData
     const { dragRow } = reactData
+    const rowDragOpts = $xeTable.computeRowDragOpts
+    const { isCrossDrag } = rowDragOpts
     if (!dragRow) {
       evnt.preventDefault()
       return
     }
     const trEl = evnt.currentTarget as HTMLElement
-    const rowid = trEl.getAttribute('rowid')
-    const row = $xeTable.getRowById(rowid)
-    if (row) {
-      evnt.preventDefault()
+    const rowid = trEl.getAttribute('rowid') || ''
+    const rest = fullAllDataRowIdData[rowid]
+    if (rest) {
+      const row = rest.row
       evnt.preventDefault()
       const { dragRow } = reactData
       const offsetY = evnt.clientY - trEl.getBoundingClientRect().y
       const dragPos = offsetY < trEl.clientHeight / 2 ? 'top' : 'bottom'
+      if ($xeTable.eqRow(dragRow, row) || (!isCrossDrag && treeConfig && rest.level)) {
+        showDropTip($xeTable, evnt, trEl, null, false, dragPos)
+        return
+      }
       internalData.prevDragRow = row
       internalData.prevDragPos = dragPos
-      showDropTip($xeTable, evnt, trEl, null, dragPos)
+      showDropTip($xeTable, evnt, trEl, null, true, dragPos)
       $xeTable.dispatchEvent('row-dragover', {
         oldRow: dragRow,
         targetRow: row,
@@ -5276,9 +5431,13 @@ 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) {
+        showDropTip($xeTable, evnt, null, thEl, false, dragPos)
+        return
+      }
       internalData.prevDragCol = column
       internalData.prevDragPos = dragPos
-      showDropTip($xeTable, evnt, null, thEl, dragPos)
+      showDropTip($xeTable, evnt, null, thEl, true, dragPos)
       $xeTable.dispatchEvent('column-dragover', {
         oldColumn: dragCol,
         targetColumn: column,

package/packages/table/src/table.ts

@@ -25,7 +25,7 @@ import customMixin from '../module/custom/mixin'
 
 import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
 
-const { getConfig, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
+const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
 /**
  * 渲染浮固定列
@@ -121,8 +121,13 @@ const renderDragTipContents = (h: CreateElement, $xeTable: any) => {
 }
 
 const renderDragTip = (h: CreateElement, $xeTable: any) => {
+  const reactData = $xeTable
+
+  const { dragRow } = reactData
   const rowOpts = $xeTable.computeRowOpts
   const columnOpts = $xeTable.computeColumnOpts
+  const rowDragOpts = $xeTable.computeRowDragOpts
+  const columnDragOpts = $xeTable.computeColumnDragOpts
 
   if (rowOpts.drag || columnOpts.drag) {
     return h('div', {
@@ -130,16 +135,38 @@ const renderDragTip = (h: CreateElement, $xeTable: any) => {
     }, [
       h('div', {
         ref: 'refDragRowLineElem',
-        class: 'vxe-table--drag-row-line'
+        class: ['vxe-table--drag-row-line', {
+          'is--guides': rowDragOpts.showGuidesStatus
+        }]
       }),
       h('div', {
         ref: 'refDragColLineElem',
-        class: 'vxe-table--drag-col-line'
+        class: ['vxe-table--drag-col-line', {
+          'is--guides': columnDragOpts.showGuidesStatus
+        }]
       }),
       h('div', {
         ref: 'refDragTipElem',
         class: 'vxe-table--drag-sort-tip'
-      }, renderDragTipContents(h, $xeTable))
+      }, [
+        h('div', {
+          class: 'vxe-table--drag-sort-tip-wrapper'
+        }, [
+          h('div', {
+            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]
+            }),
+            h('span', {
+              class: ['vxe-table--drag-sort-tip-disabled-status', getIcon().TABLE_DRAG_DISABLED]
+            })
+          ]),
+          h('div', {
+            class: 'vxe-table--drag-sort-tip-content'
+          }, renderDragTipContents(h, $xeTable))
+        ])
+      ])
     ])
   }
   return renderEmptyElement($xeTable)
@@ -400,6 +427,9 @@ export default {
       },
 
       scrollVMLoading: false,
+
+      isCustomStatus: false,
+
       isDragRowMove: false,
       dragRow: null,
       isDragColMove: false,

package/packages/ui/index.ts

@@ -257,6 +257,9 @@ VxeUI.setIcon({
   TABLE_MENU_OPTIONS: iconPrefix + 'arrow-right',
   TABLE_DRAG_ROW: iconPrefix + 'drag-handle',
   TABLE_DRAG_COLUMN: iconPrefix + 'drag-handle',
+  TABLE_DRAG_STATUS_ROW: iconPrefix + 'sort',
+  TABLE_DRAG_STATUS_COLUMN: iconPrefix + 'swap',
+  TABLE_DRAG_DISABLED: iconPrefix + 'no-drop',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/icon.scss

@@ -5,7 +5,7 @@
 @font-face {
   font-family: "vxetableiconfont";
   src: 
-       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
+       url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');
 }
 
 @keyframes rollCircle {
@@ -79,6 +79,18 @@ $btnThemeList: (
   }
 }
 
+.vxe-table-icon-swap:before {
+  content: "\e7f3";
+}
+
+.vxe-table-icon-sort:before {
+  content: "\e93e";
+}
+
+.vxe-table-icon-no-drop:before {
+  content: "\e658";
+}
+
 .vxe-table-icon-edit:before {
   content: "\e66e";
 }

package/styles/components/table.scss

@@ -1279,7 +1279,16 @@
   .vxe-table--drag-col-line {
     height: 100%;
     width: 1px;
-    background-color: var(--vxe-ui-font-primary-color);
+    border: 2px solid transparent;
+    &[drag-pos="left"] {
+      border-left-color: var(--vxe-ui-font-primary-color);
+    }
+    &[drag-pos="right"] {
+      border-right-color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--guides {
+      background-color: var( --vxe-ui-table-drag-over-background-color);
+    }
   }
   .vxe-header--column,
   .vxe-body--column,
@@ -1327,7 +1336,16 @@
   .vxe-table--drag-row-line {
     width: 100%;
     height: 1px;
-    background-color: var(--vxe-ui-font-primary-color);
+    border: 2px solid transparent;
+    &[drag-pos="top"] {
+      border-top-color: var(--vxe-ui-font-primary-color);
+    }
+    &[drag-pos="bottom"] {
+      border-bottom-color: var(--vxe-ui-font-primary-color);
+    }
+    &.is--guides {
+      background-color: var( --vxe-ui-table-drag-over-background-color);
+    }
   }
   .vxe-body--row {
     &.row--drag-origin {
@@ -1346,7 +1364,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    padding: 0.6em 1em 0.6em 1.6em;
+    padding: 0.6em 1.4em;
     max-width: 50%;
     min-width: 100px;
     border-radius: var(--vxe-ui-border-radius);
@@ -1358,6 +1376,38 @@
     background-color: var(--vxe-ui-layout-background-color);
     box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
     z-index: 33;
+    &[drag-status="normal"] {
+      .vxe-table--drag-sort-tip-normal-status {
+        display: block;
+      }
+    }
+    &[drag-status="disabled"] {
+      .vxe-table--drag-sort-tip-disabled-status {
+        display: block;
+      }
+    }
+  }
+  .vxe-table--drag-sort-tip-wrapper {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+  .vxe-table--drag-sort-tip-status {
+    padding-right: 0.4em;
+  }
+  .vxe-table--drag-sort-tip-disabled-status {
+    display: none;
+    flex-shrink: 0;
+    color: var(--vxe-ui-status-error-color)
+  }
+  .vxe-table--drag-sort-tip-normal-status {
+    display: none;
+  }
+  .vxe-table--drag-sort-tip-content {
+    flex-grow: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   /*溢出列*/

package/styles/theme/dark.scss

@@ -41,4 +41,5 @@
   --vxe-ui-table-row-current-background-color: #18222c;
   --vxe-ui-table-row-hover-current-background-color: #262727;
   --vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.8);
+  --vxe-ui-table-drag-over-background-color:rgba(48, 48, 0, 0.3);
 }

package/styles/theme/light.scss

@@ -37,4 +37,5 @@
   --vxe-ui-table-row-current-background-color: #{light_variable.$vxe-ui-table-row-current-background-color};
   --vxe-ui-table-row-hover-current-background-color: #{light_variable.$vxe-ui-table-row-hover-current-background-color};
   --vxe-ui-table-fixed-scrolling-box-shadow-color: #{light_variable.$vxe-ui-table-fixed-scrolling-box-shadow-color};
+  --vxe-ui-table-drag-over-background-color:#{light_variable.$vxe-ui-table-drag-over-background-color};
 }

package/styles/variable.scss

@@ -36,4 +36,5 @@ $vxe-ui-table-row-hover-checkbox-checked-background-color: #ffebbc !default;
 $vxe-ui-table-row-current-background-color: #e6f7ff !default;
 $vxe-ui-table-row-hover-current-background-color: #d7effb !default;
 $vxe-ui-table-fixed-scrolling-box-shadow-color: rgba(0, 0, 0, 0.12) !default;
+$vxe-ui-table-drag-over-background-color:rgba(255,255,200,0.3) !default;