From 188e32915e8b9ddc2dec27009acb4ebdad6675bd Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Tue, 10 Jun 2025 13:59:22 +0800
Subject: [PATCH 1/2] =?UTF-8?q?update:=20=E9=80=8F=E8=A7=86=E8=A1=A8?=
 =?UTF-8?q?=E8=A1=A8=E5=A4=B4=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pivottable/VPivottableHeader.vue          | 21 +++++++++--------
 .../pivottable/VPivottableHeaderColumns.vue   |  1 -
 .../pivottable/VPivottableHeaderRows.vue      | 23 +++++++------------
 3 files changed, 19 insertions(+), 26 deletions(-)

diff --git a/src/pivottable/components/pivottable/VPivottableHeader.vue b/src/pivottable/components/pivottable/VPivottableHeader.vue
index 4f6dec9..e510930 100644
--- a/src/pivottable/components/pivottable/VPivottableHeader.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeader.vue
@@ -5,12 +5,21 @@
         v-for="(c, j) in colAttrs"
         :key="`colAttrs${j}`"
       >
+        <VPivottableHeaderRows
+          v-if="rowAttrs.length !== 0 && j === colAttrs.length - 1"
+          :row-attrs="rowAttrs"
+          :row-total="rowTotal"
+          :col-attrs-length="colAttrs.length"
+          :locale-strings="localeStrings"
+          :fields="fields"
+        />
+        <th v-if="rowAttrs.length === 0 && j === colAttrs.length - 1"></th>
         <th
           v-if="j === 0 && rowAttrs.length !== 0"
           :colSpan="rowAttrs.length"
-          :rowSpan="colAttrs.length"
+          :rowSpan="colAttrs.length - 1"
         />
-        <th class="pvtAxisLabel">
+        <th v-if="getText(c)" class="pvtAxisLabel">
           {{ getText(c) }}
         </th>
         <VPivottableHeaderColumns
@@ -27,14 +36,6 @@
           :locale-strings="localeStrings"
         />
       </tr>
-      <VPivottableHeaderRows
-        v-if="rowAttrs.length !== 0"
-        :row-attrs="rowAttrs"
-        :row-total="rowTotal"
-        :col-attrs-length="colAttrs.length"
-        :locale-strings="localeStrings"
-        :fields="fields"
-      />
     </template>
   </thead>
 </template>
diff --git a/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue b/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
index 36b4132..7ed7343 100644
--- a/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
@@ -7,7 +7,6 @@
       v-if="spanSize(colKeys, i, colIndex) !== -1"
       class="pvtColLabel"
       :colSpan="spanSize(colKeys, i, colIndex)"
-      :rowSpan="colIndex === colAttrsLength - 1 && rowAttrsLength !== 0 ? 2 : 1"
     >
       {{ getText(colKey[colIndex]) }}
     </th>
diff --git a/src/pivottable/components/pivottable/VPivottableHeaderRows.vue b/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
index edd4e45..a2573bd 100644
--- a/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
@@ -1,19 +1,12 @@
 <template>
-  <tr class="VPivottableHeaderRows">
-    <th
-      v-for="(r, i) in rowAttrs"
-      :key="`rowAttr${i}`"
-      class="pvtAxisLabel"
-    >
-      {{ getText(r) }}
-    </th>
-    <th
-      class="pvtTotalLabel"
-      v-if="rowTotal || colAttrsLength !== 0"
-    >
-      {{ colAttrsLength === 0 && rowTotal ? localeStrings.totals : null }}
-    </th>
-  </tr>
+  <th
+    v-for="(r, i) in rowAttrs"
+    :key="`rowAttr${i}`"
+    :colSpan="i === rowAttrs.length - 1 && rowAttrs.length !== 0 ? 2 : 1"
+    class="pvtAxisLabel"
+  >
+    {{ getText(r) }}
+  </th>
 </template>
 
 <script setup>
-- 
Gitee


