vxe-table 是基于 Vue 的高性能表格组件，其透视表（Pivot Table）功能支持灵活的分组、汇总与排序配置，以下是透视表分组汇总及排序的基础配置步骤，结合示例代码详细说明：
一、核心概念
- 行维度（rows）：作为透视表的行分组字段
- 列维度（columns）：作为透视表的列分组字段
- 值维度（values）：需要聚合计算的字段（如求和、计数）
- 汇总配置：定义值维度的聚合方式（sum、count、avg 等）
- 排序配置：对行 / 列分组结果或汇总值进行排序
二、基础配置步骤
1. 安装与引入
确保已安装 vxe-table 及依赖：
bash
运行
npm install vxe-table@next xe-utils@next在 Vue 组件中引入：
vue
<template>
<vxe-pivot-table
:data="tableData"
:fields="fields"
:pivot-config="pivotConfig"
/>
</template>
<script setup>
import { VxePivotTable } from 'vxe-table'
import 'vxe-table/lib/style.css'
</script>2. 定义数据源与字段配置
javascript
运行
// 示例数据源
const tableData = [
{ region: '华东', product: '手机', quarter: 'Q1', sales: 100 },
{ region: '华东', product: '手机', quarter: 'Q2', sales: 120 },
{ region: '华北', product: '电脑', quarter: 'Q1', sales: 80 },
{ region: '华北', product: '电脑', quarter: 'Q2', sales: 90 },
]
// 字段配置（定义行、列、值维度）
const fields = {
// 行分组字段
rows: ['region', 'product'],
// 列分组字段
columns: ['quarter'],
// 值字段（需汇总的字段）
values: ['sales'],
}3. 分组汇总配置
通过 pivotConfig.values 定义值字段的聚合方式，支持内置汇总方法或自定义：
javascript
运行
const pivotConfig = {
// 汇总配置
values: [
{
field: 'sales',
// 聚合方式：sum（求和）、count（计数）、avg（平均值）、max/min 等
aggregate: 'sum',
// 自定义汇总列标题
title: '销售额汇总',
// 自定义汇总计算（可选，覆盖内置聚合）
// aggregateMethod: (list) => list.reduce((acc, item) => acc + item.sales, 0)
}
],
// 显示行/列总计
showRowTotals: true,
showColumnTotals: true,
// 显示行/列子总计（多级分组时）
showRowSubTotals: true,
showColumnSubTotals: true,
}4. 排序配置
支持对行分组结果 、列分组结果 或汇总值排序：
（1）行 / 列分组维度排序
通过 fields.rows/columns 的配置项排序：
javascript
运行
const fields = {
rows: [
{ field: 'region', sort: 'asc' }, // 行维度：region 升序
{ field: 'product', sort: 'desc' } // product 降序
],
columns: [
{ field: 'quarter', sort: (a, b) => a === 'Q1' ? -1 : 1 } // 自定义列排序（Q1 在前）
],
values: ['sales'],
}（2）汇总值排序
通过 pivotConfig.sortBy 按汇总值排序：
javascript
运行
const pivotConfig = {
values: [{ field: 'sales', aggregate: 'sum', title: '销售额汇总' }],
// 按销售额汇总值降序排序（支持指定行/列维度）
sortBy: [
{
field: 'sales', // 对应值字段
order: 'desc', // 排序方向：asc/desc
// 可选：指定排序维度（row/column）
dimension: 'row'
}
],
}（3）自定义排序函数
对分组结果或汇总值进行复杂排序：
javascript
运行
const pivotConfig = {
// 自定义行排序：先按 region 分组，再按销售额汇总值降序
sortMethod: (a, b) => {
if (a.region !== b.region) {
return a.region.localeCompare(b.region)
}
return b.salesSum - a.salesSum // salesSum 为汇总后的字段名
},
}三、完整示例代码
vue
<template>
<vxe-pivot-table
:data="tableData"
:fields="fields"
:pivot-config="pivotConfig"
border
height="500px"
/>
</template>
<script setup>
import { VxePivotTable } from 'vxe-table'
import 'vxe-table/lib/style.css'
// 数据源
const tableData = [
{ region: '华东', product: '手机', quarter: 'Q1', sales: 100 },
{ region: '华东', product: '手机', quarter: 'Q2', sales: 120 },
{ region: '华东', product: '平板', quarter: 'Q1', sales: 50 },
{ region: '华北', product: '电脑', quarter: 'Q1', sales: 80 },
{ region: '华北', product: '电脑', quarter: 'Q2', sales: 90 },
{ region: '华北', product: '手机', quarter: 'Q2', sales: 70 },
]
// 字段配置（行、列、值维度）
const fields = {
rows: [
{ field: 'region', title: '地区', sort: 'asc' },
{ field: 'product', title: '产品', sort: 'desc' }
],
columns: [
{ field: 'quarter', title: '季度', sort: (a, b) => a === 'Q1' ? -1 : 1 }
],
values: ['sales']
}
// 透视表配置（汇总、排序）
const pivotConfig = {
values: [
{
field: 'sales',
aggregate: 'sum',
title: '销售额（元）',
formatter: (value) => value.toFixed(0) // 格式化显示
}
],
// 显示总计/子总计
showRowTotals: true,
showColumnTotals: true,
showRowSubTotals: true,
// 按销售额汇总值降序排序
sortBy: [
{ field: 'sales', order: 'desc', dimension: 'row' }
]
}
</script>四、关键配置说明
- 汇总类型 ：内置支持
sum（求和）、count（计数）、avg（平均值）、max（最大值）、min（最小值）、distinctCount（去重计数）等。 - 排序优先级 ：
sortBy优先级高于行 / 列维度的sort，自定义sortMethod优先级最高。 - 多级分组 ：当行 / 列维度为多级（如
['region', 'product']），可通过showRowSubTotals显示子分组汇总。 - 格式化 ：通过
formatter自定义汇总值的显示格式（如金额、百分比）。
五、拓展功能
- 动态调整维度 ：结合
vxe-pivot-field组件实现行 / 列 / 值维度的动态切换。 - 自定义汇总逻辑 ：通过
aggregateMethod实现复杂聚合（如加权平均）。 - 排序重置 ：调用表格实例的
reloadSort方法重置排序。