vxe-table 4.13.46 → 4.13.48

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

@@ -81,7 +81,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) {
           // 更新子列信息
@@ -106,6 +106,9 @@ VxeUI.hooks.add('tableCustomModule', {
         if (allowVisible) {
           column.visible = column.renderVisible
         }
+        if (allowGroup && allowValues) {
+          column.aggFunc = column.renderAggFn
+        }
       })
       reactData.isCustomStatus = true
       reactData.isDragColMove = true
@@ -113,14 +116,17 @@ VxeUI.hooks.add('tableCustomModule', {
         reactData.isDragColMove = false
       }, 1000)
       return $xeTable.saveCustomStore('confirm').then(() => {
-        if (($xeTable as any).handlePivotTableAggregateData) {
+        if (allowGroup && allowValues && ($xeTable as any).handlePivotTableAggregateData) {
           if (rowGroupList.length !== aggHandleFields.length || rowGroupList.some((conf, i) => conf.field !== aggHandleFields[i])) {
-          // 改动聚合分组
+            // 更新数据分组
             if (aggHandleFields.length) {
               $xeTable.setRowGroups(aggHandleFields)
             } else {
               $xeTable.clearRowGroups()
             }
+          } else {
+            // 更新聚合函数
+            $xeTable.handleUpdateAggData()
           }
         }
       })
@@ -207,7 +213,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) {
@@ -222,12 +229,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 as any).handlePivotTableAggregateData) {
+          if (opts.aggFunc && ($xeTable as any).handlePivotTableAggregateData) {
             const rowGroupFields = computeRowGroupFields.value
             if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
               if (rowGroupFields && rowGroupFields.length) {
@@ -235,6 +246,8 @@ VxeUI.hooks.add('tableCustomModule', {
               } else {
                 $xeTable.clearRowGroups()
               }
+            } else {
+              $xeTable.handleUpdateAggData()
             }
           }
         })

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

