vxe-table 4.13.46 → 4.13.48

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

@@ -70,7 +70,7 @@ VxeUI.hooks.add('tableCustomModule', {
         const saveCustom = () => {
             const { customColumnList, aggHandleFields, rowGroupList } = reactData;
             const customOpts = computeCustomOpts.value;
-            const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts;
+            const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts;
             XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
                 if (parentColumn) {
                     // 更新子列信息
@@ -96,6 +96,9 @@ VxeUI.hooks.add('tableCustomModule', {
                 if (allowVisible) {
                     column.visible = column.renderVisible;
                 }
+                if (allowGroup && allowValues) {
+                    column.aggFunc = column.renderAggFn;
+                }
             });
             reactData.isCustomStatus = true;
             reactData.isDragColMove = true;
@@ -103,9 +106,9 @@ VxeUI.hooks.add('tableCustomModule', {
                 reactData.isDragColMove = false;
             }, 1000);
             return $xeTable.saveCustomStore('confirm').then(() => {
-                if ($xeTable.handlePivotTableAggregateData) {
+                if (allowGroup && allowValues && $xeTable.handlePivotTableAggregateData) {
                     if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
-                        // 改动聚合分组
+                        // 更新数据分组
                         if (aggHandleFields.length) {
                             $xeTable.setRowGroups(aggHandleFields);
                         }
@@ -113,6 +116,10 @@ VxeUI.hooks.add('tableCustomModule', {
                             $xeTable.clearRowGroups();
                         }
                     }
+                    else {
+                        // 更新聚合函数
+                        $xeTable.handleUpdateAggData();
+                    }
                 }
             });
         };
@@ -196,7 +203,8 @@ VxeUI.hooks.add('tableCustomModule', {
                     visible: true,
                     resizable: options === true,
                     fixed: options === true,
-                    sort: options === true
+                    sort: options === true,
+                    aggFunc: options === true
                 }, options);
                 XEUtils.eachTree(collectColumn, (column) => {
                     if (opts.resizable) {
@@ -211,12 +219,16 @@ VxeUI.hooks.add('tableCustomModule', {
                     if (!checkMethod || checkMethod({ $table: $xeTable, column })) {
                         column.visible = column.defaultVisible;
                     }
+                    if (opts.aggFunc) {
+                        column.aggFunc = column.defaultAggFunc;
+                        column.renderAggFn = column.defaultAggFunc;
+                    }
                     column.renderResizeWidth = column.renderWidth;
                 });
                 reactData.isCustomStatus = false;
                 $xeTable.saveCustomStore('reset');
                 return $xeTable.handleCustom().then(() => {
-                    if ($xeTable.handlePivotTableAggregateData) {
+                    if (opts.aggFunc && $xeTable.handlePivotTableAggregateData) {
                         const rowGroupFields = computeRowGroupFields.value;
                         if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
                             if (rowGroupFields && rowGroupFields.length) {
@@ -226,6 +238,9 @@ VxeUI.hooks.add('tableCustomModule', {
                                 $xeTable.clearRowGroups();
                             }
                         }
+                        else {
+                            $xeTable.handleUpdateAggData();
+                        }
                     }
                 });
             },

package/es/table/module/custom/panel.js

@@ -31,12 +31,14 @@ export default defineVxeComponent({
         const refDragTipElem = ref();
         const customPanelReactData = reactive({
             dragCol: null,
-            prevDragGroup: null,
-            prevDragValues: null,
+            dragGroupField: null,
+            dragAggFnCol: null,
             dragTipText: ''
         });
         const customPanelInternalData = {
         // prevDragCol: undefined,
+        // prevDragGroupField: undefined,
+        // prevDragAggFnColid: undefined,
         // prevDragToChild: false,
         // prevDragPos: null
         };
@@ -208,8 +210,8 @@ export default defineVxeComponent({
             const { prevDragToChild } = customPanelInternalData;
             const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect();
             const customBodyRect = customBodyElem.getBoundingClientRect();
+            const dragLineEl = refDragLineElem.value;
             if (optEl) {
-                const dragLineEl = refDragLineElem.value;
                 if (dragLineEl) {
                     if (showLine) {
                         const optRect = optEl.getBoundingClientRect();
@@ -226,6 +228,11 @@ export default defineVxeComponent({
                     }
                 }
             }
+            else {
+                if (dragLineEl) {
+                    dragLineEl.style.display = 'node';
+                }
+            }
             const dragTipEl = refDragTipElem.value;
             if (dragTipEl) {
                 dragTipEl.style.display = 'block';
@@ -270,6 +277,8 @@ export default defineVxeComponent({
             const column = $xeTable.getColumnById(colid);
             trEl.draggable = true;
             customPanelReactData.dragCol = column;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
             updateColDropTipContent();
             addClass(trEl, 'active--drag-origin');
         };
@@ -281,14 +290,16 @@ export default defineVxeComponent({
             hideDropTip();
             trEl.draggable = false;
             customPanelReactData.dragCol = null;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
             removeClass(trEl, 'active--drag-origin');
         };
         const sortDragstartEvent = (evnt) => {
             if (evnt.dataTransfer) {
                 evnt.dataTransfer.setDragImage(getTpImg(), 0, 0);
             }
-            customPanelInternalData.prevDragGroup = null;
-            customPanelInternalData.prevDragValues = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
         };
         const sortDragendEvent = (evnt) => {
             const { mouseConfig } = tableProps;
@@ -300,9 +311,9 @@ export default defineVxeComponent({
             const columnDragOpts = computeColumnDragOpts.value;
             const { isCrossDrag, isSelfToChildDrag, isToChildDrag, dragEndMethod } = columnDragOpts;
             const { dragCol } = customPanelReactData;
-            const { prevDragCol, prevDragGroup, prevDragValues, prevDragPos, prevDragToChild } = customPanelInternalData;
+            const { prevDragCol, prevDragGroupField, prevDragAggFnColid, prevDragPos, prevDragToChild } = customPanelInternalData;
             const dragOffsetIndex = prevDragPos === 'bottom' ? 1 : 0;
-            if (prevDragGroup || prevDragValues) {
+            if (prevDragGroupField || prevDragAggFnColid) {
                 if ($xeTable.handlePivotTableAggregatePanelDragendEvent) {
                     $xeTable.handlePivotTableAggregatePanelDragendEvent(evnt);
                 }
@@ -461,8 +472,10 @@ export default defineVxeComponent({
             }
             hideDropTip();
             customPanelReactData.dragCol = null;
-            customPanelInternalData.prevDragGroup = null;
-            customPanelInternalData.prevDragValues = null;
+            customPanelReactData.dragGroupField = null;
+            customPanelReactData.dragAggFnCol = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
             trEl.draggable = false;
             trEl.removeAttribute('drag-pos');
             removeClass(trEl, 'active--drag-target');
@@ -478,14 +491,15 @@ export default defineVxeComponent({
             const colid = optEl.getAttribute('colid');
             const column = $xeTable.getColumnById(colid);
             const { dragCol } = customPanelReactData;
-            customPanelInternalData.prevDragGroup = null;
-            customPanelInternalData.prevDragValues = null;
+            customPanelInternalData.prevDragGroupField = null;
+            customPanelInternalData.prevDragAggFnColid = null;
             // 是否移入有效列
             if (column && (isCrossDrag || column.level === 1)) {
                 evnt.preventDefault();
                 const offsetY = evnt.clientY - optEl.getBoundingClientRect().y;
                 const dragPos = offsetY < optEl.clientHeight / 2 ? 'top' : 'bottom';
-                if ((dragCol && dragCol.id === column.id) ||
+                if (!dragCol ||
+                    (dragCol && dragCol.id === column.id) ||
                     (!isCrossDrag && column.level > 1) ||
                     (!immediate && column.level > 1) ||
                     column.renderFixed) {
@@ -687,7 +701,7 @@ export default defineVxeComponent({
                 class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
                         'is--active': customStore.visible
                     }],
-                style: maxHeight && !['left', 'right'].includes(placement)
+                style: maxHeight && !['left', 'right'].includes(placement || '')
                     ? {
                         maxHeight: `${maxHeight}px`
                     }
@@ -815,7 +829,7 @@ export default defineVxeComponent({
         const renderPopupPanel = () => {
             const $xeGrid = $xeTable.xeGrid;
             const { customStore } = props;
-            const { resizable: allResizable } = tableProps;
+            const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps;
             const { isCustomStatus, customColumnList } = tableReactData;
             const customOpts = computeCustomOpts.value;
             const { immediate } = customOpts;
@@ -1082,7 +1096,12 @@ export default defineVxeComponent({
                                     }, $xeTable.callSlot(bottomSlot, params))
                                     : renderEmptyElement($xeTable),
                                 renderDragTip()
-                            ])
+                            ]),
+                            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                                ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                                    customStore
+                                })
+                                : renderEmptyElement($xeTable)
                         ]);
                 },
                 footer: () => {

package/es/table/src/body.js

@@ -209,6 +209,7 @@ export default defineVxeComponent({
                 $xeTable.triggerCellDblclickEvent(evnt, cellParams);
             };
             let isMergeCell = false;
+            let mergeColspan = 1;
             let mergeRowspan = 1;
             // 合并行或列
             if (mergeBodyFlag && mergeBodyList.length) {
@@ -225,6 +226,7 @@ export default defineVxeComponent({
                     }
                     if (colspan > 1) {
                         isMergeCell = true;
+                        mergeColspan = colspan;
                         tdAttrs.colspan = colspan;
                     }
                 }
@@ -242,6 +244,7 @@ export default defineVxeComponent({
                 }
                 if (colspan > 1) {
                     isMergeCell = true;
+                    mergeColspan = colspan;
                     tdAttrs.colspan = colspan;
                 }
             }
@@ -281,16 +284,16 @@ export default defineVxeComponent({
             }
             const tcStyle = {};
             if (hasEllipsis && resizeWidthFlag) {
-                let tsColspan = tdAttrs.colspan || 0;
-                if (tsColspan > 1) {
-                    for (let index = 1; index < tsColspan; index++) {
+                let mergeColWidth = 0;
+                if (mergeColspan > 1) {
+                    for (let index = 1; index < mergeColspan; index++) {
                         const nextColumn = visibleColumn[columnIndex + index];
                         if (nextColumn) {
-                            tsColspan += nextColumn.renderWidth;
+                            mergeColWidth += nextColumn.renderWidth;
                         }
                     }
                 }
-                tcStyle.width = `${column.renderWidth - (cellOffsetWidth * tsColspan)}px`;
+                tcStyle.width = `${column.renderWidth + mergeColWidth - cellOffsetWidth}px`;
             }
             if (scrollYLoad || hasEllipsis || isCsHeight || isRsHeight) {
                 tcStyle.height = `${cellHeight}px`;

package/es/table/src/cell.js

@@ -146,13 +146,25 @@ function renderHeaderCellBaseVNs(params, content) {
     ];
     return vns;
 }
+function getRenderDefaultColumnTitle(column, content) {
+    if (column.type === 'html' && XEUtils.isString(content)) {
+        return h('span', {
+            key: 'ch',
+            innerHTML: content
+        });
+    }
+    return h('span', {
+        key: 'ct'
+    }, getSlotVNs(content));
+}
 function renderTitleContent(params, content) {
     const { $table, column } = params;
     const tableProps = $table.props;
     const tableReactData = $table.reactData;
     const { computeTooltipOpts } = $table.getComputeMaps();
     const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps;
-    const { type, showHeaderOverflow } = column;
+    const { isRowGroupStatus } = tableReactData;
+    const { showHeaderOverflow } = column;
     const tooltipOpts = computeTooltipOpts.value;
     const showAllTip = tooltipOpts.showAll;
     const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow;
@@ -182,10 +194,13 @@ function renderTitleContent(params, content) {
             }
         };
     }
+    const titleVN = getRenderDefaultColumnTitle(column, content);
     return [
-        type === 'html' && XEUtils.isString(content)
-            ? h('span', Object.assign({ class: 'vxe-cell--title', innerHTML: content }, ons))
-            : h('span', Object.assign({ class: 'vxe-cell--title' }, ons), getSlotVNs(content))
+        h('span', Object.assign({ class: 'vxe-cell--title' }, ons), isRowGroupStatus && column.aggFunc && $table.getPivotTableAggregateRenderColTitles
+            ? $table.getPivotTableAggregateRenderColTitles(column, titleVN)
+            : [
+                titleVN
+            ])
     ];
 }
 function getFooterContent(params) {

package/es/table/src/columnInfo.js

@@ -101,6 +101,7 @@ export class ColumnInfo {
             halfVisible: false,
             defaultVisible: visible,
             defaultFixed: _vm.fixed,
+            defaultAggFunc: _vm.aggFunc,
             checked: false,
             halfChecked: false,
             disabled: false,

package/es/table/src/table.js

@@ -235,6 +235,7 @@ export default defineVxeComponent({
             isRowGroupStatus: false,
             rowGroupList: [],
             aggHandleFields: [],
+            aggHandleAggColumns: [],
             rowGroupExpandedFlag: 1,
             rowExpandedFlag: 1,
             treeExpandedFlag: 1,
@@ -1431,7 +1432,8 @@ export default defineVxeComponent({
             const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
             const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
             const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
-            if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+            const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
+            if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggFunc)) {
                 if (!tableId) {
                     errLog('vxe.error.reqProp', ['id']);
                     return;
@@ -3002,6 +3004,16 @@ export default defineVxeComponent({
                 }
             });
         };
+        const handleUpdateAggValues = () => {
+            const { visibleColumn } = internalData;
+            const aggCols = [];
+            visibleColumn.forEach(column => {
+                if (column.aggFunc) {
+                    aggCols.push(column);
+                }
+            });
+            reactData.aggHandleAggColumns = aggCols;
+        };
         const handleUpdateRowGroup = (groupFields) => {
             const aggFields = [];
             const aggConfs = [];
@@ -3015,6 +3027,7 @@ export default defineVxeComponent({
             }
             reactData.rowGroupList = aggConfs;
             reactData.aggHandleFields = aggFields;
+            handleUpdateAggValues();
         };
         const handleeGroupSummary = (aggList) => {
             const aggregateOpts = computeAggregateOpts.value;
@@ -3497,6 +3510,7 @@ export default defineVxeComponent({
                 }
             });
             handleTableColumn();
+            handleUpdateAggValues();
             if (isReset) {
                 updateColumnOffsetLeft();
                 return $xeTable.updateFooter().then(() => {
@@ -6079,7 +6093,6 @@ export default defineVxeComponent({
             },
             setRowGroups(fieldOrColumns) {
                 const { aggregateConfig, rowGroupConfig } = props;
-                const { rowGroupList } = reactData;
                 const aggregateOpts = computeAggregateOpts.value;
                 const { maxGroupSize } = aggregateOpts;
                 if (!(aggregateConfig || rowGroupConfig)) {
@@ -6087,7 +6100,7 @@ export default defineVxeComponent({
                     return nextTick();
                 }
                 const confList = fieldOrColumns ? (XEUtils.isArray(fieldOrColumns) ? fieldOrColumns : [fieldOrColumns]) : [];
-                if (maxGroupSize && (rowGroupList.length + confList.length > maxGroupSize)) {
+                if (maxGroupSize && confList.length > maxGroupSize) {
                     if (VxeUI.modal) {
                         VxeUI.modal.message({
                             status: 'error',
@@ -6619,15 +6632,18 @@ export default defineVxeComponent({
                 const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
                 const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
                 const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
+                const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
                 const resizableData = {};
                 const sortData = {};
                 const visibleData = {};
                 const fixedData = {};
+                const aggFuncData = {};
                 const storeData = {
                     resizableData: undefined,
                     sortData: undefined,
                     visibleData: undefined,
-                    fixedData: undefined
+                    fixedData: undefined,
+                    aggFuncData: undefined
                 };
                 if (!id) {
                     if (storage) {
@@ -6639,6 +6655,7 @@ export default defineVxeComponent({
                 let hasSort = 0;
                 let hasFixed = 0;
                 let hasVisible = 0;
+                let hasAggFunc = 0;
                 XEUtils.eachTree(collectColumn, (column, index, items, path, parentColumn) => {
                     const colKey = column.getKey();
                     if (!colKey) {
@@ -6670,6 +6687,10 @@ export default defineVxeComponent({
                             visibleData[colKey] = true;
                         }
                     }
+                    if (isCustomAggFunc && column.aggFunc !== column.defaultAggFunc) {
+                        hasAggFunc = 1;
+                        aggFuncData[colKey] = column.aggFunc;
+                    }
                 });
                 if (hasResizable) {
                     storeData.resizableData = resizableData;
@@ -6683,6 +6704,9 @@ export default defineVxeComponent({
                 if (hasVisible) {
                     storeData.visibleData = visibleData;
                 }
+                if (hasAggFunc) {
+                    storeData.aggFuncData = aggFuncData;
+                }
                 return storeData;
             },
             focus() {
@@ -8126,11 +8150,12 @@ export default defineVxeComponent({
                 const isCustomVisible = hangleStorageDefaultValue(storageOpts.visible, isAllCustom);
                 const isCustomFixed = hangleStorageDefaultValue(storageOpts.fixed, isAllCustom);
                 const isCustomSort = hangleStorageDefaultValue(storageOpts.sort, isAllCustom);
+                const isCustomAggFunc = hangleStorageDefaultValue(storageOpts.aggFunc, isAllCustom);
                 if (type !== 'reset') {
                     // fix：修复拖动列宽，重置按钮无法点击的问题
                     reactData.isCustomStatus = true;
                 }
-                if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort)) {
+                if (storage && (customConfig ? isEnableConf(customOpts) : customOpts.enabled) && (isCustomResizable || isCustomVisible || isCustomFixed || isCustomSort || isCustomAggFunc)) {
                     if (!tableId) {
                         errLog('vxe.error.reqProp', ['id']);
                         return nextTick();
@@ -10484,6 +10509,9 @@ export default defineVxeComponent({
                     }
                 }
             },
+            handleUpdateAggData() {
+                return loadTableData(internalData.tableSynchData, true);
+            },
             updateZindex() {
                 if (props.zIndex) {
                     internalData.tZindex = props.zIndex;
@@ -11460,6 +11488,16 @@ export default defineVxeComponent({
                         return;
                     }
                 }
+                if (!$xeTable.handlePivotTableAggregateData) {
+                    if (customOpts.allowGroup) {
+                        errLog('vxe.error.notProp', ['custom-config.allowGroup']);
+                        return;
+                    }
+                    if (customOpts.allowValues) {
+                        errLog('vxe.error.notProp', ['custom-config.allowValues']);
+                        return;
+                    }
+                }
                 if (treeConfig && rowOpts.drag && !treeOpts.transform) {
                     errLog('vxe.error.notSupportProp', ['column-config.drag', 'tree-config.transform=false', 'tree-config.transform=true']);
                 }
@@ -11472,8 +11510,8 @@ export default defineVxeComponent({
                 if (aggregateOpts.countFields) {
                     warnLog('vxe.error.delProp', ['row-group-config.countFields', 'column.agg-func']);
                 }
-                if (aggregateOpts.countMethod) {
-                    warnLog('vxe.error.delProp', ['row-group-config.countMethod', 'aggregate-config.aggregateMethod']);
+                if (aggregateOpts.aggregateMethod) {
+                    warnLog('vxe.error.delProp', ['row-group-config.aggregateMethod', 'aggregate-config.countMethod']);
                 }
                 if (props.treeConfig && treeOpts.children) {
                     warnLog('vxe.error.delProp', ['tree-config.children', 'tree-config.childrenField']);

package/es/table/style.css

@@ -999,13 +999,17 @@
 
 .vxe-table-custom-popup--body-wrapper {
   position: relative;
-  overflow: auto;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
   height: 100%;
   outline: 0;
 }
 
 .vxe-table-custom-popup--handle-wrapper {
+  flex-grow: 1;
   outline: 0;
+  overflow: auto;
 }
 
 .vxe-table-custom-popup--table-wrapper {