vxe-table 3.15.46 → 3.15.48

package/packages/locale/lang/uz-UZ.ts

@@ -79,6 +79,7 @@ export default {
       customCancel: 'Bekor qilmoq',
       customRestore: 'Standartni tiklash',
       maxFixedCol: 'Muzlatilgan ustunlarning maksimal soni {0} dan oshmaydi',
+      maxGroupCol: '最大分组字段的数量不能超过 {0} 个',
       dragTip: "Ko'chiring: {0}",
       resizeColTip: 'Kengligi: {0} piksel',
       resizeRowTip: 'Yuqori: {0} piksel',
@@ -137,7 +138,7 @@ export default {
       cstmDragTarget: "Ko'chiring: {0}",
       setting: {
         colSort: 'Tartib',
-        sortHelpTip: 'Ustunlar turini sozlash uchun ikonkani bosing va torting',
+        sortHelpTip: '点击并拖动图标可以调整顺序',
         colTitle: 'Ustun unvon',
         colResizable: 'Ustun kengligi (piksellar)',
         colVisible: "Ko'rsatish kerakmi",
@@ -561,7 +562,20 @@ export default {
       extendPivotTable: {
         aggregation: {
           grouping: '分组',
-          values: '值'
+          values: '值',
+          groupPlaceholder: '拖至此处进行分组',
+          valuesPlaceholder: '拖至此处进行聚合',
+          dragExistCol: '该列已存在',
+          sortHelpTip: '点击并拖动图标可以调整顺序'
+        },
+        aggFuncs: {
+          sum: '求和',
+          count: '计数',
+          avg: '平均值',
+          min: '最小值',
+          max: '最大值',
+          first: '首个值',
+          last: '末尾值'
         }
       },
       filterComplexInput: {

package/packages/locale/lang/vi-VN.ts

@@ -79,6 +79,7 @@ export default {
       customCancel: 'Hủy bỏ',
       customRestore: 'Khôi phục mặc định',
       maxFixedCol: 'Số lượng cột đóng băng tối đa không thể vượt quá {0}',
+      maxGroupCol: '最大分组字段的数量不能超过 {0} 个',
       dragTip: 'Di chuyển: {0}',
       resizeColTip: 'Chiều rộng: {0} pixel',
       resizeRowTip: 'Chiều cao: {0} pixel',
@@ -137,7 +138,7 @@ export default {
       cstmDragTarget: 'Di chuyển: {0}',
       setting: {
         colSort: 'Loại',
-        sortHelpTip: 'Nhấp và kéo biểu tượng để điều chỉnh các loại cột',
+        sortHelpTip: '点击并拖动图标可以调整顺序',
         colTitle: 'Tiêu đề cột',
         colResizable: 'Chiều rộng cột (pixel)',
         colVisible: 'Có hiển thị không',
@@ -561,7 +562,20 @@ export default {
       extendPivotTable: {
         aggregation: {
           grouping: '分组',
-          values: '值'
+          values: '值',
+          groupPlaceholder: '拖至此处进行分组',
+          valuesPlaceholder: '拖至此处进行聚合',
+          dragExistCol: '该列已存在',
+          sortHelpTip: '点击并拖动图标可以调整顺序'
+        },
+        aggFuncs: {
+          sum: '求和',
+          count: '计数',
+          avg: '平均值',
+          min: '最小值',
+          max: '最大值',
+          first: '首个值',
+          last: '末尾值'
         }
       },
       filterComplexInput: {

package/packages/locale/lang/zh-CHT.ts

@@ -79,6 +79,7 @@ export default {
       customCancel: '取消',
       customRestore: '恢復默認',
       maxFixedCol: '最大凍結列的數量不能超過 {0} 個',
+      maxGroupCol: '最大分組欄位的數量不能超過 {0} 個',
       dragTip: '移動：{0}',
       resizeColTip: '寬：{0} 像素',
       resizeRowTip: '高：{0} 像素',
@@ -137,7 +138,7 @@ export default {
       cstmDragTarget: '移動：{0}',
       setting: {
         colSort: '排序',
-        sortHelpTip: '點擊並拖動圖標可以調整列的排序',
+        sortHelpTip: '點擊並拖動圖標可以調整順序',
         colTitle: '列標題',
         colResizable: '列寬（像素）',
         colVisible: '是否顯示',
@@ -560,8 +561,21 @@ export default {
       },
       extendPivotTable: {
         aggregation: {
-          grouping: '分组',
-          values: '值'
+          grouping: '分組',
+          values: '值',
+          groupPlaceholder: '拖曳至此處進行分組',
+          valuesPlaceholder: '拖曳至此處進行聚合',
+          dragExistCol: '該列已存在',
+          sortHelpTip: '點擊並拖動圖標可以調整順序'
+        },
+        aggFuncs: {
+          sum: '求和',
+          count: '计数',
+          avg: '平均值',
+          min: '最小值',
+          max: '最大值',
+          first: '首个值',
+          last: '末尾值'
         }
       },
       filterComplexInput: {

package/packages/locale/lang/zh-CN.ts

@@ -79,6 +79,7 @@ export default {
       customCancel: '取消',
       customRestore: '恢复默认',
       maxFixedCol: '最大冻结列的数量不能超过 {0} 个',
+      maxGroupCol: '最大分组字段的数量不能超过 {0} 个',
       dragTip: '移动：{0}',
       resizeColTip: '宽：{0} 像素',
       resizeRowTip: '高：{0} 像素',
@@ -137,7 +138,7 @@ export default {
       cstmDragTarget: '移动：{0}',
       setting: {
         colSort: '排序',
-        sortHelpTip: '点击并拖动图标可以调整列的排序',
+        sortHelpTip: '点击并拖动图标可以调整顺序',
         colTitle: '列标题',
         colResizable: '列宽（像素）',
         colVisible: '是否显示',
@@ -561,7 +562,20 @@ export default {
       extendPivotTable: {
         aggregation: {
           grouping: '分组',
-          values: '值'
+          values: '值',
+          groupPlaceholder: '拖至此处进行分组',
+          valuesPlaceholder: '拖至此处进行聚合',
+          dragExistCol: '该列已存在',
+          sortHelpTip: '点击并拖动图标可以调整顺序'
+        },
+        aggFuncs: {
+          sum: '求和',
+          count: '计数',
+          avg: '平均值',
+          min: '最小值',
+          max: '最大值',
+          first: '首个值',
+          last: '末尾值'
         }
       },
       filterComplexInput: {

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

@@ -66,7 +66,7 @@ export default {
 
       const { customColumnList, aggHandleFields, rowGroupList } = reactData
       const customOpts = $xeTable.computeCustomOpts
-      const { allowVisible, allowSort, allowFixed, allowResizable } = customOpts
+      const { allowVisible, allowSort, allowFixed, allowResizable, allowGroup, allowValues } = customOpts
       XEUtils.eachTree(customColumnList, (column, index, items, path, parentColumn) => {
         if (parentColumn) {
           // 更新子列信息
@@ -91,6 +91,9 @@ export default {
         if (allowVisible) {
           column.visible = column.renderVisible
         }
+        if (allowGroup && allowValues) {
+          column.aggFunc = column.renderAggFn
+        }
       })
       reactData.isCustomStatus = true
       reactData.isDragColMove = true
@@ -98,14 +101,17 @@ export default {
         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()
           }
         }
       })
@@ -152,7 +158,8 @@ export default {
         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) {
@@ -167,12 +174,16 @@ export default {
         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 = $xeTable.computeRowGroupFields
           if (rowGroupFields ? rowGroupFields.length : rowGroupList.length) {
             if (rowGroupFields && rowGroupFields.length) {
@@ -180,6 +191,8 @@ export default {
             } else {
               $xeTable.clearRowGroups()
             }
+          } else {
+            $xeTable.handleUpdateAggData()
           }
         }
       })

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

@@ -24,8 +24,8 @@ function showDropTip ($xeTableCustomPanel: VxeTableCustomPanelConstructor, evnt:
   const { prevDragToChild } = customPanelInternalData
   const bodyWrapperRect = bodyWrapperElem.getBoundingClientRect()
   const customBodyRect = customBodyElem.getBoundingClientRect()
+  const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem as HTMLDivElement
   if (optEl) {
-    const dragLineEl = $xeTableCustomPanel.$refs.refDragLineElem as HTMLDivElement
     if (dragLineEl) {
       if (showLine) {
         const optRect = optEl.getBoundingClientRect()
@@ -40,6 +40,10 @@ function showDropTip ($xeTableCustomPanel: VxeTableCustomPanelConstructor, evnt:
         dragLineEl.style.display = ''
       }
     }
+  } else {
+    if (dragLineEl) {
+      dragLineEl.style.display = 'node'
+    }
   }
   const dragTipEl = $xeTableCustomPanel.$refs.refDragTipElem as HTMLDivElement
   if (dragTipEl) {
@@ -294,7 +298,7 @@ const renderSimplePanel = (h: CreateElement, _vm: any) => {
     ? [
         h('div', {
           ref: 'refBodyWrapperElem',
-          class: 'vxe-table-custom-body-wrapper'
+          class: 'vxe-table-custom-simple--body-wrapper'
         }, [
           !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregateSimplePanel
             ? h($xeTable.getPivotTableAggregateSimplePanel(), {
@@ -445,7 +449,7 @@ const renderPopupPanel = (h: CreateElement, $xeTableCustomPanel: VxeTableCustomP
   const $xeGrid = $xeTable.$xeGrid
 
   const { customStore } = props
-  const { resizable: allResizable } = tableProps
+  const { treeConfig, rowGroupConfig, aggregateConfig, resizable: allResizable } = tableProps
   const { isCustomStatus, customColumnList } = tableReactData
   const customOpts = $xeTable.computeCustomOpts
   const { immediate } = customOpts
@@ -746,7 +750,14 @@ const renderPopupPanel = (h: CreateElement, $xeTableCustomPanel: VxeTableCustomP
                 }, $xeTable.callSlot(bottomSlot, params, h))
                 : renderEmptyElement($xeTable),
               renderDragTip(h, _vm)
-            ])
+            ]),
+            !treeConfig && (aggregateConfig || rowGroupConfig) && $xeTable.getPivotTableAggregatePopupPanel
+              ? h($xeTable.getPivotTableAggregatePopupPanel(), {
+                props: {
+                  customStore
+                }
+              })
+              : renderEmptyElement($xeTable)
           ])
     },
     footer: () => {
@@ -879,13 +890,15 @@ export default {
   data () {
     const reactData: TableCustomPanelReactData = {
       dragCol: null,
+      dragGroupField: null,
+      dragAggFnCol: null,
       dragTipText: ''
     }
 
     const internalData: TableCustomPanelInternalData = {
       // prevDragCol: undefined,
-      // prevDragGroup: undefined,
-      // prevDragValues: undefined,
+      // prevDragGroupField: undefined,
+      // prevDragAggFnColid: undefined,
       // prevDragToChild: false,
       // prevDragPos: null
     }
@@ -1158,6 +1171,8 @@ export default {
       const column = $xeTable.getColumnById(colid)
       trEl.draggable = true
       customPanelReactData.dragCol = column
+      customPanelReactData.dragGroupField = null
+      customPanelReactData.dragAggFnCol = null
       this.updateColDropTipContent()
       addClass(trEl, 'active--drag-origin')
     },
@@ -1172,6 +1187,8 @@ export default {
       hideDropTip($xeTableCustomPanel)
       trEl.draggable = false
       customPanelReactData.dragCol = null
+      customPanelReactData.dragGroupField = null
+      customPanelReactData.dragAggFnCol = null
       removeClass(trEl, 'active--drag-origin')
     },
     sortDragstartEvent (evnt: any) {
@@ -1181,8 +1198,8 @@ export default {
       if (evnt.dataTransfer) {
         evnt.dataTransfer.setDragImage(getTpImg(), 0, 0)
       }
-      customPanelInternalData.prevDragGroup = null
-      customPanelInternalData.prevDragValues = null
+      customPanelInternalData.prevDragGroupField = null
+      customPanelInternalData.prevDragAggFnColid = null
     },
     sortDragendEvent (evnt: any) {
       const $xeTableCustomPanel = this as unknown as VxeTableCustomPanelConstructor
@@ -1202,10 +1219,10 @@ export default {
       const columnDragOpts = $xeTable.computeColumnDragOpts
       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)
         }
@@ -1375,8 +1392,10 @@ export default {
 
       hideDropTip($xeTableCustomPanel)
       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')
@@ -1397,14 +1416,15 @@ export default {
       const isControlKey = hasControlKey(evnt)
       const colid = optEl.getAttribute('colid')
       const column = $xeTable.getColumnById(colid)
-      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) ||

package/packages/table/src/body.ts

@@ -218,6 +218,7 @@ function renderTdColumn (
     $xeTable.triggerCellDblclickEvent(evnt, cellParams)
   }
   let isMergeCell = false
+  let mergeColspan = 1
   let mergeRowspan = 1
   // 合并行或列
   if (mergeBodyFlag && mergeBodyList.length) {
@@ -234,6 +235,7 @@ function renderTdColumn (
       }
       if (colspan > 1) {
         isMergeCell = true
+        mergeColspan = colspan
         tdAttrs.colspan = colspan
       }
     }
@@ -250,6 +252,7 @@ function renderTdColumn (
     }
     if (colspan > 1) {
       isMergeCell = true
+      mergeColspan = colspan
       tdAttrs.colspan = colspan
     }
   }
@@ -293,16 +296,16 @@ function renderTdColumn (
 
   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

@@ -165,12 +165,27 @@ function renderHeaderCellBaseVNs (h: CreateElement, params: VxeTableDefines.Cell
   return vns
 }
 
+function getRenderDefaultColumnTitle (h: CreateElement, column: VxeTableDefines.ColumnInfo, content: VxeComponentSlotType | VxeComponentSlotType[]) {
+  if (column.type === 'html' && XEUtils.isString(content)) {
+    return h('span', {
+      key: 'ch',
+      domProps: {
+        innerHTML: content
+      }
+    })
+  }
+  return h('span', {
+    key: 'ct'
+  }, getSlotVNs(content))
+}
+
 function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRenderHeaderParams & { $table: VxeTableConstructor & VxeTablePrivateMethods }, content: VxeComponentSlotType | VxeComponentSlotType[]) {
   const { $table, column } = params
-  const { type, showHeaderOverflow } = column
+  const { showHeaderOverflow } = column
   const tableProps = $table
   const tableReactData = $table as unknown as TableReactData
   const { showHeaderOverflow: allColumnHeaderOverflow } = tableProps
+  const { isRowGroupStatus } = tableReactData
   const tooltipOpts = $table.computeTooltipOpts
   const showAllTip = tooltipOpts.showAll
   const headOverflow = XEUtils.isUndefined(showHeaderOverflow) || XEUtils.isNull(showHeaderOverflow) ? allColumnHeaderOverflow : showHeaderOverflow
@@ -199,19 +214,16 @@ function renderTitleContent (h: CreateElement, params: VxeTableDefines.CellRende
       }
     }
   }
+  const titleVN = getRenderDefaultColumnTitle(h, column, content)
   return [
-    type === 'html' && XEUtils.isString(content)
-      ? h('span', {
-        class: 'vxe-cell--title',
-        domProps: {
-          innerHTML: content
-        },
-        on: ons
-      })
-      : h('span', {
-        class: 'vxe-cell--title',
-        on: ons
-      }, getSlotVNs(content))
+    h('span', {
+      class: 'vxe-cell--title',
+      ...ons
+    }, isRowGroupStatus && column.aggFunc && $table.getPivotTableAggregateRenderColTitles
+      ? $table.getPivotTableAggregateRenderColTitles(h, column, titleVN)
+      : [
+          titleVN
+        ])
   ]
 }
 

package/packages/table/src/columnInfo.ts

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