From f1abf4ab5b83a83d1a4119201e5501fb560f5525 Mon Sep 17 00:00:00 2001
From: Cano1997 <1978141412@qq.com>
Date: Wed, 18 Jun 2025 10:33:16 +0800
Subject: [PATCH 2/2] =?UTF-8?q?update:=20=E9=80=8F=E8=A7=86=E8=A1=A8?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=88=86=E7=BB=84=E6=A0=91=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 +
 .../group-pivottable-body.scss                |  12 ++
 .../group-pivottable-body.tsx                 | 155 +++++++++++++++++
 src/index.ts                                  |   2 +
 src/pivottable.controller.ts                  |  14 +-
 src/pivottable.scss                           |  22 ++-
 src/pivottable.tsx                            |   1 +
 .../pivottable-ui/VPivottableUi.vue           |   2 +-
 .../components/pivottable/VPivottableBody.vue |  27 ++-
 .../pivottable/VPivottableHeader.vue          |  14 +-
 .../pivottable/VPivottableHeaderColumns.vue   |  10 ++
 .../pivottable/VPivottableHeaderRows.vue      |   9 +-
 .../pivottable/renderer/TableRenderer.vue     |   7 +-
 .../composables/useProvidePivotData.js        | 161 +++++++++++++++++-
 src/pivottable/helper/defaultProps.js         |   4 +
 15 files changed, 422 insertions(+), 19 deletions(-)
 create mode 100644 src/components/group-pivottable-body/group-pivottable-body.scss
 create mode 100644 src/components/group-pivottable-body/group-pivottable-body.tsx

