BizPivotTable 透视表

数据透视表：扁平明细数据 → 行/列维度交叉汇总，纯前端聚合零依赖。行维度多级嵌套（rowspan 合并）、列维度多层表头，指标支持 sum / count / avg / max / min / custom 多个并列；一级行分组小计 + 总计行；单元格点击下钻回传维度路径与命中的原始记录；expose exportCsv 一键导出当前透视结果（含 BOM，Excel 打开不乱码）。

适用于：报表中心、销量/营收多维统计（大区×月份、渠道×产品）、绩效汇总、运营日报——过去只能在服务端拼宽表或手写 reduce 的场景。

与 BizTable 的分工

BizTable 是明细行渲染（一行一条记录）；本组件是多维交叉汇总（一格一个聚合值）。两者常配合：透视表看总量、cell-click 下钻弹明细表（见下钻示例，明细弹窗直接用 openBizDrawer）。

基础透视

大区	7月	8月	9月
华东	907,147	830,645	1,028,178
658,246	664,568	633,966
639,400	731,012	638,132
总计	2,204,793	2,226,225	2,300,276

行维度（大区）× 列维度（月份，formatter 转显示文案）× 指标（销售额求和），底部自动带总计行。

<script setup lang="ts">
/** 场景：基础透视——行维度（区域）× 列维度（月份）× 指标（销售额求和） */
import { BizPivotTable } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'
</script>

<template>
  <BizPivotTable
    :data="salesData"
    :rows="[{ field: 'region', title: '大区' }]"
    :cols="[{ field: 'month', title: '月份', formatter: (m) => `${Number(String(m).slice(5))}月` }]"
    :measures="[{ field: 'amount', title: '销售额', aggregate: 'sum' }]"
  />
</template>

显示代码

多级维度嵌套

大区 / 城市		线上	门店	分销
华东	上海	263,553	345,011	228,161
	华东	325,582	294,798	376,368
		华东	329,637	301,103	301,757
华东 小计			918,772	940,912	906,286
北京	354,511		349,196	289,456
297,149	380,551	285,917
华北 小计		651,660	729,747	575,373
深圳	303,025	320,189	354,307
245,864	360,708	424,451
华南 小计		548,889	680,897	778,758
总计		2,119,321	2,351,556	2,260,417

行维度两级嵌套（大区→城市，同组 rowspan 合并），列维度单级（渠道）；show-subtotal 开启一级行分组小计。

<script setup lang="ts">
/** 场景：多级行/列维度——大区→城市 嵌套（rowspan 合并）× 渠道列拆分 */
import { BizPivotTable } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'
</script>

<template>
  <BizPivotTable
    :data="salesData"
    :rows="[
      { field: 'region', title: '大区' },
      { field: 'city', title: '城市' },
    ]"
    :cols="[{ field: 'channel', title: '渠道' }]"
    :measures="[{ field: 'amount', title: '销售额', aggregate: 'sum' }]"
    show-subtotal
  />
</template>

显示代码

多指标并列

大区	7月			8月			9月
	销售额	订单数	客单价	销售额	订单数	客单价	销售额	订单数	客单价
华东	907,147	709	33598 元	830,645	635	30765 元	1,028,178	864	38081 元
658,246	591	36569 元	664,568	513	36920 元	633,966	514	35220 元
639,400	550	35522 元	731,012	579	40612 元	638,132	524	35452 元
总计	2,204,793	1,850	34997 元	2,226,225	1,727	35337 元	2,300,276	1,902	36512 元

同一行列结构下多个指标并排（销售额合计 / 订单数合计 / 客单价均值），表头自动补一行指标行。

<script setup lang="ts">
/** 场景：多指标并列——销售额 / 订单数 / 客单价（avg）并排展示 */
import { BizPivotTable } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'
</script>

