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

package/packages/grid/src/grid.ts

@@ -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,
@@ -981,7 +990,7 @@ export default defineVxeComponent({
                   reactData.formData = formData
                 }
                 if ($xeTable) {
-                  const { internalData: tableInternalData } = $xeTable
+                  const tableInternalData = $xeTable.internalData
                   const { tableFullColumn, fullColumnFieldData } = tableInternalData
                   const { computeSortOpts } = $xeTable.getComputeMaps()
                   const sortOpts = computeSortOpts.value
@@ -1381,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++
@@ -1463,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/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'

package/packages/table/src/columnInfo.ts

@@ -47,6 +47,11 @@ export class ColumnInfo {
         }
       }
     }
+    if (_vm.aggFunc) {
+      if (!$xeTable.handlePivotTableAggregateData && _vm.aggFunc !== true) {
+        errLog('vxe.error.errProp', [`column.agg-func=${_vm.aggFunc}`, 'column.agg-func=true'])
+      }
+    }
 
     Object.assign(this, {
       // 基本属性

package/packages/table/src/footer.ts

@@ -1,9 +1,9 @@
-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'
 import { updateCellTitle, getPropClass } from '../../ui/src/dom'
-import { getCellHeight } from './util'
+import { getCalcHeight } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines } from '../../../types'
 
@@ -35,7 +35,7 @@ export default defineVxeComponent({
     const $xeTable = inject('$xeTable', {} as VxeTableConstructor & VxeTableMethods & VxeTablePrivateMethods)
 
     const { xID, props: tableProps, reactData: tableReactData, internalData: tableInternalData } = $xeTable
-    const { computeTooltipOpts, computeColumnOpts, computeColumnDragOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps()
+    const { computeTooltipOpts, computeColumnOpts, computeCellOpts, computeFooterCellOpts, computeDefaultRowHeight, computeResizableOpts, computeVirtualXOpts } = $xeTable.getComputeMaps()
 
     const refElem = ref() as Ref<HTMLDivElement>
     const refFooterScroll = ref() as Ref<HTMLDivElement>
@@ -59,7 +59,7 @@ export default defineVxeComponent({
       const defaultRowHeight = computeDefaultRowHeight.value
       const cellOpts = computeCellOpts.value
       const footerCellOpts = computeFooterCellOpts.value
-      const currCellHeight = getCellHeight(footerCellOpts.height) || defaultRowHeight
+      const currCellHeight = getCalcHeight(footerCellOpts.height) || defaultRowHeight
 
       return tableColumn.map((column, $columnIndex) => {
         const { type, showFooterOverflow, footerAlign, align, footerClassName, editRender, cellRender } = column
@@ -173,7 +173,7 @@ export default defineVxeComponent({
         }
 
         return h('td', {
-          class: ['vxe-footer--column', column.id, {
+          class: ['vxe-table--column vxe-footer--column', column.id, {
             [`col--${footAlign}`]: footAlign,
             [`col--${type}`]: type,
             'col--last': isLastColumn,
@@ -222,28 +222,11 @@ export default defineVxeComponent({
     const renderHeads = (isOptimizeMode: boolean, renderColumnList: VxeTableDefines.ColumnInfo[]) => {
       const { fixedType, footerTableData } = props
       const { footerRowClassName, footerRowStyle } = tableProps
-      const { isColLoading, isDragColMove } = tableReactData
-      const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
 
       return footerTableData.map((row, $rowIndex) => {
         const _rowIndex = $rowIndex
         const rowParams = { $table: $xeTable, row, _rowIndex, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-          return h(TransitionGroup, {
-            key: $rowIndex,
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-            tag: 'tr',
-            class: [
-              'vxe-footer--row',
-              footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
-            ],
-            style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) : null
-          }, {
-            default: () => renderRows(isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex)
-          })
-        }
         return h('tr', {
           key: $rowIndex,
           class: [

package/packages/table/src/header.ts

@@ -1,8 +1,8 @@
-import { TransitionGroup, h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
+import { h, ref, Ref, PropType, inject, nextTick, watch, onMounted, onUnmounted } from 'vue'
 import { defineVxeComponent } from '../../ui/src/comp'
 import XEUtils from 'xe-utils'
 import { VxeUI } from '../../ui'
-import { getCellHeight, convertHeaderColumnToRows } from './util'
+import { getCalcHeight, convertHeaderColumnToRows } from './util'
 
 import type { VxeTablePrivateMethods, VxeTableConstructor, VxeTableMethods, VxeTableDefines, VxeColumnPropTypes } from '../../../types'
 
@@ -56,7 +56,7 @@ export default defineVxeComponent({
       const cellOpts = computeCellOpts.value
       const defaultRowHeight = computeDefaultRowHeight.value
       const headerCellOpts = computeHeaderCellOpts.value
-      const currCellHeight = getCellHeight(headerCellOpts.height) || defaultRowHeight
+      const currCellHeight = getCalcHeight(headerCellOpts.height) || defaultRowHeight
       const { disabledMethod: dragDisabledMethod, isCrossDrag, isPeerDrag } = columnDragOpts
 
       return cols.map((column, $columnIndex) => {
@@ -146,7 +146,7 @@ export default defineVxeComponent({
         }
 
         return h('th', {
-          class: ['vxe-header--column', colid, {
+          class: ['vxe-table--column vxe-header--column', colid, {
             [`col--${headAlign}`]: headAlign,
             [`col--${type}`]: type,
             'col--last': isLastColumn,
@@ -203,27 +203,10 @@ export default defineVxeComponent({
     const renderHeads = (isGroup: boolean, isOptimizeMode: boolean, headerGroups: VxeTableDefines.ColumnInfo[][]) => {
       const { fixedType } = props
       const { headerRowClassName, headerRowStyle } = tableProps
-      const { isColLoading, isDragColMove } = tableReactData
-      const columnOpts = computeColumnOpts.value
-      const columnDragOpts = computeColumnDragOpts.value
 
       return headerGroups.map((cols, $rowIndex) => {
         const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: renderType }
 
-        if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-          return h(TransitionGroup, {
-            key: $rowIndex,
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-            tag: 'tr',
-            class: [
-              'vxe-header--row',
-              headerRowClassName ? (XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName) : ''
-            ],
-            style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-          }, {
-            default: () => renderRows(isGroup, isOptimizeMode, cols, $rowIndex)
-          })
-        }
         return h('tr', {
           key: $rowIndex,
           class: [