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

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

@@ -96,10 +96,6 @@ export default {
         }
       })
       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

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

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

@@ -346,8 +346,8 @@ export default {
       const $xeTable = this as VxeTableConstructor & VxeTablePrivateMethods
 
       const { editConfig, editOpts, handleSelected, checkboxConfig, checkboxOpts, mouseConfig, mouseOpts } = this
-      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) {
           this.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

@@ -425,7 +425,7 @@ function renderTdColumn (
 
   return h('td', {
     class: [
-      'vxe-body--column',
+      'vxe-table--column vxe-body--column',
       colid,
       cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
       cellAlign ? `col--${cellAlign}` : '',
@@ -469,7 +469,7 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   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 = $xeTable.computeCheckboxOpts
   const radioOpts = $xeTable.computeRadioOpts
@@ -477,7 +477,6 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
   const editOpts = $xeTable.computeEditOpts
   const rowOpts = $xeTable.computeRowOpts
   const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
   const { transform, seqMode } = treeOpts
   const childrenField = treeOpts.children || treeOpts.childrenField
   const rows: any[] = []
@@ -558,29 +557,15 @@ function renderRows (h: CreateElement, _vm: any, fixedType: 'left' | 'right' | '
       return renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData)
     })
     rows.push(
-      !isColLoading && (columnOpts.drag && columnDragOpts.animation)
-        ? h('transition-group', {
-          props: {
-            tag: 'tr',
-            name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`
-          },
-          class: trClass,
-          attrs: {
-            rowid
-          },
-          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
-          key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-          nativeOn: trOn
-        }, tdVNs)
-        : h('tr', {
-          class: trClass,
-          attrs: {
-            rowid
-          },
-          style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
-          key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-          on: trOn
-        }, tdVNs)
+      h('tr', {
+        class: trClass,
+        attrs: {
+          rowid
+        },
+        style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) as VxeComponentStyleType : undefined,
+        key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+        on: trOn
+      }, tdVNs)
     )
     // 如果行被展开了
     if (isExpandRow) {
@@ -744,12 +729,10 @@ export default {
     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 = $xeTable.computeRowOpts
     const emptyOpts = $xeTable.computeEmptyOpts
     const mouseOpts = $xeTable.computeMouseOpts
-    const rowDragOpts = $xeTable.computeRowDragOpts
     const expandOpts = $xeTable.computeExpandOpts
 
     let renderDataList = tableData
@@ -895,17 +878,9 @@ export default {
           /**
            * 内容
            */
-          !(isRowLoading || isColLoading) && (rowOpts.drag && rowDragOpts.animation)
-            ? h('transition-group', {
-              ref: 'refBodyTBody',
-              props: {
-                tag: 'tbody',
-                name: `vxe-body--row-list${isDragRowMove ? '' : '-disabled'}`
-              }
-            }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
-            : h('tbody', {
-              ref: 'refBodyTBody'
-            }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
+          h('tbody', {
+            ref: 'refBodyTBody'
+          }, renderRows(h, this, fixedType, isOptimizeMode, renderDataList, renderColumnList))
         ]),
         h('div', {
           class: 'vxe-table--checkbox-range'

package/packages/table/src/columnInfo.ts

@@ -14,7 +14,7 @@ export class ColumnInfo {
     const tableProps = $xeTable
     const $xeGrid = $xeTable.$xeGrid as VxeGridConstructor & GridPrivateMethods
 
-    const proxyOpts = $xeGrid ? $xeGrid.proxyOpts : null
+    const proxyOpts = $xeGrid ? $xeGrid.computeProxyOpts : null
     const formatter = _vm.formatter
     const visible = XEUtils.isBoolean(_vm.visible) ? _vm.visible : true
 
@@ -53,6 +53,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

@@ -145,7 +145,7 @@ function renderRows (h: CreateElement, _vm: any, isOptimizeMode: boolean, tableC
     }
 
     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,
@@ -199,33 +199,15 @@ function renderHeads (h: CreateElement, _vm: any, isOptimizeMode: boolean, rende
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
 
   const { fixedType, footerTableData } = props
 
   const { footerRowClassName, footerRowStyle } = tableProps
-  const { isColLoading, isDragColMove } = tableReactData
-  const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
 
   return (footerTableData as any[][]).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('transition-group', {
-        key: $rowIndex,
-        props: {
-          tag: 'tr',
-          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-          class: [
-            'vxe-footer--row',
-            footerRowClassName ? XEUtils.isFunction(footerRowClassName) ? footerRowClassName(rowParams) : footerRowClassName : ''
-          ],
-          style: footerRowStyle ? (XEUtils.isFunction(footerRowStyle) ? footerRowStyle(rowParams) : footerRowStyle) as VxeComponentStyleType : undefined
-        }
-      }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex))
-    }
     return h('tr', {
       key: $rowIndex,
       class: [

package/packages/table/src/header.ts

@@ -116,7 +116,7 @@ const renderRows = (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMode
     }
 
     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,
@@ -175,33 +175,14 @@ function renderHeads (h: CreateElement, _vm: any, isGroup: boolean, isOptimizeMo
   const props = _vm
   const $xeTable = _vm.$parent as VxeTableConstructor & VxeTablePrivateMethods
   const tableProps = $xeTable
-  const tableReactData = $xeTable as unknown as TableReactData
 
   const { fixedType } = props
 
-  const columnOpts = $xeTable.computeColumnOpts
-  const columnDragOpts = $xeTable.computeColumnDragOpts
-
   const { headerRowClassName, headerRowStyle } = tableProps
-  const { isColLoading, isDragColMove } = tableReactData
 
   return headerGroups.map((cols: any, $rowIndex: any) => {
     const params = { $table: $xeTable, $rowIndex, fixed: fixedType, type: cellType }
 
-    if (!isColLoading && columnOpts.drag && columnDragOpts.animation) {
-      return h('transition-group', {
-        key: $rowIndex,
-        props: {
-          tag: 'tr',
-          name: `vxe-header--col-list${isDragColMove ? '' : '-disabled'}`,
-          class: [
-            'vxe-header--row',
-            headerRowClassName ? XEUtils.isFunction(headerRowClassName) ? headerRowClassName(params) : headerRowClassName : ''
-          ],
-          style: headerRowStyle ? (XEUtils.isFunction(headerRowStyle) ? headerRowStyle(params) : headerRowStyle) : null
-        }
-      }, renderRows(h, _vm, isGroup, isOptimizeMode, cols, $rowIndex))
-    }
     return h('tr', {
       key: $rowIndex,
       class: [