<template>
  <BizPivotTable
    :data="salesData"
    :rows="[{ field: 'region', title: '大区' }]"
    :cols="[{ field: 'month', title: '月份', formatter: (m) => `${Number(String(m).slice(5))}月` }]"
    :measures="[
      { field: 'amount', title: '销售额', aggregate: 'sum' },
      { field: 'orders', title: '订单数', aggregate: 'sum' },
      { field: 'amount', title: '客单价', aggregate: 'avg', formatter: (v) => `${Math.round(v)} 元` },
    ]"
  />
</template>

显示代码

聚合方式切换

合计均值最大最小计数

产品	线上	门店	分销
传感器	702,617	748,405	749,363
699,714	657,690	690,928
716,990	945,461	820,126
总计	2,119,321	2,351,556	2,260,417

指标配置响应式：单选切换 sum / avg / max / min / count 即时重算（measures 是 computed）。

<script setup lang="ts">
/** 场景：聚合方式切换——sum / avg / max / min / count 单选即时重算 */
import { computed, ref } from 'vue'
import { BizPivotTable } from 'vue3-ep-biz-lib'
import type { PivotAggregate } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const agg = ref<PivotAggregate>('sum')

const AGG_TEXT: Record<PivotAggregate, string> = {
  sum: '销售额合计',
  avg: '销售额均值',
  max: '单笔最高',
  min: '单笔最低',
  count: '记录条数',
  custom: '自定义',
}

const measures = computed(() => [
  { field: 'amount', title: AGG_TEXT[agg.value], aggregate: agg.value },
])
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-radio-group v-model="agg">
      <el-radio-button value="sum">合计</el-radio-button>
      <el-radio-button value="avg">均值</el-radio-button>
      <el-radio-button value="max">最大</el-radio-button>
      <el-radio-button value="min">最小</el-radio-button>
      <el-radio-button value="count">计数</el-radio-button>
    </el-radio-group>
    <BizPivotTable
      :data="salesData"
      :rows="[{ field: 'product', title: '产品' }]"
      :cols="[{ field: 'channel', title: '渠道' }]"
      :measures="measures"
    />
  </el-space>
</template>

显示代码

小计与总计

分组小计

总计行

大区 / 产品		线上	门店	分销
华东	传感器	291,731	275,285	314,896
	华东	346,812	319,901	308,203
		华东	280,229	345,726	283,187
华东 小计			918,772	940,912	906,286
传感器	203,184		276,602	193,070
160,580	192,964	139,782
287,896	260,181	242,521
华北 小计		651,660	729,747	575,373
传感器	207,702	196,518	241,397
192,322	144,825	242,943
148,865	339,554	294,418
华南 小计		548,889	680,897	778,758
总计		2,119,321	2,351,556	2,260,417

show-subtotal 一级行分组小计、show-total 总计行，均可开关（无数据时总计行自动隐藏）。

<script setup lang="ts">
/** 场景：小计与总计——一级行分组小计（show-subtotal）+ 总计行（show-total 可关） */
import { ref } from 'vue'
import { BizPivotTable } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const showSubtotal = ref(true)
const showTotal = ref(true)
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-space>
      <el-switch v-model="showSubtotal" active-text="分组小计" />
      <el-switch v-model="showTotal" active-text="总计行" />
    </el-space>
    <BizPivotTable
      :data="salesData"
      :rows="[
        { field: 'region', title: '大区' },
        { field: 'product', title: '产品' },
      ]"
      :cols="[{ field: 'channel', title: '渠道' }]"
      :measures="[{ field: 'amount', title: '销售额', aggregate: 'sum' }]"
      :show-subtotal="showSubtotal"
      :show-total="showTotal"
    />
  </el-space>
</template>

显示代码

单元格下钻

大区 / 产品		7月		8月		9月
		销售额	订单数	销售额	订单数	销售额	订单数
华东	传感器	227,303	205	239,446	218	415,163	314
	华东	417,673	268	236,430	172	320,813	292
		华东	262,171	236	354,769	245	292,202	258
