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

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>

 

四、关键配置说明

1. 汇总类型：内置支持 sum（求和）、count（计数）、avg（平均值）、max（最大值）、min（最小值）、distinctCount（去重计数）等。
2. 排序优先级：sortBy 优先级高于行 / 列维度的 sort，自定义 sortMethod 优先级最高。
3. 多级分组：当行 / 列维度为多级（如 ['region', 'product']），可通过 showRowSubTotals 显示子分组汇总。
4. 格式化：通过 formatter 自定义汇总值的显示格式（如金额、百分比）。

五、拓展功能

• 动态调整维度：结合 vxe-pivot-field 组件实现行 / 列 / 值维度的动态切换。
• 自定义汇总逻辑：通过 aggregateMethod 实现复杂聚合（如加权平均）。
• 排序重置：调用表格实例的 reloadSort 方法重置排序。