vxe-table 4.14.0-beta.0 → 4.14.0-beta.2

package/packages/grid/src/grid.ts

@@ -9,7 +9,7 @@ import VxeToolbarComponent from '../../toolbar/src/toolbar'
 import tableComponentProps from '../../table/src/props'
 import tableComponentEmits from '../../table/src/emits'
 import { getSlotVNs } from '../../ui/src/vn'
-import { errLog } from '../../ui/src/log'
+import { warnLog, errLog } from '../../ui/src/log'
 
 import type { ValueOf, VxePagerComponent, VxeFormComponent, VxeFormEvents, VxeFormInstance, VxePagerEvents, VxeFormItemProps, VxePagerInstance, VxeComponentStyleType } from 'vxe-pc-ui'
 import type { VxeTableMethods, VxeGridConstructor, VxeGridEmits, GridReactData, VxeGridPropTypes, VxeToolbarPropTypes, GridMethods, GridPrivateMethods, VxeGridPrivateComputed, VxeGridPrivateMethods, VxeToolbarInstance, GridPrivateRef, VxeTableProps, VxeTableConstructor, VxeTablePrivateMethods, VxeTableEvents, VxeTableDefines, VxeTableEventProps, VxeGridProps } from '../../../types'
@@ -119,29 +119,29 @@ export default defineVxeComponent({
     })
 
     const computeProxyOpts = computed(() => {
-      return XEUtils.merge({}, XEUtils.clone(getConfig().grid.proxyConfig, true), props.proxyConfig) as VxeGridPropTypes.ProxyConfig
+      return XEUtils.merge({}, XEUtils.clone(getConfig().grid.proxyConfig, true), props.proxyConfig)
     })
 
     const computeIsRespMsg = computed(() => {
       const proxyOpts = computeProxyOpts.value
-      return XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg
+      return !!(XEUtils.isBoolean(proxyOpts.message) ? proxyOpts.message : proxyOpts.showResponseMsg)
     })
 
     const computeIsActiveMsg = computed(() => {
       const proxyOpts = computeProxyOpts.value
-      return proxyOpts.showActiveMsg
+      return !!proxyOpts.showActiveMsg
     })
 
     const computePagerOpts = computed(() => {
-      return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig) as VxeGridPropTypes.PagerConfig
+      return Object.assign({}, getConfig().grid.pagerConfig, props.pagerConfig)
     })
 
     const computeFormOpts = computed(() => {
-      return Object.assign({}, getConfig().grid.formConfig, props.formConfig) as VxeGridPropTypes.FormOpts
+      return Object.assign({}, getConfig().grid.formConfig, props.formConfig)
     })
 
     const computeToolbarOpts = computed(() => {
-      return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig) as VxeGridPropTypes.ToolbarOpts
+      return Object.assign({}, getConfig().grid.toolbarConfig, props.toolbarConfig)
     })
 
     const computeZoomOpts = computed(() => {
@@ -175,11 +175,12 @@ export default defineVxeComponent({
     })
 
     const computeTableProps = computed(() => {
-      const { seqConfig, pagerConfig, loading, editConfig, proxyConfig } = props
-      const { isZMax, tableLoading, tablePage } = reactData
+      const { seqConfig, pagerConfig, editConfig, proxyConfig } = props
+      const { isZMax, tablePage } = reactData
       const tableExtendProps = computeTableExtendProps.value
       const proxyOpts = computeProxyOpts.value
       const pagerOpts = computePagerOpts.value
+      const isLoading = computeIsLoading.value
       const tProps = Object.assign({}, tableExtendProps)
       if (isZMax) {
         if (tableExtendProps.maxHeight) {
@@ -189,7 +190,7 @@ export default defineVxeComponent({
         }
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
-        tProps.loading = loading || tableLoading
+        tProps.loading = isLoading
         if (pagerConfig && proxyOpts.seq && isEnableConf(pagerOpts)) {
           tProps.seqConfig = Object.assign({}, seqConfig, { startIndex: (tablePage.currentPage - 1) * tablePage.pageSize })
         }
@@ -242,6 +243,14 @@ export default defineVxeComponent({
       return pagerOpts.total
     })
 
+    const computeIsLoading = computed(() => {
+      const { loading, proxyConfig } = props
+      const { tableLoading } = reactData
+      const proxyOpts = computeProxyOpts.value
+      const { showLoading } = proxyOpts
+      return loading || (tableLoading && showLoading && proxyConfig && isEnableConf(proxyOpts))
+    })
+
     const refMaps: GridPrivateRef = {
       refElem,
       refTable,
@@ -390,12 +399,12 @@ export default defineVxeComponent({
         reactData.sortData = params.sortList
         if (proxyConfig && isEnableConf(proxyOpts)) {
           reactData.tablePage.currentPage = 1
-          gridMethods.commitProxy('query').then((rest) => {
-            gridMethods.dispatchEvent('proxy-query', rest, params.$event)
+          $xeGrid.commitProxy('query').then((rest) => {
+            $xeGrid.dispatchEvent('proxy-query', rest, params.$event)
           })
         }
       }
-      gridMethods.dispatchEvent('sort-change', params, params.$event)
+      $xeGrid.dispatchEvent('sort-change', params, params.$event)
     }
 
     const filterChangeEvent: VxeTableEvents.FilterChange = (params) => {
@@ -409,12 +418,12 @@ export default defineVxeComponent({
         reactData.filterData = params.filterList
         if (proxyConfig && isEnableConf(proxyOpts)) {
           reactData.tablePage.currentPage = 1
-          gridMethods.commitProxy('query').then((rest) => {
-            gridMethods.dispatchEvent('proxy-query', rest, params.$event)
+          $xeGrid.commitProxy('query').then((rest) => {
+            $xeGrid.dispatchEvent('proxy-query', rest, params.$event)
           })
         }
       }
-      gridMethods.dispatchEvent('filter-change', params, params.$event)
+      $xeGrid.dispatchEvent('filter-change', params, params.$event)
     }
 
     const submitFormEvent: VxeFormEvents.Submit = (params) => {
@@ -424,35 +433,35 @@ export default defineVxeComponent({
         return
       }
       if (proxyConfig && isEnableConf(proxyOpts)) {
-        gridMethods.commitProxy('reload').then((rest) => {
-          gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event)
+        $xeGrid.commitProxy('reload').then((rest) => {
+          $xeGrid.dispatchEvent('proxy-query', { ...rest, isReload: true }, params.$event)
         })
       }
-      gridMethods.dispatchEvent('form-submit', params, params.$event)
+      $xeGrid.dispatchEvent('form-submit', params, params.$event)
     }
 
     const resetFormEvent: VxeFormEvents.Reset = (params) => {
+      const $xeTable = refTable.value
       const { proxyConfig } = props
       const { $event } = params
       const proxyOpts = computeProxyOpts.value
-      const $xeTable = refTable.value
       if (proxyConfig && isEnableConf(proxyOpts)) {
         $xeTable.clearScroll()
-        gridMethods.commitProxy('reload').then((rest) => {
-          gridMethods.dispatchEvent('proxy-query', { ...rest, isReload: true }, $event)
+        $xeGrid.commitProxy('reload').then((rest) => {
+          $xeGrid.dispatchEvent('proxy-query', { ...rest, isReload: true }, $event)
         })
       }
-      gridMethods.dispatchEvent('form-reset', params, $event)
+      $xeGrid.dispatchEvent('form-reset', params, $event)
     }
 
     const submitInvalidEvent: VxeFormEvents.SubmitInvalid = (params) => {
-      gridMethods.dispatchEvent('form-submit-invalid', params, params.$event)
+      $xeGrid.dispatchEvent('form-submit-invalid', params, params.$event)
     }
 
     const collapseEvent: VxeFormEvents.Collapse = (params) => {
       const { $event } = params
-      gridMethods.dispatchEvent('form-toggle-collapse', params, $event)
-      gridMethods.dispatchEvent('form-collapse', params, $event)
+      $xeGrid.dispatchEvent('form-toggle-collapse', params, $event)
+      $xeGrid.dispatchEvent('form-collapse', params, $event)
     }
 
     const handleZoom = (isMax?: boolean) => {
@@ -464,9 +473,9 @@ export default defineVxeComponent({
         }
       }
       return nextTick()
-        .then(() => gridExtendTableMethods.recalculate(true))
+        .then(() => $xeGrid.recalculate(true))
         .then(() => {
-          setTimeout(() => gridExtendTableMethods.recalculate(true), 15)
+          setTimeout(() => $xeGrid.recalculate(true), 15)
           return reactData.isZMax
         })
     }
@@ -520,8 +529,8 @@ export default defineVxeComponent({
         } else {
           if (formOpts.items) {
             const formSlots: { [key: string]: () => VNode[] } = {}
-            if (!formOpts.inited) {
-              formOpts.inited = true
+            if (!(formOpts as any).inited) {
+              (formOpts as any).inited = true
               const beforeItem = proxyOpts.beforeItem
               if (proxyOpts && beforeItem) {
                 formOpts.items.forEach((item) => {
@@ -631,12 +640,13 @@ export default defineVxeComponent({
      * 渲染表格顶部区域
      */
     const renderTop = () => {
-      if (slots.top) {
+      const topSlot = slots.top
+      if (topSlot) {
         return h('div', {
           ref: refTopWrapper,
           key: 'top',
           class: 'vxe-grid--top-wrapper'
-        }, slots.top({ $grid: $xeGrid }))
+        }, topSlot({ $grid: $xeGrid }))
       }
       return renderEmptyElement($xeGrid)
     }
@@ -830,6 +840,30 @@ export default defineVxeComponent({
       tableCompEvents[type] = (...args: any[]) => emit(name, ...args)
     })
 
+    const getDefaultFormData = () => {
+      const formOpts = computeFormOpts.value
+      if (formOpts.items) {
+        const fData: any = {}
+        formOpts.items.forEach(item => {
+          const { field, itemRender } = item
+          if (field) {
+            let itemValue: any = null
+            if (itemRender) {
+              const { defaultValue } = itemRender
+              if (XEUtils.isFunction(defaultValue)) {
+                itemValue = defaultValue({ item })
+              } else if (!XEUtils.isUndefined(defaultValue)) {
+                itemValue = defaultValue
+              }
+            }
+            fData[field] = itemValue
+          }
+        })
+        return fData
+      }
+      return {}
+    }
+
     const initProxy = () => {
       const { proxyConfig, formConfig } = props
       const { proxyInited } = reactData
@@ -837,40 +871,24 @@ export default defineVxeComponent({
       const formOpts = computeFormOpts.value
       if (proxyConfig && isEnableConf(proxyOpts)) {
         if (formConfig && isEnableConf(formOpts) && proxyOpts.form && formOpts.items) {
-          const fData: any = {}
-          formOpts.items.forEach(item => {
-            const { field, itemRender } = item
-            if (field) {
-              let itemValue: any = null
-              if (itemRender) {
-                const { defaultValue } = itemRender
-                if (XEUtils.isFunction(defaultValue)) {
-                  itemValue = defaultValue({ item })
-                } else if (!XEUtils.isUndefined(defaultValue)) {
-                  itemValue = defaultValue
-                }
-              }
-              fData[field] = itemValue
-            }
-          })
-          reactData.formData = fData
+          reactData.formData = getDefaultFormData()
         }
         if (!proxyInited) {
           reactData.proxyInited = true
           if (proxyOpts.autoLoad !== false) {
-            nextTick().then(() => gridMethods.commitProxy('_init')).then((rest) => {
-              gridMethods.dispatchEvent('proxy-query', { ...rest, isInited: true }, new Event('init'))
+            nextTick().then(() => gridMethods.commitProxy('initial')).then((rest) => {
+              gridMethods.dispatchEvent('proxy-query', { ...rest, isInited: true }, new Event('initial'))
             })
           }
         }
       }
     }
 
-    const handleGlobalKeydownEvent = (evnt: any) => {
+    const handleGlobalKeydownEvent = (evnt: KeyboardEvent) => {
       const zoomOpts = computeZoomOpts.value
       const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE)
       if (isEsc && reactData.isZMax && zoomOpts.escRestore !== false) {
-        gridPrivateMethods.triggerZoomEvent(evnt)
+        $xeGrid.triggerZoomEvent(evnt)
       }
     }
 
@@ -888,7 +906,7 @@ export default defineVxeComponent({
        * @param {String/Object} code 字符串或对象
        */
       commitProxy (proxyTarget: string | VxeToolbarPropTypes.ButtonConfig, ...args: any[]) {
-        const { toolbarConfig, pagerConfig, editRules, validConfig } = props
+        const { proxyConfig, toolbarConfig, pagerConfig, editRules, validConfig } = props
         const { tablePage } = reactData
         const isActiveMsg = computeIsActiveMsg.value
         const isRespMsg = computeIsRespMsg.value
@@ -898,7 +916,7 @@ export default defineVxeComponent({
         const { beforeQuery, afterQuery, beforeDelete, afterDelete, beforeSave, afterSave, ajax = {} } = proxyOpts
         const resConfigs = proxyOpts.response || proxyOpts.props || {}
         const $xeTable = refTable.value
-        const formData = getFormData()
+        let formData = getFormData()
         let button: VxeToolbarPropTypes.ButtonConfig | null = null
         let code: string | null = null
         if (XEUtils.isString(proxyTarget)) {
@@ -941,14 +959,14 @@ export default defineVxeComponent({
             break
           case 'reset_custom':
             return $xeTable.resetCustom(true)
-          case '_init':
+          case 'initial':
           case 'reload':
           case 'query': {
             const ajaxMethods = ajax.query
             const querySuccessMethods = ajax.querySuccess
             const queryErrorMethods = ajax.queryError
             if (ajaxMethods) {
-              const isInited = code === '_init'
+              const isInited = code === 'initial'
               const isReload = code === 'reload'
               if (!isInited && reactData.tableLoading) {
                 return nextTick()
@@ -958,6 +976,7 @@ export default defineVxeComponent({
               let pageParams: any = {}
               if (pagerConfig) {
                 if (isInited || isReload) {
+                  // 重置分页
                   tablePage.currentPage = 1
                 }
                 if (isEnableConf(pagerOpts)) {
@@ -965,26 +984,41 @@ export default defineVxeComponent({
                 }
               }
               if (isInited) {
-                let defaultSort = null
+                // 重置代理表单数据
+                if (proxyConfig && isEnableConf(proxyOpts) && proxyOpts.form) {
+                  formData = getDefaultFormData()
+                  reactData.formData = formData
+                }
                 if ($xeTable) {
+                  const tableInternalData = $xeTable.internalData
+                  const { tableFullColumn, fullColumnFieldData } = tableInternalData
                   const { computeSortOpts } = $xeTable.getComputeMaps()
                   const sortOpts = computeSortOpts.value
-                  defaultSort = sortOpts.defaultSort
-                }
-                // 如果使用默认排序
-                if (defaultSort) {
-                  if (!XEUtils.isArray(defaultSort)) {
-                    defaultSort = [defaultSort]
-                  }
-                  sortList = defaultSort.map((item) => {
-                    return {
-                      field: item.field,
-                      property: item.field,
-                      order: item.order
-                    }
+                  let defaultSort = sortOpts.defaultSort
+                  tableFullColumn.forEach((column) => {
+                    column.order = null
                   })
-                }
-                if ($xeTable) {
+                  // 如果使用默认排序
+                  if (defaultSort) {
+                    if (!XEUtils.isArray(defaultSort)) {
+                      defaultSort = [defaultSort]
+                    }
+                    sortList = defaultSort.map((item) => {
+                      const { field, order } = item
+                      const colRest = fullColumnFieldData[field]
+                      if (colRest) {
+                        const column = colRest.column
+                        if (column) {
+                          column.order = order
+                        }
+                      }
+                      return {
+                        field,
+                        property: field,
+                        order
+                      }
+                    })
+                  }
                   filterList = $xeTable.getCheckedFilters()
                 }
               } else {
@@ -1310,23 +1344,23 @@ export default defineVxeComponent({
       },
       triggerToolbarCommitEvent (params, evnt) {
         const { code } = params
-        return gridMethods.commitProxy(params, evnt).then((rest) => {
+        return $xeGrid.commitProxy(params, evnt).then((rest) => {
           if (code && rest && rest.status && ['query', 'reload', 'delete', 'save'].includes(code)) {
-            gridMethods.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code as 'delete' | 'save'}` : 'proxy-query', { ...rest, isReload: code === 'reload' }, evnt)
+            $xeGrid.dispatchEvent(code === 'delete' || code === 'save' ? `proxy-${code as 'delete' | 'save'}` : 'proxy-query', { ...rest, isReload: code === 'reload' }, evnt)
           }
         })
       },
       triggerToolbarBtnEvent (button, evnt) {
-        gridPrivateMethods.triggerToolbarCommitEvent(button, evnt)
-        gridMethods.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt)
+        $xeGrid.triggerToolbarCommitEvent(button, evnt)
+        $xeGrid.dispatchEvent('toolbar-button-click', { code: button.code, button }, evnt)
       },
       triggerToolbarTolEvent (tool, evnt) {
-        gridPrivateMethods.triggerToolbarCommitEvent(tool, evnt)
-        gridMethods.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt)
+        $xeGrid.triggerToolbarCommitEvent(tool, evnt)
+        $xeGrid.dispatchEvent('toolbar-tool-click', { code: tool.code, tool }, evnt)
       },
       triggerZoomEvent (evnt) {
-        gridMethods.zoom()
-        gridMethods.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
+        $xeGrid.zoom()
+        $xeGrid.dispatchEvent('zoom', { type: reactData.isZMax ? 'max' : 'revert' }, evnt)
       }
     }
 
@@ -1356,6 +1390,23 @@ export default defineVxeComponent({
       }
     })
 
+    const renderVN = () => {
+      const vSize = computeSize.value
+      const styles = computeStyles.value
+      const isLoading = computeIsLoading.value
+      return h('div', {
+        ref: refElem,
+        class: ['vxe-grid', {
+          [`size--${vSize}`]: vSize,
+          'is--animat': !!props.animat,
+          'is--round': props.round,
+          'is--maximize': reactData.isZMax,
+          'is--loading': isLoading
+        }],
+        style: styles
+      }, renderLayout())
+    }
+
     const columnFlag = ref(0)
     watch(() => props.columns ? props.columns.length : -1, () => {
       columnFlag.value++
@@ -1402,6 +1453,7 @@ export default defineVxeComponent({
     onMounted(() => {
       nextTick(() => {
         const { columns } = props
+        const proxyOpts = computeProxyOpts.value
 
         if (props.formConfig) {
           if (!VxeUIFormComponent) {
@@ -1415,15 +1467,14 @@ export default defineVxeComponent({
         }
 
         // const { data, columns, proxyConfig } = props
-        // const proxyOpts = computeProxyOpts.value
         // const formOpts = computeFormOpts.value
         // if (isEnableConf(proxyConfig) && (data || (proxyOpts.form && formOpts.data))) {
         //   errLog('vxe.error.errConflicts', ['grid.data', 'grid.proxy-config'])
         // }
 
-        //   if (proxyOpts.props) {
-        //     warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
-        //   }
+        if (proxyOpts.props) {
+          warnLog('vxe.error.delProp', ['proxy-config.props', 'proxy-config.response'])
+        }
 
         if (columns && columns.length) {
           $xeGrid.loadColumn(columns)
@@ -1438,22 +1489,6 @@ export default defineVxeComponent({
       globalEvents.off($xeGrid, 'keydown')
     })
 
-    const renderVN = () => {
-      const vSize = computeSize.value
-      const styles = computeStyles.value
-      return h('div', {
-        ref: refElem,
-        class: ['vxe-grid', {
-          [`size--${vSize}`]: vSize,
-          'is--animat': !!props.animat,
-          'is--round': props.round,
-          'is--maximize': reactData.isZMax,
-          'is--loading': props.loading || reactData.tableLoading
-        }],
-        style: styles
-      }, renderLayout())
-    }
-
     $xeGrid.renderVN = renderVN
 
     provide('$xeGrid', $xeGrid)

package/packages/table/module/custom/hook.ts

@@ -111,10 +111,6 @@ VxeUI.hooks.add('tableCustomModule', {
         }
       })
       reactData.isCustomStatus = true
-      reactData.isDragColMove = true
-      setTimeout(() => {
-        reactData.isDragColMove = false
-      }, 1000)
       return $xeTable.saveCustomStore('confirm').then(() => {
         if (allowGroup && allowValues && ($xeTable as any).handlePivotTableAggregateData) {
           if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {

package/packages/table/module/custom/panel.ts

@@ -475,7 +475,6 @@ export default defineVxeComponent({
               customColumnList.splice(nafIndex + dragOffsetIndex, 0, dragColumn)
             }
 
-            tableReactData.isDragColMove = true
             if (mouseConfig) {
               if ($xeTable.clearSelected) {
                 $xeTable.clearSelected()

package/packages/table/module/keyboard/hook.ts

@@ -268,8 +268,8 @@ hooks.add('tableKeyboardModule', {
       const checkboxOpts = computeCheckboxOpts.value
       const mouseOpts = computeMouseOpts.value
       const editOpts = computeEditOpts.value
-      if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaMousedownEvent) {
-        return $xeTable.triggerCellAreaMousedownEvent(evnt, params)
+      if (mouseConfig && mouseOpts.area && $xeTable.triggerCellAreaMousednEvent) {
+        return $xeTable.triggerCellAreaMousednEvent(evnt, params)
       } else {
         if (checkboxConfig && checkboxOpts.range) {
           handleCheckboxRangeEvent(evnt, params)

package/packages/table/src/anime.ts

@@ -0,0 +1,52 @@
+
+import XEUtils from 'xe-utils'
+import { addClass, removeClass } from '../../ui/src/dom'
+
+const rowMoveCls = 'row--drag-move'
+const colMoveClass = 'col--drag-move'
+
+/**
+ * 上下拖拽
+ */
+export function moveRowAnimateToTb (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetTop: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateY(${offsetTop}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, rowMoveCls)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearRowAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls))
+    }
+  }, 500)
+}
+
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr (elemList: NodeListOf<HTMLElement> | HTMLDivElement[], offsetLeft: number) {
+  XEUtils.arrayEach(elemList, trEl => {
+    trEl.style.transform = `translateX(${offsetLeft}px)`
+  })
+  requestAnimationFrame(() => {
+    XEUtils.arrayEach(elemList, trEl => {
+      addClass(trEl, colMoveClass)
+      trEl.style.transform = ''
+    })
+  })
+}
+
+export function clearColAnimate (elem: HTMLElement | undefined) {
+  setTimeout(() => {
+    if (elem) {
+      XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass))
+    }
+  }, 500)
+}

package/packages/table/src/body.ts

@@ -1,4 +1,4 @@
-import { TransitionGroup, h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
+import { h, ref, Ref, PropType, inject, nextTick, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
@@ -28,7 +28,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, context: tableContext, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeColumnDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps()
+    const { computeEditOpts, computeMouseOpts, computeCellOffsetWidth, computeAreaOpts, computeDefaultRowHeight, computeEmptyOpts, computeTooltipOpts, computeRadioOpts, computeExpandOpts, computeTreeOpts, computeCheckboxOpts, computeCellOpts, computeValidOpts, computeRowOpts, computeColumnOpts, computeRowDragOpts, computeResizableOpts, computeVirtualXOpts, computeVirtualYOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refBodyScroll = ref() as Ref<HTMLDivElement>
@@ -434,7 +434,7 @@ export default defineVxeComponent({
 
       return h('td', {
         class: [
-          'vxe-body--column',
+          'vxe-table--column vxe-body--column',
           colid,
           cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
           cellAlign ? `col--${cellAlign}` : '',
@@ -474,7 +474,7 @@ export default defineVxeComponent({
       const $xeGrid = $xeTable.xeGrid
 
       const { stripe, rowKey, highlightHoverRow, rowClassName, rowStyle, editConfig, treeConfig } = tableProps
-      const { hasFixedColumn, treeExpandedFlag, isColLoading, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, isDragColMove, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
+      const { hasFixedColumn, treeExpandedFlag, scrollXLoad, scrollYLoad, isAllOverflow, rowExpandedFlag, expandColumn, selectRadioRow, pendingRowFlag, rowExpandHeightFlag, isRowGroupStatus } = tableReactData
       const { fullAllDataRowIdData, fullColumnIdData, treeExpandedMaps, pendingRowMaps, rowExpandedMaps } = tableInternalData
       const checkboxOpts = computeCheckboxOpts.value
       const radioOpts = computeRadioOpts.value
@@ -482,7 +482,6 @@ export default defineVxeComponent({
       const editOpts = computeEditOpts.value
       const rowOpts = computeRowOpts.value
       const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
       const { transform, seqMode } = treeOpts
       const childrenField = treeOpts.children || treeOpts.childrenField
       const rows: any[] = []
@@ -562,25 +561,13 @@ export default defineVxeComponent({
           return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
         })
         rows.push(
-          !isColLoading && (columnOpts.drag && columnDragOpts.animation)
-            ? h(TransitionGroup, {
-              name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-              tag: 'tr',
-              class: trClass,
-              rowid: rowid,
-              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-              key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-              ...trOn
-            }, {
-              default: () => tdVNs
-            })
-            : h('tr', {
-              class: trClass,
-              rowid: rowid,
-              style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
-              key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-              ...trOn
-            }, tdVNs)
+          h('tr', {
+            class: trClass,
+            rowid: rowid,
+            style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : null,
+            key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+            ...trOn
+          }, tdVNs)
         )
         // 如果行被展开了
         if (isExpandRow) {
@@ -715,12 +702,10 @@ export default defineVxeComponent({
 
       const { fixedColumn, fixedType, tableColumn } = props
       const { spanMethod, footerSpanMethod, mouseConfig } = tableProps
-      const { isGroup, tableData, isRowLoading, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, isDragRowMove, expandColumn, dragRow, dragCol } = tableReactData
+      const { isGroup, tableData, isColLoading, overflowX, scrollXLoad, scrollYLoad, isAllOverflow, expandColumn, dragRow, dragCol } = tableReactData
       const { visibleColumn, fullAllDataRowIdData, fullColumnIdData } = tableInternalData
-      const rowOpts = computeRowOpts.value
       const emptyOpts = computeEmptyOpts.value
       const mouseOpts = computeMouseOpts.value
-      const rowDragOpts = computeRowDragOpts.value
       const expandOpts = computeExpandOpts.value
 
       let renderDataList = tableData
@@ -860,17 +845,9 @@ export default defineVxeComponent({
             /**
              * 内容
              */
-            !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
-              ? h(TransitionGroup, {
-                ref: refBodyTBody,
-                name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`,
-                tag: 'tbody'
-              }, {
-                default: () => renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList)
-              })
-              : h('tbody', {
-                ref: refBodyTBody
-              }, renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList))
+            h('tbody', {
+              ref: refBodyTBody
+            }, renderRows(fixedType, isOptimizeMode, renderDataList, renderColumnList))
           ]),
           h('div', {
             class: 'vxe-table--checkbox-range'