传感器			201,317	164	163,333	121	308,206	216
188,242	199		164,715	149	140,369	132
268,687	228	336,520	243	185,391	166
传感器	170,914	185	218,798	189	255,905	205
171,352	161	213,373	179	195,365	162
297,134	204	298,841	211	186,862	157
总计		2,204,793	1,850	2,226,225	1,727	2,300,276	1,902

点击任意有数据的值单元格，弹窗展示该格命中的原始明细（行列维度路径 + 记录全集，可直接对接明细页/导出）。

点击值单元格，cell-click 回传行列维度路径 + 指标 + 命中原始记录，配合 openBizDrawer 弹明细表。

<script setup lang="ts">
/** 场景：单元格下钻——cell-click 回传维度路径与命中记录，openBizDrawer 弹出明细 */
import { defineComponent, h } from 'vue'
import type { PropType } from 'vue'
import { ElTable, ElTableColumn, ElTag } from 'element-plus'
import { BizPivotTable, openBizDrawer } from 'vue3-ep-biz-lib'
import type { PivotCellContext } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const DetailPanel = defineComponent({
  name: 'PivotDrillPanel',
  props: { ctx: { type: Object as PropType<PivotCellContext>, required: true } },
  setup(p) {
    return () =>
      h('div', { style: 'display: flex; flex-direction: column; gap: 12px' }, [
        h(
          'div',
          { style: 'display: flex; gap: 8px; align-items: center; flex-wrap: wrap' },
          [
            ...p.ctx.rowDims.map((d) => h(ElTag, { key: `r${d.field}` }, () => d.label)),
            ...p.ctx.colDims.map((d) => h(ElTag, { key: `c${d.field}`, type: 'info' }, () => d.label)),
            h(ElTag, { key: 'm', type: 'warning' }, () => p.ctx.measure.title ?? p.ctx.measure.field),
          ],
        ),
        h(
          ElTable,
          { data: p.ctx.records, size: 'small', border: true, maxHeight: 360 },
          () => [
            h(ElTableColumn, { prop: 'region', label: '大区', width: 80 }),
            h(ElTableColumn, { prop: 'city', label: '城市', width: 80 }),
            h(ElTableColumn, { prop: 'channel', label: '渠道', width: 70 }),
            h(ElTableColumn, { prop: 'month', label: '月份', width: 96 }),
            h(ElTableColumn, { prop: 'product', label: '产品' }),
            h(ElTableColumn, { prop: 'amount', label: '金额', align: 'right' }),
          ],
        ),
      ])
  },
})

const onCellClick = (ctx: PivotCellContext): void => {
  const dims = [...ctx.rowDims, ...ctx.colDims].map((d) => d.label).join('·')
  openBizDrawer({
    component: DetailPanel,
    props: { ctx },
    title: `明细：${dims}`,
    size: 'small',
  })
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <BizPivotTable
      :data="salesData"
      :rows="[
        { field: 'region', title: '大区' },
        { field: 'product', title: '产品' },
      ]"
      :cols="[{ field: 'month', title: '月份', formatter: (m) => `${Number(String(m).slice(5))}月` }]"
      :measures="[
        { field: 'amount', title: '销售额', aggregate: 'sum' },
        { field: 'orders', title: '订单数', aggregate: 'sum' },
      ]"
      @cell-click="onCellClick"
    />
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      点击任意有数据的值单元格，弹窗展示该格命中的原始明细（行列维度路径 + 记录全集，可直接对接明细页/导出）。
    </p>
  </el-space>
</template>

显示代码

预置分析方案

大区 × 月份 销售额渠道 × 月份 订单量城市汇总

大区	7月	8月	9月
华东	907,147	830,645	1,028,178
658,246	664,568	633,966
639,400	731,012	638,132
总计	2,204,793	2,226,225	2,300,276

按钮组一键切换行列维度与指标配置（大区×月份 / 渠道×月份 / 城市排行），报表页常用形态。

