vxe-table 3.11.39 → 3.12.0-beta.1

package/packages/table/src/footer.ts

@@ -234,15 +234,15 @@ export default {
     const { fixedType, fixedColumn, tableColumn } = props
 
     const { spanMethod, footerSpanMethod, showFooterOverflow: allColumnFooterOverflow } = tableProps
-    const { visibleColumn } = tableInternalData
-    const { scrollbarWidth } = tableReactData
+    const { visibleColumn, fullColumnIdData } = tableInternalData
+    const { scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData
 
     let renderColumnList = tableColumn
 
     // 如果是使用优化模式
     if (fixedType) {
       // 如果是使用优化模式
-      if (allColumnFooterOverflow) {
+      if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
         // 如果不支持优化模式
         if (spanMethod || footerSpanMethod) {
           renderColumnList = visibleColumn
@@ -254,6 +254,31 @@ export default {
       }
     }
 
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id]
+          if (dCowRest) {
+            const dcIndex = dCowRest._index
+            const firstCol = renderColumnList[0]
+            const lastCol = renderColumnList[renderColumnList.length - 1]
+            const firstColRest = fullColumnIdData[firstCol.id]
+            const lastColRest = fullColumnIdData[lastCol.id]
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index
+              const lcIndex = lastColRest._index
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList)
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol])
+              }
+            }
+          }
+        }
+      }
+    }
+
     const ons: Record<string, any> = {}
     if (!fixedType) {
       ons.scroll = this.scrollEvent

package/packages/table/src/header.ts

@@ -84,6 +84,7 @@ const renderRows = (h: CreateElement, _vm: any, cols: VxeTableDefines.ColumnInfo
         'is--sortable': column.sortable,
         'col--filter': !!column.filters,
         'is--filter-active': hasFilter,
+        'is--drag-active': !column.fixed && !isDisabledDrag,
         'is--drag-disabled': isDisabledDrag,
         'col--current': currentColumn === column
       }, getClass(headerClassName, params), getClass(headerCellClassName, params)],