diff --git a/README.md b/README.md
index e69de29..db4af39 100644
--- a/README.md
+++ b/README.md
@@ -0,0 +1 @@
+https://vue-pivottable.vercel.app/
\ No newline at end of file
diff --git a/src/components/group-pivottable-body/group-pivottable-body.scss b/src/components/group-pivottable-body/group-pivottable-body.scss
new file mode 100644
index 0000000..a7e6383
--- /dev/null
+++ b/src/components/group-pivottable-body/group-pivottable-body.scss
@@ -0,0 +1,12 @@
+/* stylelint-disable selector-class-pattern */
+@include b(group-pivottable-body) {
+    .el-tree {
+        height: 100%;
+
+        --el-tree-node-content-height: 32px;
+
+        .el-tree-node__content {
+            border-bottom: 1px solid #1d1f231a;
+        }
+    }
+}
diff --git a/src/components/group-pivottable-body/group-pivottable-body.tsx b/src/components/group-pivottable-body/group-pivottable-body.tsx
new file mode 100644
index 0000000..63116ef
--- /dev/null
+++ b/src/components/group-pivottable-body/group-pivottable-body.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable no-param-reassign */
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { useNamespace } from '@ibiz-template/vue3-util';
+import { computed, defineComponent, Ref, ref } from 'vue';
+
+import './group-pivottable-body.scss';
+
+export const GroupPivotTableBody = defineComponent({
+  name: 'IBizGroupPivotTableBody',
+  props: {
+    groupData: {
+      type: Array<IData>,
+      required: true,
+    },
+    colKeys: {
+      type: Array<IData>,
+      required: true,
+    },
+    rowKeys: {
+      type: Array<IData>,
+      required: true,
+    },
+    rowAttrs: {
+      type: Array<string>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const ns = useNamespace(`group-pivottable-body`);
+
+    const collapseKeys: Ref<string[]> = ref([]);
+
+    const colFields = computed(() => {
+      return props.colKeys.map((tags: any) => {
+        return tags.join(String.fromCharCode(0));
+      });
+    });
+
+    const parseRows = (item: IData) => {
+      const result: IData = {};
+      if (item.items) {
+        item.items.forEach((x: IData) => {
+          result[x.codeName] = x.format;
+        });
+      }
+      result.pvtTotal = item.format;
+      result.srfkey = item.srfkey;
+      return result;
+    };
+
+    const fillRows = (items: IData[]) => {
+      const result: IData[] = [];
+      items.forEach((item: IData) => {
+        result.push(parseRows(item));
+        if (item.children && item.children.length) {
+          result.push(...fillRows(item.children));
+        }
+      });
+      return result;
+    };
+
+    const fillColKeys = (item: IData) => {
+      const keys = Object.keys(item);
+      props.colKeys.forEach((tags: any) => {
+        const tag = tags.join(String.fromCharCode(0));
+        if (!keys.includes(tag)) {
+          item[tag] = '';
+        }
+      });
+      return item;
+    };
+
+    const rows = computed(() => {
+      const items = fillRows(props.groupData);
+      const result: IData[] = items.map(x => fillColKeys(x));
+      const res = result.filter(x => !collapseKeys.value.includes(x.srfkey));
+      return res;
+    });
+
+    const calcNodeExpand = (
+      data: IData,
+      expand: boolean,
+      keySet: Set<string>,
+    ) => {
+      const children = data.children || [];
+      if (expand) {
+        children.forEach((x: IData) => {
+          keySet.delete(x.srfkey);
+          if (x.children && x.children.length) {
+            calcNodeExpand(x, expand, keySet);
+          }
+        });
+      } else {
+        children.forEach((x: IData) => {
+          keySet.add(x.srfkey);
+          if (x.children && x.children.length) {
+            calcNodeExpand(x, expand, keySet);
+          }
+        });
+      }
+    };
+
+    const updateNodeExpand = (data: IData, expand: boolean) => {
+      const keySet = new Set(collapseKeys.value);
+      calcNodeExpand(data, expand, keySet);
+      collapseKeys.value = Array.from(keySet);
+    };
+
+    const renderRow = (item: IData) => {
+      return colFields.value.map(key => {
+        return <td>{item[key]}</td>;
+      });
+    };
+
+    const renderDropdown = (index: number) => {
+      if (index !== 0) {
+        return;
+      }
+      const content = (
+        <el-tree
+          data={props.groupData}
+          default-expand-all
+          onNodeExpand={(data: IData) => {
+            updateNodeExpand(data, true);
+          }}
+          onNodeCollapse={(data: IData) => {
+            updateNodeExpand(data, false);
+          }}
+        />
+      );
+      return (
+        <th rowspan={rows.value.length} colspan={props.rowAttrs.length + 1}>
+          {content}
+        </th>
+      );
+    };
+    return {
+      ns,
+      rows,
+      renderRow,
+      renderDropdown,
+    };
+  },
+  render() {
+    return this.rows.map((column: IData, index: number) => {
+      return (
+        <tr class={this.ns.b()}>
+          {this.renderDropdown(index)}
+          {this.renderRow(column)}
+        </tr>
+      );
+    });
+  },
+});
diff --git a/src/index.ts b/src/index.ts
index c3395fb..ace8d7c 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -3,10 +3,12 @@ import { withInstall } from '@ibiz-template/vue3-util';
 import { ControlType, registerControlProvider } from '@ibiz-template/runtime';
 import { PivotTable } from './pivottable';
 import { PivotTableProvider } from './pivottable.provider';
+import { GroupPivotTableBody } from './components/group-pivottable-body/group-pivottable-body';
 import './pivottable/styles/vue-pivottable.css';
 
 export const IBizPivotTable = withInstall(PivotTable, (v: any) => {
   v.component(PivotTable.name, PivotTable);
+  v.component(GroupPivotTableBody.name, GroupPivotTableBody);
   registerControlProvider(
     `${ControlType.GRID}_PIVOTTABLE`,
     () => new PivotTableProvider(),
diff --git a/src/pivottable.controller.ts b/src/pivottable.controller.ts
index f9267a8..19a4df8 100644
--- a/src/pivottable.controller.ts
+++ b/src/pivottable.controller.ts
@@ -23,6 +23,13 @@ export class PivotTableController extends GridController {
    */
   declare state: IPivotTableState;
 
+  /**
+   * @description 分组模式
+   * @type {('default' | 'tree')}
+   * @memberof PivotTableController
+   */
+  public groupMode: 'default' | 'tree' = 'default';
+
   constructor(model: IDEGrid, context: IContext, params: IParams, ctx: CTX) {
     super(model, context, params, ctx);
     this.initConfig();
@@ -37,6 +44,9 @@ export class PivotTableController extends GridController {
   protected async onCreated(): Promise<void> {
     await super.onCreated();
     this.initFields();
+    if (this.controlParams.groupmode) {
+      this.groupMode = this.controlParams.groupmode;
+    }
   }
 
   async afterLoad(
@@ -91,7 +101,9 @@ export class PivotTableController extends GridController {
     this.configService = new ConfigService(
       this.model.appId!,
       'pivottable',
-      `pivottable_${(this.view as IData).name.toLowerCase()}_${this.model.codeName?.toLowerCase()}`,
+      `pivottable_${(
+        this.view as IData
+      ).name.toLowerCase()}_${this.model.codeName?.toLowerCase()}`,
     );
   }
 
diff --git a/src/pivottable.scss b/src/pivottable.scss
index b35a35a..be5ff7f 100644
--- a/src/pivottable.scss
+++ b/src/pivottable.scss
@@ -1,3 +1,21 @@
+/* stylelint-disable selector-class-pattern */
 @include b(pivot-table) {
-    
-}
\ No newline at end of file
+  table.pvtTable thead tr th,
+  table.pvtTable tbody tr th {
+    min-width: 100px;
+    height: 32px;
+    min-height: 32px;
+    padding: 0;
+    line-height: 32px;
+    text-align: center;
+  }
+
+  table.pvtTable tbody tr td {
+    height: 32px;
+    min-height: 32px;
+    padding: 0;
+    line-height: 31px;
+    text-align: center;
+    vertical-align:middle;
+  }
+}
diff --git a/src/pivottable.tsx b/src/pivottable.tsx
index c3463f7..eb4c013 100644
--- a/src/pivottable.tsx
+++ b/src/pivottable.tsx
@@ -141,6 +141,7 @@ export const PivotTable = defineComponent({
         rows={rows}
         vals={vals}
         fields={this.c.state.fields}
+        groupMode={this.c.groupMode}
         onChange={(data: IData) => {
           this.c.saveConfig(data);
         }}
diff --git a/src/pivottable/components/pivottable-ui/VPivottableUi.vue b/src/pivottable/components/pivottable-ui/VPivottableUi.vue
index c7f2802..e26b4a9 100644
--- a/src/pivottable/components/pivottable-ui/VPivottableUi.vue
+++ b/src/pivottable/components/pivottable-ui/VPivottableUi.vue
@@ -112,7 +112,7 @@
           <slot name="output" />
         </template>
         <template v-else>
-          <VPivottable v-bind="pivotProps" :fields="fields" />
+          <VPivottable v-bind="pivotProps" :fields="fields" :groupMode="groupMode" />
         </template>
       </div>
     </div>
diff --git a/src/pivottable/components/pivottable/VPivottableBody.vue b/src/pivottable/components/pivottable/VPivottableBody.vue
index 0877df9..a306428 100644
--- a/src/pivottable/components/pivottable/VPivottableBody.vue
+++ b/src/pivottable/components/pivottable/VPivottableBody.vue
@@ -1,11 +1,15 @@
 <template>
   <tbody v-if="pivotData">
-    <VPivottableBodyRows
-      :row-keys="rowKeys"
-      :col-keys="colKeys"
-      :row-total="rowTotal"
-      :table-options="tableOptions"
-    />
+    <template v-if="groupMode === 'default'">
+      <VPivottableBodyRows
+        :row-keys="rowKeys"
+        :col-keys="colKeys"
+        :row-total="rowTotal"
+        :table-options="tableOptions"
+        :groupMode="groupMode"
+      />
+    </template>
+    <IBizGroupPivotTableBody v-else :groupData="groupData" :rowKeys="rowKeys" :colKeys="colKeys" :rowAttrs="rowAttrs" />
     <VPivottableBodyRowsTotalRow
       :col-total="colTotal"
       :row-total="rowTotal"
@@ -23,7 +27,7 @@ import { useProvidePivotData } from '@/pivottable/composables/useProvidePivotDat
 import VPivottableBodyRows from './VPivottableBodyRows.vue'
 import VPivottableBodyRowsTotalRow from './VPivottableBodyRowsTotalRow.vue'
 
-defineProps({
+const props = defineProps({
   rowTotal: {
     type: Boolean,
     default: true
@@ -40,9 +44,14 @@ defineProps({
     default: () => ({
       clickCallback: null
     })
+  },
+  groupMode: {
+    type: String,
+    default: 'default'
   }
 })
 
-const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs } =
-  useProvidePivotData()
+const { pivotData, rowKeys, colKeys, rowAttrs, colAttrs, getAggregator, groupData } =
+  useProvidePivotData();
+
 </script>
diff --git a/src/pivottable/components/pivottable/VPivottableHeader.vue b/src/pivottable/components/pivottable/VPivottableHeader.vue
index e510930..af78687 100644
--- a/src/pivottable/components/pivottable/VPivottableHeader.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeader.vue
@@ -1,5 +1,5 @@
 <template>
-  <thead>
+  <thead class="VPivottableHeader">
     <template v-if="pivotData">
       <tr
         v-for="(c, j) in colAttrs"
@@ -12,6 +12,7 @@
           :col-attrs-length="colAttrs.length"
           :locale-strings="localeStrings"
           :fields="fields"
+          :groupMode="groupMode"
         />
         <th v-if="rowAttrs.length === 0 && j === colAttrs.length - 1"></th>
         <th
@@ -28,6 +29,8 @@
           :col-attrs-length="colAttrs.length"
           :row-attrs-length="rowAttrs.length"
           :fields="fields"
+          :aggregatorName="aggregatorName"
+          :locale-strings="localeStrings"
         />
         <VPivottableHeaderRowsTotal
           v-if="j === 0 && rowTotal"
@@ -57,7 +60,14 @@ const props = defineProps({
   fields: {
     type: Array,
     default: () => []
-  }
+  },
+  aggregatorName: {
+    type: String,
+  },
+  groupMode: {
+    type: String,
+    default: 'default'
+  },
 })
 
 const { pivotData, colAttrs, rowAttrs, colKeys, vals } = useProvidePivotData();
diff --git a/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue b/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
index 7ed7343..0e8eb53 100644
--- a/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeaderColumns.vue
@@ -36,6 +36,12 @@ const props = defineProps({
   fields: {
     type: Array,
     default: () => []
+  },
+  localeStrings: {
+    type: Object,
+  },
+  aggregatorName: {
+    type: String,
   }
 })
 
@@ -46,6 +52,10 @@ const getText = (text) => {
   if (item) {
     return item.caption;
   }
+  const aggregatorName = props.aggregatorName.toLowerCase();
+  if (props.colIndex === props.colAttrsLength - 1 && aggregatorName === 'count') {
+    return props.localeStrings[aggregatorName] || text;
+  }
   return text;
 };
 </script>
diff --git a/src/pivottable/components/pivottable/VPivottableHeaderRows.vue b/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
index a2573bd..6495c51 100644
--- a/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
+++ b/src/pivottable/components/pivottable/VPivottableHeaderRows.vue
@@ -30,10 +30,17 @@ const props = defineProps({
   fields: {
     type: Array,
     default: () => []
-  }
+  },
+  groupMode: {
+    type: String,
+    default: 'default',
+  },
 })
 
 const getText = (text) => {
+  // if (props.groupMode === 'dropdown') {
+  //   return '';
+  // }
   const item = props.fields.find(x => x.codeName === text);
   if (item) {
     return item.caption;
diff --git a/src/pivottable/components/pivottable/renderer/TableRenderer.vue b/src/pivottable/components/pivottable/renderer/TableRenderer.vue
index 564c70b..78a5b02 100644
--- a/src/pivottable/components/pivottable/renderer/TableRenderer.vue
+++ b/src/pivottable/components/pivottable/renderer/TableRenderer.vue
@@ -2,13 +2,16 @@
   <table class="pvtTable">
     <VPivottableHeader
       :row-total="props.showRowTotal"
-      :localeStrings="localeStrings"
+      :localeStrings="props.localeStrings"
+      :aggregatorName="props.aggregatorName"
       :fields="fields"
+      :groupMode="groupMode"
     />
     <VPivottableBody
       :row-total="props.showRowTotal"
       :table-options="props.tableOptions"
-      :localeStrings="localeStrings"
+      :localeStrings="props.localeStrings"
+      :groupMode="groupMode"
     />
   </table>
 </template>
diff --git a/src/pivottable/composables/useProvidePivotData.js b/src/pivottable/composables/useProvidePivotData.js
index 9f678e6..7a4bc3d 100644
--- a/src/pivottable/composables/useProvidePivotData.js
+++ b/src/pivottable/composables/useProvidePivotData.js
@@ -1,14 +1,19 @@
+/* eslint-disable array-callback-return */
+/* eslint-disable no-lonely-if */
 /* eslint-disable no-plusplus */
 /* eslint-disable @typescript-eslint/explicit-function-return-type */
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { ref, provide, inject, computed } from 'vue';
+import { ref, provide, inject, computed, watch } from 'vue';
 import { PivotData } from '@/pivottable/helper';
+import { numberFormat } from '@/pivottable/helper/utilities';
 
 const PIVOT_DATA_KEY = Symbol('pivotData');
 
 export function providePivotData(props) {
   const error = ref(null);
 
+  const groupData = ref({});
+
   const pivotData = computed(() => {
     try {
       return new PivotData(props);
@@ -129,6 +134,159 @@ export function providePivotData(props) {
     return len;
   };
 
+  const multiDimArrayToTree = (
+    arr,
+    keys = ['level1', 'level2', 'level3'],
+    depth = 0,
+    parentKey = [],
+  ) => {
+    // 如果keys不够用，自动补充层级名
+    if (depth >= keys.length) {
+      keys.push(`level${keys.length + 1}`);
+    }
+
+    const currentKey = keys[depth];
+    const result = [];
+    const map = new Map(); // 使用Map来分组
+
+    // 遍历数组元素
+    arr.forEach(item => {
+      // 跳过空元素或无效元素
+      if (
+        item === undefined ||
+        item === null ||
+        (Array.isArray(item) && item.length === 0)
+      ) {
+        return;
+      }
+
+      // 判断当前元素是数组还是值
+      if (Array.isArray(item)) {
+        // 处理多维数组情况
+        const firstItem = item[0].toString();
+        parentKey.push(firstItem);
+        // 如果还没有这个key的分组，创建一个
+        if (!map.has(firstItem)) {
+          const valueKey = parentKey.join(String.fromCharCode(0));
+          const aggregator = getAggregator(parentKey, []);
+          const node = {
+            [currentKey]: firstItem,
+            codeName: currentKey,
+            label: firstItem,
+            srfkey: valueKey,
+            value: aggregator.value(),
+            format: aggregator.format(aggregator.value()),
+            children: [],
+          };
+          if (depth === keys.length - 1) {
+            const treeItem = pivotData.value.tree[valueKey];
+            node.items = Object.keys(treeItem).map(key => {
+              const value = treeItem[key].value();
+              return {
+                codeName: key,
+                value,
+                format: treeItem[key].format(value),
+              };
+            });
+          }
+          map.set(firstItem, node);
+          result.push(node);
+        }
+
+        // 递归处理剩余元素
+        const remainingItems = item.slice(1);
+        if (remainingItems.length > 0) {
+          map
+            .get(firstItem)
+            .children.push(
+              ...multiDimArrayToTree(
+                [remainingItems],
+                keys,
+                depth + 1,
+                parentKey,
+              ),
+            );
+        }
+      } else {
+        // 处理叶子节点（最后一层）
+        result.push({
+          [currentKey]: item,
+        });
+      }
+      parentKey = [];
+    });
+
+    return result;
+  };
+
+  const reduceItems = items => {
+    return items.reduce((acc, item) => {
+      const index = acc.findIndex(x => x.codeName === item.codeName);
+      if (index !== -1) {
+        acc[index].value += item.value;
+      } else {
+        acc.push(item);
+      }
+      return acc;
+    }, []);
+  };
+
+  const fillGroupData = items => {
+    let resValue = 0;
+    const resItems = [];
+    items.forEach(item => {
+      if (item.children && item.children.length > 0) {
+        const { value, tempItems } = fillGroupData(item.children);
+        item.value = value;
+        item.items = tempItems;
+        if (!item.format) {
+          const fn = numberFormat();
+          item.format = fn(item.value);
+        }
+      }
+      if (item.items) {
+        resItems.push(...item.items);
+      }
+      resValue += item.value;
+    });
+    return { value: resValue, tempItems: reduceItems(resItems) };
+  };
+
+  const calcGroupData = () => {
+    const treeData = pivotData.value.tree;
+    const keys = Object.keys(treeData).map(key =>
+      key.split(String.fromCharCode(0)),
+    );
+    let hasEmpty = false;
+    const index = keys.findIndex(key => key.indexOf('') === 0);
+    if (index !== -1) {
+      keys.splice(index, 1);
+      hasEmpty = true;
+    }
+    const result = multiDimArrayToTree(keys, rowAttrs.value);
+    fillGroupData(result);
+    if (hasEmpty) {
+      const key = ' '.repeat(rowAttrs.value.length - 1).split(' ');
+      const Aggregator = getAggregator(key, []);
+      result.push({
+        codeName: 'empty',
+        label: '无',
+        srfkey: 'empty',
+        value: Aggregator.value(),
+        format: Aggregator.format(Aggregator.value()),
+      });
+    }
+    groupData.value = result;
+  };
+
+  watch(
+    () => [pivotData.value.tree],
+    () => {
+      calcGroupData();
+    },
+    { immediate: true, deep: true },
+  );
+
   const pivotDataContext = {
     pivotData,
     rowKeys,
@@ -143,6 +301,7 @@ export function providePivotData(props) {
     rowTotalColors,
     colTotalColors,
     error,
+    groupData,
   };
 
   provide(PIVOT_DATA_KEY, pivotDataContext);
diff --git a/src/pivottable/helper/defaultProps.js b/src/pivottable/helper/defaultProps.js
index 09cb221..a3eb6ea 100644
--- a/src/pivottable/helper/defaultProps.js
+++ b/src/pivottable/helper/defaultProps.js
@@ -102,4 +102,8 @@ export default {
     type: Array,
     default: () => [],
   },
+  groupMode: {
+    type: String,
+    default: 'default',
+  },
 };
-- 
Gitee