<script setup lang="ts">
/** 场景：预置分析方案——按钮组一键切换行列维度与指标配置 */
import { ref } from 'vue'
import { BizPivotTable } from 'vue3-ep-biz-lib'
import type { PivotDimension, PivotMeasure } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const plan = ref('region-month')

const monthFormatter = (m: string | number): string => `${Number(String(m).slice(5))}月`

interface PlanConfig {
  label: string
  rows: PivotDimension[]
  cols: PivotDimension[]
  measures: PivotMeasure[]
}

const plans: Record<string, PlanConfig> = {
  'region-month': {
    label: '大区 × 月份 销售额',
    rows: [{ field: 'region', title: '大区' }],
    cols: [{ field: 'month', title: '月份', formatter: monthFormatter }],
    measures: [{ field: 'amount', title: '销售额', aggregate: 'sum' }],
  },
  'channel-month': {
    label: '渠道 × 月份 订单量',
    rows: [{ field: 'channel', title: '渠道' }],
    cols: [{ field: 'month', title: '月份', formatter: monthFormatter }],
    measures: [{ field: 'orders', title: '订单数', aggregate: 'sum' }],
  },
  'city-rank': {
    label: '城市汇总',
    rows: [{ field: 'city', title: '城市', sort: 'desc' }],
    cols: [],
    measures: [
      { field: 'amount', title: '销售额', aggregate: 'sum' },
      { field: 'orders', title: '订单数', aggregate: 'sum' },
    ],
  },
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-radio-group v-model="plan">
      <el-radio-button v-for="(p, key) in plans" :key="key" :value="key">{{ p.label }}</el-radio-button>
    </el-radio-group>
    <BizPivotTable
      :data="salesData"
      :rows="plans[plan].rows"
      :cols="plans[plan].cols"
      :measures="plans[plan].measures"
    />
  </el-space>
</template>

显示代码

导出 CSV

大区	线上	门店	分销
华东	¥918,772	¥940,912	¥906,286
¥651,660	¥729,747	¥575,373
¥548,889	¥680,897	¥778,758
总计	¥2,119,321	¥2,351,556	¥2,260,417

expose exportCsv(fileName) 导出当前透视结果；formatter 定制货币格式。

<script setup lang="ts">
/** 场景：导出与自定义展示——expose exportCsv 导出当前透视结果 + formatter 货币格式 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import { Download } from '@element-plus/icons-vue'
import { BizPivotTable } from 'vue3-ep-biz-lib'
import type { BizPivotTableInstance } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const tableRef = ref<BizPivotTableInstance>()

const onExport = (): void => {
  tableRef.value?.exportCsv('大区渠道销售额透视')
  ElMessage.success('已导出 CSV（含 BOM，Excel 直接打开不乱码）')
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-button type="primary" :icon="Download" @click="onExport">导出当前透视结果</el-button>
    <BizPivotTable
      ref="tableRef"
      :data="salesData"
      :rows="[{ field: 'region', title: '大区' }]"
      :cols="[{ field: 'channel', title: '渠道' }]"
      :measures="[
        {
          field: 'amount',
          title: '销售额',
          aggregate: 'sum',
          formatter: (v) => `¥${v.toLocaleString('zh-CN', { maximumFractionDigits: 0 })}`,
        },
      ]"
      show-subtotal
    />
  </el-space>
</template>

显示代码

加载/空态与自定义单元格

切空数据

大区	线上	门店	分销
华东	918,772	940,912	906,286
651,660	729,747	575,373
548,889	680,897	778,758
总计	2,119,321	2,351,556	2,260,417

#cell 插槽可拿到聚合上下文 ctx（值/维度路径/原始记录）——此处对超 30 万的单元格红字加粗。

loading 覆盖浮层、空数据文案、#cell 插槽按聚合值条件着色（超阈值红字加粗）。

<script setup lang="ts">
/** 场景：状态与自定义单元格——加载中覆盖、空数据文案、#cell 插槽条件着色 */
import { ref } from 'vue'
import { BizPivotTable } from 'vue3-ep-biz-lib'
import { salesData } from './sales-data'

const loading = ref(false)
const useEmpty = ref(false)

const toggleLoading = (): void => {
  loading.value = true
  setTimeout(() => {
    loading.value = false
  }, 1500)
}
</script>

<template>
  <el-space direction="vertical" size="large" style="width: 100%">
    <el-space>
      <el-button @click="toggleLoading">模拟加载 1.5s</el-button>
      <el-switch v-model="useEmpty" active-text="切空数据" />
    </el-space>
    <BizPivotTable
      :data="useEmpty ? [] : salesData"
      :loading="loading"
      :empty-text="'暂无销售数据'"
      :rows="[{ field: 'region', title: '大区' }]"
      :cols="[{ field: 'channel', title: '渠道' }]"
      :measures="[{ field: 'amount', title: '销售额', aggregate: 'sum' }]"
      size="small"
    >
      <template #cell="{ ctx, text }">
        <span
          :style="ctx && ctx.value > 300000 ? 'color: var(--el-color-danger); font-weight: 600' : ''"
        >{{ text }}</span>
      </template>
    </BizPivotTable>
    <p style="margin: 0; font-size: 13px; color: var(--el-text-color-secondary)">
      #cell 插槽可拿到聚合上下文 ctx（值/维度路径/原始记录）——此处对超 30 万的单元格红字加粗。
    </p>
  </el-space>
</template>

显示代码

Props

属性	类型	默认值	说明
data	Array<Record<string, unknown>>	[]	扁平源数据（一行一条明细，前端聚合）
rows	PivotDimension[]	[]	行维度（至少 1 个，多个依次嵌套）
cols	PivotDimension[]	[]	列维度（为空 = 不做列拆分，指标作唯一表头）
measures	PivotMeasure[]	[]	指标（至少 1 个，多个并列展示）
show-subtotal	boolean	false	一级行分组小计（行维度 ≥2 时生效）
show-total	boolean	true	总计行（无数据自动隐藏）
size	'small' | 'default' | 'large'	'default'	尺寸
empty-text	string	'暂无数据'	空数据文案
loading	boolean	false	加载中覆盖浮层
border	boolean	true	是否显示表格边框

PivotDimension 结构：{ field; title?; sort?: 'asc' | 'desc'; formatter? }——field 为取值字段；缺省排序按数据首次出现顺序。

PivotMeasure 结构：{ field; title?; aggregate?; aggregator?; formatter? }——aggregate 缺省 sum；custom 时用 aggregator 自定义聚合函数；formatter 只对数值结果生效（count/custom 返回字符串时原样展示）。

Events

事件名	参数	说明
cell-click	(ctx: PivotCellContext)	点击有数据的值单元格（空格与小计/总计格不触发）；ctx 含 rowDims / colDims 维度路径、measure、value 聚合值、records 命中原始记录

Slots

插槽名	作用域	说明
cell	{ ctx: PivotCellContext | null, text: string }	自定义值单元格（着色、加图标、迷你条等）
empty	—	空数据内容

Expose

名称	类型	说明
exportCsv	(fileName?: string) => void	导出当前透视结果为 CSV（含 BOM）
getModel	() => PivotModel	当前渲染模型（表头矩阵 + 渲染行，自渲染/调试用）

聚合引擎导出

引擎为纯函数，自渲染场景（如虚拟滚动大表、SSR 拼表）可直接复用：

导出	说明
buildPivotModel(data, rows, cols, measures, options)	扁平数据 → 透视渲染模型
pivotModelToCsv(model, dimCount)	渲染模型 → CSV 文本
aggregateRecords(measure, records)	单指标聚合
dimKeyOf(value)	维度取值归一（空值显示「（空）」）