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

package/es/table/module/keyboard/hook.js

@@ -272,8 +272,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) {

package/es/table/src/anime.js

@@ -0,0 +1,46 @@
+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, offsetTop) {
+    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) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-body--row.${rowMoveCls}`), elem => removeClass(elem, rowMoveCls));
+        }
+    }, 500);
+}
+/**
+ * 左右拖拽
+ */
+export function moveColAnimateToLr(elemList, offsetLeft) {
+    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) {
+    setTimeout(() => {
+        if (elem) {
+            XEUtils.arrayEach(elem.querySelectorAll(`.vxe-table--column.${colMoveClass}`), elem => removeClass(elem, colMoveClass));
+        }
+    }, 500);
+}

package/es/table/src/body.js

@@ -1,4 +1,4 @@
-import { TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
+import { h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
 import { defineVxeComponent } from '../../ui/src/comp';
 import XEUtils from 'xe-utils';
 import { VxeUI } from '../../ui';
@@ -22,7 +22,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refBodyScroll = ref();
         const refBodyTable = ref();
@@ -389,7 +389,7 @@ export default defineVxeComponent({
                 }));
             }
             return h('td', Object.assign(Object.assign(Object.assign({ class: [
-                    'vxe-body--column',
+                    'vxe-table--column vxe-body--column',
                     colid,
                     cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
                     cellAlign ? `col--${cellAlign}` : '',
@@ -422,7 +422,7 @@ export default defineVxeComponent({
         const renderRows = (fixedType, isOptimizeMode, tableData, tableColumn) => {
             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;
@@ -430,7 +430,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 = [];
@@ -510,11 +509,7 @@ export default defineVxeComponent({
                 const tdVNs = tableColumn.map((column, $columnIndex) => {
                     return renderTdColumn(seq, rowid, fixedType, isOptimizeMode, rowLevel, row, rowIndex, $rowIndex, _rowIndex, column, $columnIndex, tableColumn, tableData);
                 });
-                rows.push(!isColLoading && (columnOpts.drag && columnDragOpts.animation)
-                    ? h(TransitionGroup, Object.assign({ 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', Object.assign({ 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));
+                rows.push(h('tr', Object.assign({ 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) {
                     const expandOpts = computeExpandOpts.value;
@@ -641,12 +636,10 @@ export default defineVxeComponent({
             const $xeGrid = $xeTable.xeGrid;
             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;
             let renderColumnList = tableColumn;
@@ -779,17 +772,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/es/table/src/columnInfo.js

@@ -43,6 +43,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, {
             // 基本属性
             type: _vm.type,

package/es/table/src/footer.js

@@ -1,9 +1,9 @@
-import { TransitionGroup, h, ref, inject, nextTick, onMounted, onUnmounted } from 'vue';
+import { h, ref, 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';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'footer';
 export default defineVxeComponent({
@@ -29,7 +29,7 @@ export default defineVxeComponent({
     setup(props) {
         const $xeTable = inject('$xeTable', {});
         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();
         const refFooterScroll = ref();
         const refFooterTable = ref();
@@ -50,7 +50,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;
                 const colid = column.id;
@@ -160,7 +160,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-footer--column', column.id, {
+                return h('td', Object.assign(Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-footer--column', column.id, {
                             [`col--${footAlign}`]: footAlign,
                             [`col--${type}`]: type,
                             'col--last': isLastColumn,
@@ -203,26 +203,9 @@ export default defineVxeComponent({
         const renderHeads = (isOptimizeMode, renderColumnList) => {
             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/es/table/src/header.js

@@ -1,8 +1,8 @@
-import { TransitionGroup, h, ref, inject, nextTick, watch, onMounted, onUnmounted } from 'vue';
+import { h, ref, 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';
 const { renderer, renderEmptyElement } = VxeUI;
 const renderType = 'header';
 export default defineVxeComponent({
@@ -45,7 +45,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) => {
                 const { type, showHeaderOverflow, headerAlign, align, filters, headerClassName, editRender, cellRender } = column;
@@ -129,7 +129,7 @@ export default defineVxeComponent({
                 else {
                     tcStyle.minHeight = `${currCellHeight}px`;
                 }
-                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-header--column', colid, {
+                return h('th', Object.assign(Object.assign(Object.assign({ class: ['vxe-table--column vxe-header--column', colid, {
                             [`col--${headAlign}`]: headAlign,
                             [`col--${type}`]: type,
                             'col--last': isLastColumn,
@@ -180,25 +180,8 @@ export default defineVxeComponent({
         const renderHeads = (isGroup, isOptimizeMode, headerGroups) => {
             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: [