当前位置：首页 > news >正文

vxe-table 透视表分组汇总及排序基础配置

news 2026/6/11 19:02:45

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"borderheight="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 自定义汇总值的显示格式（如金额、百分比）。