@@ -39,15 +39,17 @@ export default defineVxeComponent({
     const refDragLineElem = ref() as Ref<HTMLDivElement>
     const refDragTipElem = ref() as Ref<HTMLDivElement>
 
-    const customPanelReactData: TableCustomPanelReactData = reactive({
+    const customPanelReactData = reactive<TableCustomPanelReactData>({
       dragCol: null,
-      prevDragGroup: null,
-      prevDragValues: null,
+      dragGroupField: null,
+      dragAggFnCol: null,
       dragTipText: ''
     })
 
     const customPanelInternalData: TableCustomPanelInternalData = {
       // prevDragCol: undefined,
+      // prevDragGroupField: undefined,
+      // prevDragAggFnColid: undefined,
       // prevDragToChild: false,
       // prevDragPos: null
     }
@@ -230,8 +232,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()
@@ -246,6 +248,10 @@ export default defineVxeComponent({
             dragLineEl.style.display = ''
           }
         }
+      } else {
+        if (dragLineEl) {
+          dragLineEl.style.display = 'node'
+        }
       }
       const dragTipEl = refDragTipElem.value
       if (dragTipEl) {
@@ -293,6 +299,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')
     }
@@ -305,6 +313,8 @@ export default defineVxeComponent({
       hideDropTip()
       trEl.draggable = false
       customPanelReactData.dragCol = null
+      customPanelReactData.dragGroupField = null
+      customPanelReactData.dragAggFnCol = null
       removeClass(trEl, 'active--drag-origin')
     }
 
@@ -312,8 +322,8 @@ export default defineVxeComponent({
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage(getTpImg(), 0, 0)
       }
-      customPanelInternalData.prevDragGroup = null
-      customPanelInternalData.prevDragValues = null
+      customPanelInternalData.prevDragGroupField = null
+      customPanelInternalData.prevDragAggFnColid = null
     }
 
     const sortDragendEvent = (evnt: DragEvent) => {
@@ -326,10 +336,10 @@ 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)
         }
@@ -499,8 +509,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')
@@ -517,14 +529,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 && dragCol.id === column.id) ||
           (!isCrossDrag && column.level > 1) ||
           (!immediate && column.level > 1) ||
@@ -737,7 +750,7 @@ export default defineVxeComponent({
         class: ['vxe-table-custom-wrapper', `placement--${placement}`, {
           'is--active': customStore.visible
         }],
-        style: maxHeight && !['left', 'right'].includes(placement as string)
+        style: maxHeight && !['left', 'right'].includes(placement || '')
           ? {
               maxHeight: `${maxHeight}px`
             }
@@ -872,7 +885,7 @@ export default defineVxeComponent({
       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
@@ -1152,7 +1165,12 @@ export default defineVxeComponent({
                     }, $xeTable.callSlot(bottomSlot, params))
                     : renderEmptyElement($xeTable),
                   renderDragTip()
-                ])
+                ]),
+                !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+                  ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                    customStore
+                  })
+                  : renderEmptyElement($xeTable)
               ])
         },
         footer: () => {

package/packages/table/src/body.ts

@@ -235,6 +235,7 @@ export default defineVxeComponent({
         $xeTable.triggerCellDblclickEvent(evnt, cellParams)
       }
       let isMergeCell = false
+      let mergeColspan = 1
       let mergeRowspan = 1
       // 合并行或列
       if (mergeBodyFlag && mergeBodyList.length) {
@@ -251,6 +252,7 @@ export default defineVxeComponent({
           }
           if (colspan > 1) {
             isMergeCell = true
+            mergeColspan = colspan
             tdAttrs.colspan = colspan
           }
         }
@@ -267,6 +269,7 @@ export default defineVxeComponent({
         }
         if (colspan > 1) {
           isMergeCell = true
+          mergeColspan = colspan
           tdAttrs.colspan = colspan
         }
       }
@@ -310,16 +313,16 @@ export default defineVxeComponent({
 
       const tcStyle: Record<string, string> = {}
       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/packages/table/src/cell.ts

@@ -167,13 +167,26 @@ function renderHeaderCellBaseVNs (params: VxeTableDefines.CellRenderHeaderParams
   return vns
 }
 
+function getRenderDefaultColumnTitle (column: VxeTableDefines.ColumnInfo, content: VxeComponentSlotType | VxeComponentSlotType[]) {
+  if (column.type === 'html' && XEUtils.isString(content)) {
+    return h('span', {
+      key: 'ch',
+      innerHTML: content
+    })
+  }
+  return h('span', {
+    key: 'ct'
+  }, getSlotVNs(content))
+}
+
 function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }, content: VxeComponentSlotType | VxeComponentSlotType[]) {
   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
@@ -202,17 +215,16 @@ function renderTitleContent (params: VxeTableDefines.CellRenderHeaderParams & {
       }
     }
   }
+  const titleVN = getRenderDefaultColumnTitle(column, content)
   return [
-    type === 'html' && XEUtils.isString(content)
-      ? h('span', {
-        class: 'vxe-cell--title',
-        innerHTML: content,
-        ...ons
-      })
-      : h('span', {
-        class: 'vxe-cell--title',
-        ...ons
-      }, getSlotVNs(content))
+    h('span', {
+      class: 'vxe-cell--title',
+      ...ons
+    }, isRowGroupStatus && column.aggFunc && $table.getPivotTableAggregateRenderColTitles
+      ? $table.getPivotTableAggregateRenderColTitles(column, titleVN)
+      : [
+          titleVN
+        ])
   ]
 }
 

package/packages/table/src/columnInfo.ts

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

package/packages/table/src/table.ts

@@ -249,6 +249,7 @@ export default defineVxeComponent({
       isRowGroupStatus: false,
       rowGroupList: [],
       aggHandleFields: [],
+      aggHandleAggColumns: [],
 
       rowGroupExpandedFlag: 1,
       rowExpandedFlag: 1,
@@ -1544,7 +1545,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
@@ -3148,6 +3150,17 @@ export default defineVxeComponent({
       })
     }
 
+    const handleUpdateAggValues = () => {
+      const { visibleColumn } = internalData
+      const aggCols: VxeTableDefines.ColumnInfo[] = []
+      visibleColumn.forEach(column => {
+        if (column.aggFunc) {
+          aggCols.push(column)
+        }
+      })
+      reactData.aggHandleAggColumns = aggCols
+    }
+
     const handleUpdateRowGroup = (groupFields?: string[]) => {
       const aggFields: string[] = []
       const aggConfs: { field: string }[] = []
@@ -3161,6 +3174,7 @@ export default defineVxeComponent({
       }
       reactData.rowGroupList = aggConfs
       reactData.aggHandleFields = aggFields
+      handleUpdateAggValues()
     }
 
     const handleeGroupSummary = (aggList: VxeTableDefines.AggregateRowInfo[]) => {
@@ -3645,6 +3659,7 @@ export default defineVxeComponent({
         }
       })
       handleTableColumn()
+      handleUpdateAggValues()
       if (isReset) {
         updateColumnOffsetLeft()
         return $xeTable.updateFooter().then(() => {
@@ -6226,7 +6241,6 @@ export default defineVxeComponent({
       },
       setRowGroups (fieldOrColumns) {
         const { aggregateConfig, rowGroupConfig } = props
-        const { rowGroupList } = reactData
         const aggregateOpts = computeAggregateOpts.value
         const { maxGroupSize } = aggregateOpts
         if (!(aggregateConfig || rowGroupConfig)) {
@@ -6234,7 +6248,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',
@@ -6769,15 +6783,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: Record<string, number> = {}
         const sortData: Record<string, number> = {}
         const visibleData: Record<string, boolean> = {}
         const fixedData: Record<string, VxeColumnPropTypes.Fixed> = {}
+        const aggFuncData: Record<string, VxeColumnPropTypes.AggFunc> = {}
         const storeData: VxeTableDefines.CustomStoreData = {
           resizableData: undefined,
           sortData: undefined,
           visibleData: undefined,
-          fixedData: undefined
+          fixedData: undefined,
+          aggFuncData: undefined
         }
         if (!id) {
           if (storage) {
@@ -6789,6 +6806,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) {
@@ -6819,6 +6837,10 @@ export default defineVxeComponent({
               visibleData[colKey] = true
             }
           }
+          if (isCustomAggFunc && column.aggFunc !== column.defaultAggFunc) {
+            hasAggFunc = 1
+            aggFuncData[colKey] = column.aggFunc
+          }
         })
         if (hasResizable) {
           storeData.resizableData = resizableData
@@ -6832,6 +6854,9 @@ export default defineVxeComponent({
         if (hasVisible) {
           storeData.visibleData = visibleData
         }
+        if (hasAggFunc) {
+          storeData.aggFuncData = aggFuncData
+        }
         return storeData
       },
       focus () {
@@ -8260,11 +8285,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()
@@ -10634,6 +10660,9 @@ export default defineVxeComponent({
           }
         }
       },
+      handleUpdateAggData () {
+        return loadTableData(internalData.tableSynchData, true)
+      },
       updateZindex () {
         if (props.zIndex) {
           internalData.tZindex = props.zIndex
@@ -11651,6 +11680,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'])
         }
@@ -11663,8 +11702,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/packages/ui/index.ts

@@ -108,6 +108,7 @@ VxeUI.setConfig({
         // rowGroup: false,
         // aggFunc: false
       },
+      // autoAggGroupValues: false,
       //  checkMethod () {},
       modalOptions: {
         showMaximize: true,
@@ -148,7 +149,8 @@ VxeUI.setConfig({
       mapChildrenField: '_X_ROW_CHILD_LIST',
       indent: 20,
       showIcon: true,
-      maxGroupSize: 4
+      maxGroupSize: 4,
+      showAggFuncTitle: true
     },
     treeConfig: {
       padding: true,
@@ -321,10 +323,10 @@ VxeUI.setIcon({
   TABLE_DRAG_DISABLED: iconPrefix + 'no-drop',
   TABLE_ROW_GROUP_OPEN: iconPrefix + 'arrow-right rotate90',
   TABLE_ROW_GROUP_CLOSE: iconPrefix + 'arrow-right',
-  TABLE_AGGREGATION_GROUPING: iconPrefix + 'grouping',
-  TABLE_AGGREGATION_VALUES: iconPrefix + 'values',
-  TABLE_AGGREGATION_SORT: iconPrefix + 'drag-handle',
-  TABLE_AGGREGATION_DELETE: iconPrefix + 'close',
+  TABLE_AGGREGATE_GROUPING: iconPrefix + 'grouping',
+  TABLE_AGGREGATE_VALUES: iconPrefix + 'values',
+  TABLE_AGGREGATE_SORT: iconPrefix + 'drag-handle',
+  TABLE_AGGREGATE_DELETE: iconPrefix + 'close',
 
   // toolbar
   TOOLBAR_TOOLS_REFRESH: iconPrefix + 'repeat',

package/styles/components/table-module/custom.scss

@@ -218,12 +218,16 @@
 
 .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 {