@@ -220,16 +221,18 @@ export default {
     const { headerColumn } = this
 
     const { showHeaderOverflow: allColumnHeaderOverflow, spanMethod, footerSpanMethod } = tableProps
-    const { isGroup, scrollbarWidth } = tableReactData
-    const { visibleColumn } = tableInternalData
-    let headerGroups = headerColumn
-    let renderColumnList = tableColumn
+    const { isGroup, scrollXLoad, scrollYLoad, scrollbarWidth, dragCol } = tableReactData
+    const { visibleColumn, fullColumnIdData } = tableInternalData
+
+    let renderHeaderList: VxeTableDefines.ColumnInfo[][] = headerColumn
+    let renderColumnList: VxeTableDefines.ColumnInfo[] = tableColumn
+
     if (isGroup) {
       renderColumnList = visibleColumn
     } else {
       if (fixedType) {
         // 如果是使用优化模式
-        if (allColumnHeaderOverflow) {
+        if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
           // 如果不支持优化模式
           if (spanMethod || footerSpanMethod) {
             renderColumnList = visibleColumn
@@ -240,8 +243,38 @@ export default {
           renderColumnList = visibleColumn
         }
       }
-      headerGroups = [renderColumnList]
+      renderHeaderList = [renderColumnList]
+    }
+
+    if (!fixedType) {
+      // 列拖拽
+      if (scrollXLoad && dragCol) {
+        if (renderColumnList.length > 2) {
+          const dCowRest = fullColumnIdData[dragCol.id]
+          if (dCowRest) {
+            const dcIndex = dCowRest._index
+            const firstCol = renderColumnList[0]
+            const lastCol = renderColumnList[renderColumnList.length - 1]
+            const firstColRest = fullColumnIdData[firstCol.id]
+            const lastColRest = fullColumnIdData[lastCol.id]
+            if (firstColRest && lastColRest) {
+              const fcIndex = firstColRest._index
+              const lcIndex = lastColRest._index
+              console.log(dragCol.id, dcIndex, fcIndex, lcIndex, renderColumnList.length)
+              if (dcIndex < fcIndex) {
+                renderColumnList = [dragCol].concat(renderColumnList)
+                renderHeaderList = [[dragCol].concat(renderHeaderList[0])].concat(renderHeaderList.slice(1))
+              } else if (dcIndex > lcIndex) {
+                renderColumnList = renderColumnList.concat([dragCol])
+                renderHeaderList = [renderHeaderList[0].concat([dragCol])].concat(renderHeaderList.slice(1))
+              }
+              console.log(renderColumnList.length)
+            }
+          }
+        }
+      }
     }
+
     return h('div', {
       class: ['vxe-table--header-wrapper', fixedType ? `fixed-${fixedType}--wrapper` : 'body--wrapper'],
       attrs: {
@@ -290,7 +323,7 @@ export default {
          */
         h('thead', {
           ref: 'thead'
-        }, renderHeads(h, this, headerGroups))
+        }, renderHeads(h, this, renderHeaderList))
       ]),
       /**
        * 其他

package/packages/table/src/methods.ts

@@ -11,9 +11,6 @@ import type { VxeTableDefines, VxeColumnPropTypes, VxeTableEmits, ValueOf } from
 
 const { getConfig, getI18n, renderer, formats, interceptor, createEvent } = VxeUI
 
-// const isWebkit = browse['-webkit'] && !browse.edge
-// const debounceScrollYDuration = browse.msie ? 80 : 20
-
 const customStorageKey = 'VXE_CUSTOM_STORE'
 
 // 获取所有的列，排除分组
@@ -300,7 +297,7 @@ const calcCellHeight = ($xeTable: any) => {
   const { showOverflow } = props
   const { tableData, scrollXLoad, scrollYLoad } = reactData
   const { fullAllDataRowIdData } = internalData
-  const el = $xeTable.$el
+  const el = $xeTable.$refs.refElem as HTMLDivElement
   if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
     let paddingTop = 0
     let paddingBottom = 0
@@ -308,28 +305,27 @@ const calcCellHeight = ($xeTable: any) => {
     tableData.forEach((row: any) => {
       const rowid = getRowid($xeTable, row)
       const rowRest = fullAllDataRowIdData[rowid]
-      const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`)
-      if (rowRest && trList.length) {
+      const cellList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]>.vxe-body--column>.vxe-cell`)
+      if (rowRest && cellList.length) {
         let height = 0
-        for (let i = 0; i < trList.length; i++) {
-          const trEl = trList[i] as HTMLTableRowElement
-          const tdList = trEl.children
-          for (let j = 0; j < tdList.length; j++) {
-            const tdEl = tdList[j]
-            const cellElem = tdEl.querySelector('.vxe-cell') as HTMLDivElement
-            if (!calcPadding) {
-              paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
-              paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
-              calcPadding = true
-            }
-            let cellHeight = paddingTop + paddingBottom
-            if (cellElem) {
-              cellHeight += cellElem.offsetHeight
-            }
-            height = Math.max(height, cellHeight)
+        for (let i = 0; i < cellList.length; i++) {
+          const cellElem = cellList[i] as HTMLElement
+          const tdEl = cellElem.parentElement as HTMLTableCellElement
+          if (!tdEl || !tdEl.clientWidth) {
+            break
+          }
+          if (!calcPadding) {
+            paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
+            paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
+            calcPadding = true
           }
+          let cellHeight = paddingTop + paddingBottom
+          if (cellElem) {
+            cellHeight += cellElem.clientHeight
+          }
+          height = Math.max(height, cellHeight)
         }
-        rowRest.height = height
+        rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
       }
     })
   }
@@ -450,15 +446,22 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
   const { scrollbarWidth, scrollbarHeight } = reactData
   const { prevDragToChild } = internalData
   const wrapperRect = el.getBoundingClientRect()
+  const tableWidth = el.clientWidth
+  const tableHeight = el.clientHeight
   if (trEl) {
     const rdLineEl = $xeTable.$refs.refDragRowLineElem as HTMLElement
     if (rdLineEl) {
       if (showLine) {
         const trRect = trEl.getBoundingClientRect()
+        let trHeight = trEl.clientHeight
+        const offsetTop = Math.max(1, trRect.y - wrapperRect.y)
+        if (offsetTop + trHeight > tableHeight - scrollbarHeight) {
+          trHeight = tableHeight - offsetTop - scrollbarHeight
+        }
         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.style.top = `${offsetTop}px`
+        rdLineEl.style.height = `${trHeight}px`
+        rdLineEl.style.width = `${tableWidth - scrollbarWidth}px`
         rdLineEl.setAttribute('drag-pos', dragPos)
         rdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
       } else {
@@ -469,16 +472,31 @@ function showDropTip ($xeTable: any, evnt: DragEvent | MouseEvent, trEl: HTMLEle
     const cdLineEl = $xeTable.$refs.refDragColLineElem as HTMLElement
     if (cdLineEl) {
       if (showLine) {
+        const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
+        const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
+        const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
+        const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
         const thRect = thEl.getBoundingClientRect()
+        let thWidth = thEl.clientWidth
         const offsetTop = Math.max(0, thRect.y - wrapperRect.y)
+        const startX = leftContainerWidth
+        let offsetLeft = thRect.x - wrapperRect.x
+        if (offsetLeft < startX) {
+          thWidth -= startX - offsetLeft
+          offsetLeft = startX
+        }
+        const endX = tableWidth - rightContainerWidth - (rightContainerWidth ? 0 : scrollbarWidth)
+        if (offsetLeft + thWidth > endX) {
+          thWidth = endX - offsetLeft
+        }
         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.left = `${offsetLeft}px`
+        cdLineEl.style.width = `${thWidth}px`
         if (prevDragToChild) {
           cdLineEl.style.height = `${thRect.height}px`
         } else {
-          cdLineEl.style.height = `${wrapperRect.height - offsetTop - scrollbarHeight}px`
+          cdLineEl.style.height = `${tableHeight - offsetTop - scrollbarHeight}px`
         }
         cdLineEl.setAttribute('drag-pos', dragPos)
         cdLineEl.setAttribute('drag-to-child', prevDragToChild ? 'y' : 'n')
@@ -925,7 +943,7 @@ const Methods = {
     ).then(() => {
       this._isLoading = false
       this.cacheColumnMap()
-      this.parseColumns().then(() => {
+      this.parseColumns(true).then(() => {
         if (this.scrollXLoad) {
           this.loadScrollXData(true)
         }
@@ -2466,15 +2484,11 @@ const Methods = {
   /**
    * 刷新列配置
    */
-  refreshColumn (initOrder: any) {
-    if (initOrder) {
-      const columnList = XEUtils.orderBy(this.collectColumn, 'renderSortNumber')
-      this.collectColumn = columnList
-      const tableFullColumn = getColumnList(columnList)
-      this.tableFullColumn = tableFullColumn
-      this.cacheColumnMap()
+  refreshColumn (initSort?: boolean) {
+    if (initSort) {
+      this.handleUpdateColumn()
     }
-    return this.parseColumns().then(() => {
+    return this.parseColumns(true).then(() => {
       return this.refreshScroll()
     }).then(() => {
       return this.recalculate()
@@ -2484,7 +2498,7 @@ const Methods = {
    * 刷新列信息
    * 将固定的列左边、右边分别靠边
    */
-  parseColumns () {
+  parseColumns (isReset: boolean) {
     const $xeTable = this
     const props = $xeTable
     const internalData = $xeTable
@@ -2575,10 +2589,12 @@ const Methods = {
           warnLog('vxe.error.scrollErrProp', ['footer-span-method'])
         }
       }
-      const { visibleSize } = handleVirtualXVisible(this)
-      scrollXStore.startIndex = 0
-      scrollXStore.endIndex = visibleSize
-      scrollXStore.visibleSize = visibleSize
+      if (isReset) {
+        const { visibleSize } = handleVirtualXVisible(this)
+        scrollXStore.startIndex = 0
+        scrollXStore.endIndex = visibleSize
+        scrollXStore.visibleSize = visibleSize
+      }
     }
     // 如果列被显示/隐藏，则清除合并状态
     // 如果列被设置为固定，则清除合并状态
@@ -2596,12 +2612,15 @@ const Methods = {
     })
     this.visibleColumn = visibleColumn
     this.handleTableColumn()
-    return this.updateFooter().then(() => {
-      return this.recalculate()
-    }).then(() => {
-      this.updateCellAreas()
-      return this.recalculate()
-    })
+    if (isReset) {
+      return this.updateFooter().then(() => {
+        return this.recalculate()
+      }).then(() => {
+        this.updateCellAreas()
+        return this.recalculate()
+      })
+    }
+    return this.updateFooter()
   },
   /**
    * 指定列宽的列进行拆分
@@ -2890,49 +2909,6 @@ const Methods = {
       this.checkScrolling()
     }
   },
-  calcCellHeight () {
-    const $xeTable = this
-    const props = $xeTable
-    const reactData = $xeTable
-    const internalData = $xeTable
-
-    const { showOverflow } = props
-    const { tableData, scrollXLoad, scrollYLoad } = reactData
-    const { fullAllDataRowIdData } = internalData
-    const el = $xeTable.$el
-    if (!showOverflow && (scrollXLoad || scrollYLoad) && el) {
-      let paddingTop = 0
-      let paddingBottom = 0
-      let calcPadding = false
-      tableData.forEach((row: any) => {
-        const rowid = getRowid($xeTable, row)
-        const rowRest = fullAllDataRowIdData[rowid]
-        const trList = el.querySelectorAll(`.vxe-body--row[rowid="${rowid}"]`)
-        if (rowRest && trList.length) {
-          let height = 0
-          for (let i = 0; i < trList.length; i++) {
-            const trEl = trList[i] as HTMLTableRowElement
-            const tdList = trEl.children
-            for (let j = 0; j < tdList.length; j++) {
-              const tdEl = tdList[j]
-              const cellElem = tdEl.querySelector('.vxe-cell') as HTMLDivElement
-              if (!calcPadding) {
-                paddingTop = XEUtils.toNumber(getComputedStyle(tdEl).paddingTop)
-                paddingBottom = XEUtils.toNumber(getComputedStyle(tdEl).paddingBottom)
-                calcPadding = true
-              }
-              let cellHeight = paddingTop + paddingBottom
-              if (cellElem) {
-                cellHeight += cellElem.offsetHeight
-              }
-              height = Math.max(height, cellHeight)
-            }
-          }
-          rowRest.height = scrollXLoad ? Math.max(rowRest.height, height) : height
-        }
-      })
-    }
-  },
   updateHeight () {
     this.customHeight = calcTableHeight(this, 'height')
     this.customMinHeight = calcTableHeight(this, 'minHeight')
@@ -3033,7 +3009,7 @@ const Methods = {
           } else {
             if (fixedType) {
               // 如果是使用优化模式
-              if (allColumnHeaderOverflow) {
+              if (scrollXLoad || scrollYLoad || allColumnHeaderOverflow) {
                 // 如果不支持优化模式
                 if (spanMethod || footerSpanMethod) {
                   renderColumnList = visibleColumn
@@ -3163,7 +3139,7 @@ const Methods = {
 
           if (fixedType) {
             // 如果是使用优化模式
-            if (allColumnFooterOverflow) {
+            if (scrollXLoad || scrollYLoad || allColumnFooterOverflow) {
               // 如果不支持优化模式
               if (spanMethod || footerSpanMethod) {
                 renderColumnList = visibleColumn
@@ -5181,7 +5157,8 @@ const Methods = {
     const triggerFilter = getEventTargetNode(evnt, cell, 'vxe-cell--filter').flag
     let triggerDrag = false
     if (!(triggerInput || triggerCheckbox || triggerSort || triggerFilter)) {
-      if (columnOpts.drag && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
+      const { column } = params
+      if (columnOpts.drag && !column.fixed && trigger === 'cell' && !(disabledMethod && disabledMethod(params))) {
         triggerDrag = true
         $xeTable.handleHeaderCellDragMousedownEvent(evnt, params)
       }
@@ -5519,7 +5496,7 @@ const Methods = {
       evnt.dataTransfer.setDragImage(img, 0, 0)
     }
   },
-  handleHeaderCellDragDragendEvent (evnt: DragEvent) {
+  handleColDragSwapEvent (evnt: DragEvent, isSyncColumn: boolean | undefined, dragCol: VxeTableDefines.ColumnInfo | null | undefined, prevDragCol: VxeTableDefines.ColumnInfo | undefined, prevDragPos: '' | 'top' | 'bottom' | 'left' | 'right' | undefined, prevDragToChild: boolean | undefined) {
     const $xeTable = this
     const props = $xeTable
     const reactData = $xeTable
@@ -5528,15 +5505,14 @@ const Methods = {
     const { mouseConfig } = props
     const columnDragOpts = $xeTable.computeColumnDragOpts
     const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts
-    const { dragCol } = reactData
-    const { collectColumn, prevDragCol, prevDragPos, prevDragToChild } = internalData
+    const { collectColumn } = 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(
+        const oldColumn = dragCol
+        const newColumn = prevDragCol
+        return Promise.resolve(
           dragEndMethod
             ? dragEndMethod({
               oldColumn,
@@ -5663,10 +5639,6 @@ const Methods = {
             }
           }
 
-          $xeTable.refreshColumn(true).then(() => {
-            $xeTable.updateCellAreas()
-          })
-
           $xeTable.dispatchEvent('column-dragend', {
             oldColumn,
             newColumn,
@@ -5678,11 +5650,27 @@ const Methods = {
             }
           }, evnt)
 
-          $xeTable.saveCustomStore('update:sort')
+          if (isSyncColumn) {
+            $xeTable.handleUpdateColumn()
+            $xeTable.parseColumns(false).then(() => {
+              $xeTable.updateCellAreas()
+              return $xeTable.saveCustomStore('update:sort')
+            })
+          }
         }).catch(() => {
         })
       }
     }
+    return Promise.resolve()
+  },
+  handleHeaderCellDragDragendEvent (evnt: DragEvent) {
+    const $xeTable = this
+    const reactData = $xeTable
+    const internalData = $xeTable
+
+    const { dragCol } = reactData
+    const { prevDragCol, prevDragPos, prevDragToChild } = internalData
+    $xeTable.handleColDragSwapEvent(evnt, true, dragCol, prevDragCol, prevDragPos, prevDragToChild)
     hideDropTip($xeTable)
     clearColDropOrigin($xeTable)
     internalData.prevDragToChild = false
@@ -5690,6 +5678,9 @@ const Methods = {
     reactData.dragCol = null
     setTimeout(() => {
       reactData.isDragColMove = false
+      $xeTable.recalculate().then(() => {
+        $xeTable.loadScrollXData()
+      })
     }, 500)
   },
   handleHeaderCellDragDragoverEvent (evnt: DragEvent) {
@@ -5710,10 +5701,10 @@ const Methods = {
     const column = $xeTable.getColumnById(colid)
     if (column) {
       evnt.preventDefault()
-      const { dragCol } = reactData
-      const offsetX = evnt.clientX - thEl.getBoundingClientRect().x
+      const { clientX } = evnt
+      const offsetX = clientX - thEl.getBoundingClientRect().x
       const dragPos = offsetX < thEl.clientWidth / 2 ? 'left' : 'right'
-      if ((dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
+      if (column.fixed || (dragCol && dragCol.id === column.id) || (!isCrossDrag && column.parentId)) {
         showDropTip($xeTable, evnt, null, thEl, false, dragPos)
         return
       }
@@ -5726,6 +5717,36 @@ const Methods = {
         targetColumn: column,
         dragPos
       }, evnt)
+
+      // 边缘滚动
+      const el = $xeTable.$refs.refElem as HTMLElement
+      if (!el) {
+        return
+      }
+      const xHandleEl = $xeTable.$refs.refScrollXHandleElem as HTMLDivElement
+      const tableBody = $xeTable.$refs.tableBody
+      const tableBodyElem = tableBody ? tableBody.$el as HTMLDivElement : null
+      const scrollTargetEl = xHandleEl || tableBodyElem
+      if (scrollTargetEl) {
+        const wrapperRect = el.getBoundingClientRect()
+        const tableWidth = el.clientWidth
+        const leftContainerElem = $xeTable.$refs.leftContainer as HTMLDivElement
+        const leftContainerWidth = leftContainerElem ? leftContainerElem.clientWidth : 0
+        const rightContainerElem = $xeTable.$refs.rightContainer as HTMLDivElement
+        const rightContainerWidth = rightContainerElem ? rightContainerElem.clientWidth : 0
+        const srartX = wrapperRect.x + leftContainerWidth
+        const endX = wrapperRect.x + tableWidth - rightContainerWidth
+        const distSize = 28
+        const startDistSize = clientX - srartX
+        const endDistSize = endX - clientX
+        if (startDistSize > 0 && startDistSize <= distSize) {
+          const scrollRatio = Math.floor(tableWidth / (startDistSize > distSize / 2 ? 240 : 120))
+          scrollTargetEl.scrollLeft -= scrollRatio * (distSize - startDistSize)
+        } else if (endDistSize > 0 && endDistSize <= distSize) {
+          const scrollRatio = Math.floor(tableWidth / (endDistSize > distSize / 2 ? 240 : 120))
+          scrollTargetEl.scrollLeft += scrollRatio * (distSize - endDistSize)
+        }
+      }
     }
   },
   handleHeaderCellDragMousedownEvent (evnt: MouseEvent, params: any) {
@@ -6983,6 +7004,16 @@ const Methods = {
     })
     this.tableColumn = tableColumn
   },
+  handleUpdateColumn () {
+    const $xeTable = this
+    const internalData = $xeTable
+
+    const columnList = XEUtils.orderBy(internalData.collectColumn, 'renderSortNumber')
+    internalData.collectColumn = columnList
+    const tableFullColumn = getColumnList(columnList)
+    internalData.tableFullColumn = tableFullColumn
+    $xeTable.cacheColumnMap()
+  },
   updateScrollXData () {
     const $xeTable = this
     const props = $xeTable

package/packages/table/src/table.ts

@@ -23,7 +23,7 @@ import keyboardMixin from '../module/keyboard/mixin'
 import validatorMixin from '../module/validator/mixin'
 import customMixin from '../module/custom/mixin'
 
-import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods, VxeComponentStyleType } from 'vxe-pc-ui'
+import type { VxeLoadingComponent, VxeTooltipComponent, VxeTabsConstructor, VxeTabsPrivateMethods } from 'vxe-pc-ui'
 
 const { getConfig, getIcon, getI18n, renderer, globalResize, globalEvents, globalMixins, renderEmptyElement } = VxeUI
 
@@ -778,18 +778,6 @@ export default {
         y: overflowY && scrollYLoad
       }
     },
-    computeTableStyle () {
-      const $xeTable = this
-      const reactData = $xeTable
-
-      const { tableData } = reactData
-      const columnOpts = $xeTable.computeColumnOpts
-      const stys: VxeComponentStyleType = {}
-      if (columnOpts.drag) {
-        stys['--vxe-ui-table-drag-column-move-delay'] = `${Math.max(0.06, Math.min(0.3, tableData.length / 800))}s`
-      }
-      return stys
-    },
     tabsResizeFlag () {
       const $xeTable = this
       const $xeTabs = $xeTable.$xeTabs
@@ -844,6 +832,11 @@ export default {
     maxHeight () {
       this.$nextTick(() => this.recalculate(true))
     },
+    computeSize () {
+      this.$nextTick(() => {
+        this.recalculate(true).then(() => this.refreshScroll())
+      })
+    },
     syncResize (value: any) {
       if (value) {
         handleUupdateResize(this)
@@ -1255,7 +1248,6 @@ export default {
     const tableBorder = $xeTable.computeTableBorder
     const virtualScrollBars = $xeTable.computeVirtualScrollBars
     const isArea = mouseConfig && mouseOpts.area
-    const tableStyle = $xeTable.computeTableStyle
     const columnDragOpts = $xeTable.computeColumnDragOpts
     return h('div', {
       ref: 'refElem',
@@ -1290,7 +1282,6 @@ export default {
         'is--virtual-x': scrollXLoad,
         'is--virtual-y': scrollYLoad
       }],
-      style: tableStyle,
       attrs: {
         spellcheck: false
       },

package/packages/ui/index.ts

@@ -49,11 +49,13 @@ VxeUI.setConfig({
     },
     rowDragConfig: {
       showIcon: true,
-      animation: true
+      animation: true,
+      showGuidesStatus: true
     },
     columnDragConfig: {
       showIcon: true,
-      animation: true
+      animation: true,
+      showGuidesStatus: true
     },
     checkboxConfig: {
       // trigger: 'default',

package/styles/components/table.scss

@@ -732,7 +732,7 @@
   &.col--drag-cell {
     .vxe-header--column {
       user-select: none;
-      &:not(.is--drag-disabled) {
+      &.is--drag-active {
         cursor: grab;
         &:active {
           cursor: grabbing;
@@ -1377,7 +1377,6 @@
   .vxe-header--col-list-move {
     transition-property: transform;
     transition-duration: 0.35s;
-    transition-delay: var(--vxe-ui-table-drag-column-move-delay, 0.3s);
   }
 
   .vxe-table--drag-col-line,
@@ -1459,7 +1458,6 @@
   .vxe-body--row-list-move {
     transition-property: transform;
     transition-duration: 0.35s;
-    transition-delay: 0.05s;
   }
   .vxe-table--drag-sort-tip {
     display: none;