Vue计算属性可实现轻量级多维数据透视表，核心是用computed拆分为colValues、rowValues和matrix三部分，动态生成表头、行标签与聚合矩阵，纯前端响应式渲染。

用 Vue 计算属性实现多维度数据透视表，核心是把“分组 + 聚合”逻辑写进 computed，不依赖外部组件、不发请求、纯前端动态计算。适合轻量级报表、内部工具或原型验证场景。

明确数据结构和透视目标

先理清原始数据格式和你想看的视图。比如销售数据：

• 原始数组：sales = [{ region: '华东', product: '手机', amount: 1200 }, ...]
• 目标透视：行按 region，列按 product，单元格显示 sum(amount)

这种结构决定了你需要生成动态表头（列值）、分组行（行值），再填充交叉聚合值。

用 computed 构建行、列、值三部分

拆成三个计算属性，职责清晰、便于调试：

vue-admin-change-reviewer

审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。

下载

立即学习“前端免费学习笔记（深入）”；

• 列维度值：提取所有唯一 product，作为表头列名
  colValues() { return [...new Set(this.sales.map(i => i.product))]; }
• 行维度值：提取所有唯一 region，作为左侧行标签
  rowValues() { return [...new Set(this.sales.map(i => i.region))]; }
• 聚合数据矩阵：遍历每行 × 每列，筛选匹配项并求和
  matrix() { return this.rowValues.map(row => this.colValues.map(col => this.sales.filter(i => i.region === row && i.product === col).reduce((a, b) => a + b.amount, 0))); }

在模板中渲染动态表格

利用 v-for 和二维数组结构渲染：

• 第一行用 colValues 渲染表头（加空单元格占位）
• 后续每行：左侧显示 rowValues[i]，右侧用 matrix[i] 渲染对应数值
• 可加 v-if="colValues.length" 防止空数据报错

不需要写死 <th>手机</th> <th>电脑</th> —— 表头完全由数据驱动。

支持简单交互与扩展

计算属性天然响应式，改原始数据或过滤条件会自动重算：

• 加一个 filteredSales 计算属性做时间/状态过滤，再让 rowValues 等基于它计算
• 把聚合函数抽成方法（如 sumBy('amount')），方便切换为 count 或 avg
• 用 :class 绑定样式，对负值标红、高亮最大值等

比硬写嵌套循环更简洁，也比引入整套 pivot 组件更轻量可控。