本文介绍如何在 vue.js 中基于账单（billed）和回款（payed）数据，实时计算并渲染每行的累计运行余额（running balance），支持正向累加与扣减逻辑，适用于财务对账、应收管理等场景。
本文介绍如何在 vue.js 中基于账单（billed）和回款（payed）数据，实时计算并渲染每行的累计运行余额（running balance），支持正向累加与扣减逻辑，适用于财务对账、应收管理等场景。
在构建财务类报表时，“运行余额”（Running Balance）是核心需求之一：它并非静态字段，而是按时间顺序逐行累加（新增账单）或累减（已收款）得出的动态值。例如，首笔账单 1000 元后余额为 1000；次日回款 100 元，则余额变为 900；后续依序叠加，形成一条连续的资金变动轨迹。
直接在模板中通过索引访问前一行余额会导致响应式失效或逻辑错乱，而原代码中 remainingBalance 计算函数未正确维护状态、也未绑定到每条数据实例，因此无法实现预期效果。最佳实践是在数据初始化阶段（如 mounted 钩子）一次性计算并注入 balance 字段，确保每条记录自带其对应余额，既保障响应式更新，又提升渲染性能。
以下是推荐的 Vue 2 实现方案（兼容 Vue 3 可改用 onMounted + ref）：
new Vue({
el: '#app',
data() {
return {
transactions: [
{ id: 1, date_created: '2022-01-01', billed: 1000, payed: 0 },
{ id: 2, date_created: '2022-01-02', billed: 0, payed: 100 },
{ id: 3, date_created: '2022-02-01', billed: 2000, payed: 0 },
{ id: 4, date_created: '2022-02-02', billed: 0, payed: 2000 },
{ id: 5, date_created: '2022-03-01', billed: 3000, payed: 0 },
{ id: 6, date_created: '2022-03-02', billed: 0, payed: 3500 }
]
}
},
mounted() {
// 按时间顺序逐行计算 running balance
this.transactions = this.transactions.map((item, index) => {
if (index === 0) {
// 首行：余额 = 账单 - 回款
item.balance = item.billed - item.payed
} else {
// 后续行：余额 = 上一行余额 + 本期账单 - 本期回款
const prevBalance = this.transactions[index - 1].balance
item.balance = prevBalance + item.billed - item.payed
}
return item
})
}
})
对应 HTML 模板（含表头与格式化）：
| Date Created | Billed | Payed | Balance |
|---|---|---|---|
| {{ t.date_created }} | {{ t.billed.toFixed(2) }} | {{ t.payed.toFixed(2) }} | {{ t.balance.toFixed(2) }} |
✅ 关键说明与注意事项：
- 数据必须严格按时间升序排列：运行余额依赖顺序，若后端返回无序数据，请务必在 mounted 前调用 this.transactions.sort((a, b) => new Date(a.date_created) - new Date(b.date_created)) 排序；
- 避免在 computed 或模板中重复计算：每次渲染都重新遍历将造成性能浪费，且难以处理异步更新；
- 如需支持动态增删行，应封装为方法（如 updateRunningBalance()），并在添加/删除后主动调用；
- 服务端预计算更优：对于大数据量或高一致性要求场景，建议 Laravel 在 API 层完成余额计算（利用 collect() 累积），减少前端逻辑负担与潜在误差；
- 精度处理：涉及金额务必使用 toFixed(2) 并注意 JavaScript 浮点数问题，生产环境推荐使用 BigInt 或专用库（如 decimal.js）。
通过该方案，你将获得一个清晰、可维护、符合财务语义的运行余额表格，每一行余额均准确反映截至该时间点的净应收状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
