vxe-table 4.17.20 → 4.17.22

package/packages/table/src/cell.ts

@@ -397,8 +397,9 @@ export const Cell = {
       const { fullColumnFieldData } = tableInternalData
       const { computeAggregateOpts } = $table.getComputeMaps()
       const aggregateOpts = computeAggregateOpts.value
-      const { mode, showTotal, totalMethod, countFields, contentMethod, mapChildrenField } = aggregateOpts
-      const aggCalcMethod = aggregateOpts.calcValuesMethod || aggregateOpts.countMethod || aggregateOpts.aggregateMethod
+      const { mode, showTotal, totalMethod, countFields, contentMethod, formatValuesMethod, mapChildrenField } = aggregateOpts
+      const aggData = aggRow.aggData
+      const currAggData = aggData ? aggData[field] : null
       const groupField = aggRow.groupField
       const groupContent = aggRow.groupContent
       const childList = mapChildrenField ? (aggRow[mapChildrenField] || []) : []
@@ -439,9 +440,10 @@ export const Cell = {
       } else if ($table.getPivotTableAggregateCellAggValue) {
         cellValue = $table.getPivotTableAggregateCellAggValue(params)
       } else if (aggFunc === true || (countFields && countFields.includes(field))) {
-        if (aggCalcMethod) {
-          ctParams.aggValue = childCount
-          cellValue = `${aggCalcMethod(ctParams)}`
+        cellValue = currAggData ? currAggData.value : childCount
+        ctParams.aggValue = cellValue
+        if (formatValuesMethod) {
+          cellValue = formatValuesMethod(ctParams)
         }
       }
     } else {
@@ -496,7 +498,7 @@ export const Cell = {
     const { rowGroupExpandedFlag } = tableReactData
     const { rowGroupExpandedMaps } = tableInternalData
     const aggregateOpts = computeAggregateOpts.value
-    const { mode, padding, indent } = aggregateOpts
+    const { mode, padding, indent, showIcon, iconOpen, iconClose } = aggregateOpts
     const rowid = getRowid($table, row)
     const isExpand = !!rowGroupExpandedFlag && !!rowGroupExpandedMaps[rowid]
     return h('div', {
@@ -509,7 +511,7 @@ export const Cell = {
           }
         : undefined
     }, [
-      row.isAggregate
+      showIcon && row.isAggregate
         ? h('span', {
           class: 'vxe-row-group--node-btn',
           onClick (evnt: MouseEvent) {
@@ -517,7 +519,7 @@ export const Cell = {
           }
         }, [
           h('i', {
-            class: isExpand ? getIcon().TABLE_ROW_GROUP_OPEN : getIcon().TABLE_ROW_GROUP_CLOSE
+            class: isExpand ? (iconOpen || getIcon().TABLE_ROW_GROUP_OPEN) : (iconClose || getIcon().TABLE_ROW_GROUP_CLOSE)
           })
         ])
         : renderEmptyElement($table),

package/packages/table/src/table.ts

@@ -41,6 +41,8 @@ const customStorageKey = 'VXE_CUSTOM_STORE'
 const maxYHeight = 5e6
 const maxXWidth = 5e6
 
+const sourceType = 'table'
+
 let crossTableDragRowObj: {
   $oldTable: VxeTableConstructor & VxeTablePrivateMethods
   $newTable: (VxeTableConstructor & VxeTablePrivateMethods) | null
@@ -930,6 +932,14 @@ export default defineVxeComponent({
       return rgColumns
     })
 
+    const computeAggFuncColumns = computed(() => {
+      const { rowGroupList, tableColumn } = reactData
+      if (rowGroupList.length) {
+        return tableColumn.filter(column => column.aggFunc)
+      }
+      return []
+    })
+
     const refMaps: VxeTablePrivateRef = {
       refElem,
       refTooltip,
@@ -1030,6 +1040,7 @@ export default defineVxeComponent({
       computeVirtualScrollBars,
       computeRowGroupFields,
       computeRowGroupColumns,
+      computeAggFuncColumns,
 
       computeFNROpts,
       computeSXOpts,
@@ -2211,23 +2222,46 @@ export default defineVxeComponent({
     }
 
     const getOrderField = (column: VxeTableDefines.ColumnInfo) => {
-      const { sortBy, sortType } = column
-      return (row: any) => {
-        let cellValue
-        if (sortBy) {
-          cellValue = XEUtils.isFunction(sortBy) ? sortBy({ row, column }) : XEUtils.get(row, sortBy)
-        } else {
-          cellValue = tableMethods.getCellLabel(row, column)
-        }
-        if (!sortType || sortType === 'auto') {
-          return isNaN(cellValue) ? cellValue : XEUtils.toNumber(cellValue)
-        } else if (sortType === 'number') {
-          return XEUtils.toNumber(cellValue)
-        } else if (sortType === 'string') {
-          return XEUtils.toValueString(cellValue)
-        }
-        return cellValue
-      }
+      const { isRowGroupStatus } = reactData
+      const { sortBy, sortType, aggFunc } = column
+      return isRowGroupStatus && aggFunc
+        ? (row: any) => {
+            if (row.isAggregate) {
+              const aggData = row.aggData
+              const currAggData = aggData ? aggData[column.field] : null
+              return currAggData ? currAggData.value : null
+            }
+            let cellValue
+            if (sortBy) {
+              cellValue = XEUtils.isFunction(sortBy) ? sortBy({ row, column }) : XEUtils.get(row, sortBy)
+            } else {
+              cellValue = tableMethods.getCellLabel(row, column)
+            }
+            if (!sortType || sortType === 'auto') {
+              return isNaN(cellValue) ? cellValue : XEUtils.toNumber(cellValue)
+            } else if (sortType === 'number') {
+              return XEUtils.toNumber(cellValue)
+            } else if (sortType === 'string') {
+              return XEUtils.toValueString(cellValue)
+            }
+            return cellValue
+          }
+        : (row: any) => {
+            let cellValue
+            if (sortBy) {
+              cellValue = XEUtils.isFunction(sortBy) ? sortBy({ row, column }) : XEUtils.get(row, sortBy)
+            } else {
+              cellValue = tableMethods.getCellLabel(row, column)
+            }
+            if (!sortType || sortType === 'auto') {
+              return isNaN(cellValue) ? cellValue : XEUtils.toNumber(cellValue)
+            } else if (sortType === 'number') {
+              return XEUtils.toNumber(cellValue)
+            } else if (sortType === 'string') {
+              return XEUtils.toValueString(cellValue)
+            }
+            return cellValue
+          }
     }
 
     const updateAfterListIndex = () => {
@@ -3583,8 +3617,11 @@ export default defineVxeComponent({
     }
 
     const handleeGroupSummary = (aggList: VxeTableDefines.AggregateRowInfo[]) => {
+      const { fullColumnFieldData } = internalData
       const aggregateOpts = computeAggregateOpts.value
+      const aggFuncColumns = computeAggFuncColumns.value
       const { mapChildrenField } = aggregateOpts
+      const aggCalcMethod = aggregateOpts.calcValuesMethod || aggregateOpts.countMethod || aggregateOpts.aggregateMethod
       if (mapChildrenField) {
         XEUtils.lastEach(aggList, aggRow => {
           let count = 0
@@ -3599,6 +3636,67 @@ export default defineVxeComponent({
         })
         if ($xeTable.handlePivotTableAggregateData) {
           $xeTable.handlePivotTableAggregateData(aggList)
+        } else {
+          if (aggFuncColumns.length) {
+            XEUtils.lastEach(aggList, aggRow => {
+              const aggDtObj: Record<string, {
+              type: string
+              value: any
+              label: any
+            }> = {}
+              const aggData = aggRow.aggData
+              const groupField = aggRow.groupField
+              const groupContent = aggRow.groupContent
+              const childList = mapChildrenField ? (aggRow[mapChildrenField] || []) : []
+              const childCount = aggRow.childCount
+              const colRest = fullColumnFieldData[groupField] || {}
+              aggFuncColumns.forEach(column => {
+                const { field } = column
+                const currAggData = aggData ? aggData[field] : null
+                const ctParams = {
+                  $table: $xeTable,
+                  groupField,
+                  groupColumn: (colRest ? colRest.column : null) as VxeTableDefines.ColumnInfo,
+                  column,
+                  groupValue: groupContent,
+                  childList,
+                  childCount,
+                  aggValue: currAggData ? currAggData.value : 0,
+
+                  /**
+                 * 已废弃
+                 * @deprecated
+                 */
+                  children: childList,
+                  /**
+                 * 已废弃
+                 * @deprecated
+                 */
+                  totalValue: childCount
+                }
+                let aggVal = 0
+                // 如果下层同时也是分组
+                if (childList.length && childList[0].isAggregate) {
+                  XEUtils.each(childList, (row: VxeTableDefines.AggregateRowInfo) => {
+                    if (row.isAggregate) {
+                      const currAggData = row.aggData[field]
+                      if (currAggData) {
+                        aggVal += currAggData.value
+                      }
+                    }
+                  })
+                } else {
+                  aggVal = aggCalcMethod ? aggCalcMethod(ctParams) : aggRow.childCount
+                }
+                aggDtObj[field] = {
+                  type: 'count',
+                  value: aggVal,
+                  label: aggVal
+                }
+              })
+              aggRow.aggData = aggDtObj
+            })
+          }
         }
       }
     }
@@ -4833,6 +4931,34 @@ export default defineVxeComponent({
       }
     }
 
+    const handleColumnVisible = (visible: boolean) => {
+      return function (fieldOrColumn: string | string[] | VxeTableDefines.ColumnInfo | VxeTableDefines.ColumnInfo[]) {
+        let status = false
+        const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
+        cols.forEach(item => {
+          const column = handleFieldOrColumn($xeTable, item)
+          if (column) {
+            if (column.children && column.children.length) {
+              XEUtils.eachTree([column], (item) => {
+                item.visible = visible
+                item.renderVisible = visible
+              })
+            } else {
+              column.visible = visible
+              column.renderVisible = visible
+            }
+            if (!status) {
+              status = true
+            }
+          }
+        })
+        if (status) {
+          return $xeTable.handleCustom()
+        }
+        return nextTick()
+      }
+    }
+
     tableMethods = {
       dispatchEvent,
       getEl () {
@@ -5283,10 +5409,15 @@ export default defineVxeComponent({
         if (!column) {
           return null
         }
-        const { formatter } = column
+        const { editConfig } = props
+        const { formatter, editRender, cellRender } = column
+        // formatter > tableCellFormatter
+        const renderOpts = formatter ? null : (editConfig && isEnableConf(editRender) ? editRender : (isEnableConf(cellRender) ? cellRender : null))
+        const compConf = renderOpts ? renderer.get(renderOpts.name) : null
+        const tcFormatter = compConf ? compConf.tableCellFormatter : null
         const cellValue = getCellValue(row, column)
         let cellLabel = cellValue
-        if (formatter) {
+        if (formatter || tcFormatter) {
           let formatData
           const { fullAllDataRowIdData } = internalData
           const rowid = getRowid($xeTable, row)
@@ -5304,22 +5435,27 @@ export default defineVxeComponent({
             }
           }
           const formatParams = {
+            $table: $xeTable,
             cellValue,
             row,
             rowIndex: $xeTable.getRowIndex(row),
             column,
             columnIndex: $xeTable.getColumnIndex(column)
           }
-          if (XEUtils.isString(formatter)) {
-            const gFormatOpts = formats.get(formatter)
-            const tcFormatMethod = gFormatOpts ? (gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod) : null
-            cellLabel = tcFormatMethod ? tcFormatMethod(formatParams) : ''
-          } else if (XEUtils.isArray(formatter)) {
-            const gFormatOpts = formats.get(formatter[0])
-            const tcFormatMethod = gFormatOpts ? (gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod) : null
-            cellLabel = tcFormatMethod ? tcFormatMethod(formatParams, ...formatter.slice(1)) : ''
-          } else {
-            cellLabel = formatter(formatParams)
+          if (formatter) {
+            if (XEUtils.isString(formatter)) {
+              const gFormatOpts = formats.get(formatter)
+              const tcFormatMethod = gFormatOpts ? (gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod) : null
+              cellLabel = tcFormatMethod ? tcFormatMethod(formatParams) : ''
+            } else if (XEUtils.isArray(formatter)) {
+              const gFormatOpts = formats.get(formatter[0])
+              const tcFormatMethod = gFormatOpts ? (gFormatOpts.tableCellFormatMethod || gFormatOpts.cellFormatMethod) : null
+              cellLabel = tcFormatMethod ? tcFormatMethod(formatParams, ...formatter.slice(1)) : ''
+            } else {
+              cellLabel = `${formatter(formatParams)}`
+            }
+          } else if (renderOpts && tcFormatter) {
+            cellLabel = `${tcFormatter(renderOpts, formatParams)}`
           }
           if (formatData) {
             formatData[colid] = { value: cellValue, label: cellLabel }
@@ -5365,6 +5501,7 @@ export default defineVxeComponent({
             }
           }
           const footerFormatParams = {
+            $table: $xeTable,
             cellValue: itemValue,
             itemValue,
             row,
@@ -5819,43 +5956,11 @@ export default defineVxeComponent({
       /**
        * 隐藏指定列
        */
-      hideColumn (fieldOrColumn) {
-        let status = false
-        const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
-        cols.forEach(item => {
-          const column = handleFieldOrColumn($xeTable, item)
-          if (column && column.visible) {
-            column.visible = false
-            if (!status) {
-              status = true
-            }
-          }
-        })
-        if (status) {
-          return tablePrivateMethods.handleCustom()
-        }
-        return nextTick()
-      },
+      hideColumn: handleColumnVisible(false),
       /**
        * 显示指定列
        */
-      showColumn (fieldOrColumn) {
-        let status = false
-        const cols = XEUtils.isArray(fieldOrColumn) ? fieldOrColumn : [fieldOrColumn]
-        cols.forEach(item => {
-          const column = handleFieldOrColumn($xeTable, item)
-          if (column && !column.visible) {
-            column.visible = true
-            if (!status) {
-              status = true
-            }
-          }
-        })
-        if (status) {
-          return tablePrivateMethods.handleCustom()
-        }
-        return nextTick()
-      },
+      showColumn: handleColumnVisible(true),
       setColumnWidth (fieldOrColumn, width) {
         const { elemStore } = internalData
         let status = false
@@ -11523,6 +11628,7 @@ export default defineVxeComponent({
         }
         reactData.lastScrollTime = Date.now()
         const evntParams = {
+          source: sourceType,
           scrollTop,
           scrollLeft,
           bodyHeight,
@@ -13625,6 +13731,7 @@ export default defineVxeComponent({
       if (resizeObserver) {
         resizeObserver.disconnect()
       }
+      $xeTable.closeTooltip()
       tableMethods.closeFilter()
       if ($xeTable.closeMenu) {
         $xeTable.closeMenu()

package/packages/ui/index.ts

@@ -286,9 +286,10 @@ VxeUI.setConfig({
       showResponseMsg: true,
       showActionMsg: true,
       response: {
-        list: null,
+        list: 'list',
         result: 'result',
         total: 'page.total',
+        footerData: 'footerData',
         message: 'message'
       }
       // beforeItem: null,