计算属性实现表格汇总行的核心是将求和逻辑抽离至computed中，通过reduce逐列累加并响应式更新，适用于结构稳定、列固定、数据量小的场景。

用计算属性实现表格汇总行，核心是把“求和逻辑”从模板里抽出来，放到 computed 中维护，既清晰又响应式。它适合结构稳定、列固定、数据量不大的场景，比如基础报表、配置页、统计看板等。

明确汇总字段与数据源

先确认你要汇总哪些列，以及这些列在原始数据中的字段名。例如销售列表中要汇总 price（单价）、quantity（数量）、amount（小计），那原始数组就该是：

data() { return { list: [ { name: '笔记本', price: 5.5, quantity: 2, amount: 11 }, { name: '鼠标', price: 28, quantity: 1, amount: 28 } ] } }

写计算属性做逐列累加

每个汇总值单独写一个计算属性，用 reduce 累加，逻辑一目了然：

蓝湖代码转vue2.0+element-ui

将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.

下载

• totalPrice：所有 price 的总和 → this.list.reduce((a, b) => a + b.price, 0)
• totalQuantity：所有 quantity 的总和 → this.list.reduce((a, b) => a + b.quantity, 0)
• totalAmount：所有 amount 的总和 → this.list.reduce((a, b) => a + b.amount, 0)

模板中直接调用并渲染汇总行

在表格底部加一行，用 {{ }} 插值显示结果。注意保持列对齐，避免错位：

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

合计 {{ totalPrice }} {{ totalQuantity }} {{ totalAmount }}

如果用了 Element Plus 的 el-table，也可以搭配 show-summary + summary-method，但那是另一套机制——计算属性方案更轻量、更可控，尤其适合你手写 <table> 或需要自定义样式时。<h3>补充建议：精度与空值处理</h3> <p>金额类数字容易出现浮点误差，建议统一保留两位小数：</p> <ul> <li>用 <code>Number(val.toFixed(2)) 或 Math.round(val * 100) / 100

数据为空数组时，reduce 默认初值为 0 是安全的，无需额外判空

若某列可能为 null 或 undefined，加一层 ?? 0 防错，如 b.price ?? 0