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

package/es/table/module/edit/mixin.js

@@ -86,11 +86,14 @@ function insertTreeRow($xeTable, newRecords, isAppend) {
         }
     });
 }
+// function insertGroupRow ($xeTable: VxeTableConstructor & VxeTablePrivateMethods, newRecords: any[], isAppend: boolean) {
+// }
 function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
     const props = $xeTable;
     const reactData = $xeTable;
     const internalData = $xeTable;
     const { treeConfig } = props;
+    const { isRowGroupStatus } = reactData;
     const { tableFullTreeData, afterFullData, mergeBodyList, tableFullData, fullDataRowIdData, fullAllDataRowIdData, insertRowMaps } = internalData;
     const treeOpts = $xeTable.computeTreeOpts;
     const { transform, rowField, mapChildrenField } = treeOpts;
@@ -104,6 +107,14 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
         if (treeConfig && transform) {
             insertTreeRow($xeTable, newRecords, false);
         }
+        else if (isRowGroupStatus) {
+            // 如果分组
+            if (treeConfig) {
+                throw new Error(getI18n('vxe.error.noTree', ['insert']));
+            }
+            warnLog(getI18n('vxe.error.noGroup', ['remove']));
+            // insertGroupRow($xeTable, newRecords, false)
+        }
         else {
             newRecords.forEach(item => {
                 const rowid = getRowid($xeTable, item);
@@ -128,6 +139,14 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
             if (treeConfig && transform) {
                 insertTreeRow($xeTable, newRecords, true);
             }
+            else if (isRowGroupStatus) {
+                // 如果分组
+                if (treeConfig) {
+                    throw new Error(getI18n('vxe.error.noTree', ['insert']));
+                }
+                warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                // insertGroupRow($xeTable, newRecords, true)
+            }
             else {
                 newRecords.forEach(item => {
                     const rowid = getRowid($xeTable, item);
@@ -192,6 +211,13 @@ function handleInsertRowAt($xeTable, records, targetRow, isInsertNextRow) {
                     insertTreeRow($xeTable, newRecords, true);
                 }
             }
+            else if (isRowGroupStatus) {
+                // 如果分组
+                if (treeConfig) {
+                    throw new Error(getI18n('vxe.error.noTree', ['insert']));
+                }
+                warnLog(getI18n('vxe.error.noGroup', ['remove']));
+            }
             else {
                 if (treeConfig) {
                     throw new Error(getI18n('vxe.error.noTree', ['insert']));
@@ -489,7 +515,7 @@ export default {
             const reactData = $xeTable;
             const internalData = $xeTable;
             const { treeConfig } = props;
-            const { editStore } = reactData;
+            const { editStore, isRowGroupStatus } = reactData;
             const { tableFullTreeData, selectCheckboxMaps, afterFullData, mergeBodyList, tableFullData, pendingRowMaps, insertRowMaps, removeRowMaps } = internalData;
             const checkboxOpts = $xeTable.computeCheckboxOpts;
             const treeOpts = $xeTable.computeTreeOpts;
@@ -548,6 +574,10 @@ export default {
                         }
                     });
                 }
+                else if (isRowGroupStatus) {
+                    // 如果分组
+                    warnLog(getI18n('vxe.error.noGroup', ['remove']));
+                }
                 else {
                     rows.forEach((row) => {
                         const tfIndex = this.findRowIndexOf(tableFullData, row);

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

@@ -352,8 +352,8 @@ export default {
         handleCellMousedownEvent(evnt, params) {
             const $xeTable = this;
             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) {

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

@@ -17,7 +17,7 @@ const isVMScrollProcess = ($xeTable) => {
 function renderLine(h, $xeTable, rowid, params, cellHeight) {
     const tableProps = $xeTable;
     const tableInternalData = $xeTable;
-    const { row, column } = params;
+    const { column } = params;
     const { afterFullData } = tableInternalData;
     const { treeConfig } = tableProps;
     const treeOpts = $xeTable.computeTreeOpts;
@@ -42,7 +42,7 @@ function renderLine(h, $xeTable, rowid, params, cellHeight) {
                 h('div', {
                     class: 'vxe-tree--line',
                     style: {
-                        height: `${$xeTable.eqRow(afterFullData[0], row) ? 1 : calcTreeLine(params, prevRow)}px`,
+                        height: `${getRowid($xeTable, afterFullData[0]) === rowid ? 1 : calcTreeLine(params, prevRow)}px`,
                         bottom: `-${Math.floor(cellHeight / 2)}px`,
                         left: `${(rLevel * treeOpts.indent) + (rLevel ? 2 - getOffsetSize($xeTable) : 0) + 16}px`
                     }
@@ -318,7 +318,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
                         colid,
                         rowid
                     },
-                    class: 'vxe-cell--wrapper'
+                    class: 'vxe-cell--wrapper vxe-body-cell--wrapper'
                 }, column.renderCell(h, cellParams))
             ]));
         if (showValidTip && errorValidItem) {
@@ -379,7 +379,7 @@ function renderTdColumn(h, $xeTable, seq, rowid, fixedType, isOptimizeMode, rowL
     }
     return h('td', {
         class: [
-            'vxe-body--column',
+            'vxe-table--column vxe-body--column',
             colid,
             cellVerticalAlign ? `col--vertical-${cellVerticalAlign}` : '',
             cellAlign ? `col--${cellAlign}` : '',
@@ -421,7 +421,7 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     const tableInternalData = $xeTable;
     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;
@@ -429,7 +429,6 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
     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 = [];
@@ -510,29 +509,15 @@ function renderRows(h, _vm, fixedType, isOptimizeMode, tableData, tableColumn) {
         const tdVNs = tableColumn.map((column, $columnIndex) => {
             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) : 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) : undefined,
-                key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
-                on: trOn
-            }, tdVNs));
+        rows.push(h('tr', {
+            class: trClass,
+            attrs: {
+                rowid
+            },
+            style: rowStyle ? (XEUtils.isFunction(rowStyle) ? rowStyle(params) : rowStyle) : undefined,
+            key: rowKey || scrollXLoad || scrollYLoad || rowOpts.useKey || rowOpts.drag || columnOpts.drag || isRowGroupStatus || treeConfig ? rowid : $rowIndex,
+            on: trOn
+        }, tdVNs));
         // 如果行被展开了
         if (isExpandRow) {
             const expandOpts = $xeTable.computeExpandOpts;
@@ -687,12 +672,10 @@ export default {
         const { xID } = $xeTable;
         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;
         let renderColumnList = tableColumn;
@@ -835,17 +818,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/es/table/src/cell.js

@@ -166,14 +166,14 @@ function getRenderDefaultColumnTitle(h, column, content) {
 }
 function renderTitleContent(h, params, content) {
     const { $table, column } = params;
-    const { showHeaderOverflow } = column;
     const tableProps = $table;
     const tableReactData = $table;
     const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
     const { isRowGroupStatus } = tableReactData;
+    const { showHeaderOverflow } = column;
     const tooltipOpts = $table.computeTooltipOpts;
     const showAllTip = tooltipOpts.showAll;
-    const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
+    const headOverflow = XEUtils.eqNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
     const showTitle = headOverflow === 'title';
     const showTooltip = headOverflow === true || headOverflow === 'tooltip';
     const ons = {};
@@ -202,7 +202,10 @@ function renderTitleContent(h, params, content) {
     }
     const titleVN = getRenderDefaultColumnTitle(h, column, content);
     return [
-        h('span', Object.assign({ class: 'vxe-cell--title' }, ons), isRowGroupStatus && column.aggFunc && $table.getPivotTableAggregateRenderColTitles
+        h('span', {
+            class: 'vxe-cell--title',
+            on: ons
+        }, isRowGroupStatus && column.aggFunc && $table.getPivotTableAggregateRenderColTitles
             ? $table.getPivotTableAggregateRenderColTitles(h, column, titleVN)
             : [
                 titleVN

package/es/table/src/columnInfo.js

@@ -9,7 +9,7 @@ export class ColumnInfo {
     constructor($xeTable, _vm, { renderHeader, renderCell, renderFooter, renderData } = {}) {
         const tableProps = $xeTable;
         const $xeGrid = $xeTable.$xeGrid;
-        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;
         const types = ['seq', 'checkbox', 'radio', 'expand', 'html'];
@@ -48,6 +48,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

@@ -14,7 +14,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
     const $xeGrid = $xeTable.$xeGrid;
     const { fixedType } = props;
     const { resizable: allResizable, border, footerCellClassName, footerCellStyle, footerAlign: allFooterAlign, footerSpanMethod, align: allAlign, columnKey, showFooterOverflow: allColumnFooterOverflow } = tableProps;
-    const { scrollXLoad, scrollYLoad, overflowX, currentColumn } = tableReactData;
+    const { scrollXLoad, scrollYLoad, overflowX, currentColumn, mergeFootFlag } = tableReactData;
     const { fullColumnIdData, mergeFooterList, mergeFooterCellMaps, scrollXStore } = tableInternalData;
     const virtualXOpts = $xeTable.computeVirtualXOpts;
     const tooltipOpts = $xeTable.computeTooltipOpts;
@@ -89,7 +89,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
         };
         let isMergeCell = false;
         // 合并行或列
-        if (mergeFooterList.length) {
+        if (mergeFootFlag && mergeFooterList.length) {
             const spanRest = mergeFooterCellMaps[`${_rowIndex}:${_columnIndex}`];
             if (spanRest) {
                 const { rowspan, colspan } = spanRest;
@@ -135,7 +135,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
             tcStyle.minHeight = `${currCellHeight}px`;
         }
         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,
@@ -164,7 +164,7 @@ function renderRows(h, _vm, isOptimizeMode, tableColumn, footerTableData, row, $
                         attrs: {
                             colid
                         },
-                        class: 'vxe-cell--wrapper'
+                        class: 'vxe-cell--wrapper vxe-footer-cell--wrapper'
                     }, column.renderFooter(h, cellParams))
                 ]),
             /**
@@ -188,29 +188,11 @@ function renderHeads(h, _vm, isOptimizeMode, renderColumnList) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
-    const tableReactData = $xeTable;
     const { fixedType, footerTableData } = props;
     const { footerRowClassName, footerRowStyle } = tableProps;
-    const { isColLoading, isDragColMove } = tableReactData;
-    const columnOpts = $xeTable.computeColumnOpts;
-    const columnDragOpts = $xeTable.computeColumnDragOpts;
     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('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) : undefined
-                }
-            }, renderRows(h, _vm, isOptimizeMode, renderColumnList, footerTableData, row, $rowIndex, _rowIndex));
-        }
         return h('tr', {
             key: $rowIndex,
             class: [

package/es/table/src/header.js

@@ -107,7 +107,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
             tcStyle.minHeight = `${currCellHeight}px`;
         }
         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,
@@ -143,7 +143,7 @@ const renderRows = (h, _vm, isGroup, isOptimizeMode, cols, $rowIndex) => {
                         attrs: {
                             colid
                         },
-                        class: 'vxe-cell--wrapper'
+                        class: 'vxe-cell--wrapper vxe-header-cell--wrapper'
                     }, column.renderHeader(h, cellParams))
                 ]),
             /**
@@ -165,28 +165,10 @@ function renderHeads(h, _vm, isGroup, isOptimizeMode, headerGroups) {
     const props = _vm;
     const $xeTable = _vm.$parent;
     const tableProps = $xeTable;
-    const tableReactData = $xeTable;
     const { fixedType } = props;
-    const columnOpts = $xeTable.computeColumnOpts;
-    const columnDragOpts = $xeTable.computeColumnDragOpts;
     const { headerRowClassName, headerRowStyle } = tableProps;
-    const { isColLoading, isDragColMove } = tableReactData;
     return headerGroups.map((cols, $rowIndex) => {
         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: [