Vue 3 中用 computed 实现表格统计行求和，核心是将累加逻辑抽离至响应式系统自动更新；单列求和需处理空值与类型容错，多列汇总应一次遍历提升性能，模板中注意格式控制与精度处理。

Vue 3 中用 computed 实现表格统计行求和，核心是把累加逻辑从模板中抽离出来，交由响应式系统自动追踪和更新。只要原始数据变化，汇总值立刻重算，无需手动触发。

单列求和：简洁写法 + 安全转换

适用于金额、数量等基础字段的合计。重点注意空值和类型容错：

• 用 reduce 遍历数组，初值设为 0
• 对字段值做 Number(val) || 0 或 val ?? 0 处理，避免 NaN
• 金额类建议统一保留两位小数：Math.round(sum * 100) / 100

示例（组合式 API）：

<script setup><br> import { ref, computed } from 'vue'<br> const tableData = ref([<br> { name: 'A', price: 19.9, qty: 2 },<br> { name: 'B', price: 35, qty: null }<br> ])<br> const totalPrice = computed(() =><br> tableData.value.reduce((sum, row) => sum + (Number(row.price) || 0), 0)<br> )<br> const totalQty = computed(() =><br> tableData.value.reduce((sum, row) => sum + (row.qty ?? 0), 0)<br> )<br> </script>

多列同步汇总：一次遍历多个指标

避免多次遍历数组，提升性能。适合同时统计数量、金额、状态分布等场景：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

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

• 用一个 reduce 返回结构化对象，如 { count: 0, amount: 0, avg: 0 }
• 每轮迭代中分别更新各字段，逻辑集中、可读性强
• 初始值对象需明确字段类型，防止后续访问 undefined

示例：

const summary = computed(() =>
  tableData.value.reduce(
    (acc, row) => ({
      count: acc.count + 1,
      amount: acc.amount + (Number(row.price) || 0),
      avg: acc.count === 0 ? 0 : (acc.amount + (Number(row.price) || 0)) / (acc.count + 1)
    }),
    { count: 0, amount: 0, avg: 0 }
  )
)

模板中渲染汇总行：对齐与格式控制

在表格底部插入一行，直接绑定计算属性即可：

• 手写 <table> 时，用 <code><tr> <td>合计</td> <td>{{ totalPrice }}</td> </tr>，注意列数匹配
• 用 el-table 时，可配合 show-summary 和 summary-method，但 computed 方案更灵活，支持自定义样式或条件渲染
• 金额建议加千分位或单位：{{ totalPrice.toFixed(2) }} 元

注意事项：精度、空数组与响应式边界

几个容易忽略但影响稳定性的点：

• 空数组时 reduce 初值为 0 是安全的，不需额外判空
• 浮点误差常见于价格运算，推荐全程使用整数分单位存储，或在显示层统一处理精度
• computed 只响应其内部访问的响应式依赖；若数据来自 props 或异步赋值，确保源数据本身是响应式的（如用 ref 或 reactive 包裹）