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 方法重置排序。