数据透视 ​

@dou-ui/pivot 把一组明细记录按字段分组汇总成交叉表。选好哪些字段放在行上、哪些放在列上、汇总哪些数值，表格会算出每个组合的结果，以及各级小计和总计。

透视表只读取传入的记录，不会修改它们。10 万条记录的分组汇总在几十毫秒内完成，只调整排序、展开或折叠时不会重新汇总。完整页面的写法见区块中的销售分析和工单统计。

安装 ​

数据透视是单独的包，需要和 dou-ui 一起使用：

bun add dou-ui @dou-ui/pivot

引入样式，再注册组件：

import 'dou-ui/style.css'
import '@dou-ui/pivot/style.css'
import { DouPivot, DouPivotFields } from '@dou-ui/pivot'

app.use(DouPivot)
app.use(DouPivotFields)

基础用法 ​

data 是一组记录，fields 说明每个字段的名称和显示方式，config 决定字段放在哪里：

• rows：放在行上的字段，从外到内逐级分组；
• columns：放在列上的字段；
• values：要汇总的数值。

行上的多个字段显示成一棵树，组所在的行显示这一组的小计。列上的多个字段显示成多级表头，展开的组后面有一列“合计”。最下方的总计行在滚动时始终可见，最右侧是总计列。

config 支持 v-model:config，在表格里排序时会更新它。它是普通的数据，可以直接保存下来，下次打开时恢复同样的视图。

字段 ​

fields 是一个数组，每一项描述一个字段：

import type { PivotConfig, PivotField } from '@dou-ui/pivot'
import { ref } from 'vue'

interface Order {
  region: string
  month: number
  amount: number
  cost: number
}

const fields: PivotField<Order>[] = [
  { name: 'region', label: '大区', order: ['华东', '华南', '华北', '西南'] },
  { name: 'month', label: '月份', format: (m) => `${m} 月` },
  {
    name: 'amount',
    label: '销售额',
    type: 'number',
    format: { style: 'currency', currency: 'CNY' },
  },
  { name: 'profit', label: '毛利', value: (row) => row.amount - row.cost },
]

const config = ref<PivotConfig>({ rows: ['region'], columns: ['month'], values: ['amount'] })

• 给 PivotField 传入记录的类型，value 收到的 row 就带有类型。config 用 PivotConfig 标注，后面各页的片段只写出其中的字段。
• name 是记录上的键，config 里用它指代字段；label 是表头上显示的名字。
• type 不写时根据前 100 条记录推断。
• format 决定组名或数值怎么显示：数字字段传 Intl.NumberFormat 的选项，日期字段传 Intl.DateTimeFormat 的选项，或者传一个函数。
• order 指定组的顺序，没有列出的组排在后面。
• value 从记录算出字段的值，用来定义记录上没有的字段。

不传 fields 时，字段从记录的键推断，表头显示键名。

空值（null、undefined、空字符串、NaN）归为一组，显示为“（空）”，总是排在最后。

尺寸 ​

size 设置行高，sm、md、lg 分别是 28、32、40px。maxHeight 是表格的最大高度，内容更少时表格随内容变矮；宽度总是占满容器。

rowHeaderWidth 是行头的宽度，窄屏上会自动收窄；columnWidth 是每个数值列的最小宽度，表格较宽时会适当加宽。

语言 ​

表格和字段面板里的文字（“总计”“（空）”、汇总方式的名称、菜单和对话框等）跟随 ConfigProvider 的语言，内置简体中文、繁体中文和英文。

messages 可以改写其中几条：

<DouPivot :data="orders" :config="config" :messages="{ total: '全部', empty: '未填写' }" />

• messages.aggregates 里可以给自定义汇总方式起名字，键是它的 name。
• pivotLocales 是内置的三份文案，按语言名称（如 'zh-CN'）索引。要支持其他语言时，往里面加一份完整的 PivotMessages。
• usePivotMessages(override?) 返回当前语言的文案，自己的界面里需要相同的文字时使用。

API ​

Pivot Props ​

Pivot Events ​

Pivot Exposes ​

PivotField ​

PivotConfig ​

CSS 变量 ​