Vuejs 显示运行余额

Question

所以我有一个获取已结算和已付款的请求，我想制作一个 table 和运行余额

这是我当前获取的数据

+--------------+------------+----------+
| Date Created |    Billed  |  Payed   |
+--------------+------------+----------+
| 2022-01-01    |     1000   |   0      |
| 2022-01-02    |       0    |   100    |
| 2022-02-01    |     2000   |   0      |
| 2022-02-02    |     0      |   2000   |
| 2022-03-01    |     3000   |   0      |
| 2022-03-02    |      0     |   3000   |
+--------------+------------+----------+

我想做一个这样的 table，显示运行余额

    +--------------+------------+----------+----------+
    | Date Created |    Billed  |  Payed   |  Balance |
    +--------------+------------+----------+----------+
    | 2022-01-01    |     1000   |   0      |   1000   |
    | 2022-01-02    |       0    |   100    |    900   |
    | 2022-02-01    |     2000   |   0      |   2900   |
    | 2022-02-02    |     0      |   2000   |    900   |
    | 2022-03-01    |     3000   |   0      |   3900   |
    | 2022-03-02    |      0     |   3500   |    400   |
    +--------------+------------+----------+----------+

我现在尝试的是

 remainingBalance: function () {
                var tempBalance = this.balance
                return this.collection.map(function(transaction) {
                        tempBalance += (transaction.billed)
                        return parseFloat( tempBalance).toFixed(2)
    
                },0);
                // [900.00, 750.00, 635.00]
            },

<tr v-for="transaction in transactions">
  <td>{{ transaction.id }}</td>
  <td>{{ transaction.billed}}</td>
  <td>{{ transaction.payed}}</td>
  <td>{{ remainingBalance[index] }}</td>
</tr>

但它只显示相同的起始余额如果有账单，则 Payed 的值始终为 0，反之亦然。 Billed 和 Payed 都没有值的行。

我在获取数据时从 Vuejs 或 laravel 端寻找

Answer 1

您可以通过迭代交易数组并对 payed 和 billed 数据进行计算以更新 balance 来实现此目的。我刚刚为您创建了一个工作演示。你可以试试 :

var vm = new Vue({
  el: '#app',
  data: {
    transactions: [{
      id: 1,
      billed: 1000,
      payed: 0
    }, {
      id: 2,
      billed: 0,
      payed: 100
    }, {
      id: 3,
      billed: 2000,
      payed: 0
    }, {
      id: 4,
      billed: 0,
      payed: 2000
    }, {
      id: 5,
      billed: 3000,
      payed: 0
    }, {
      id: 6,
      billed: 0,
      payed: 3500
    }]
  },
  mounted() {
    this.transactions = this.transactions.map((obj, index) => {
      if (obj.id === 1) {
        obj.balance = obj.billed - obj.payed
      } else {
        obj.balance = (!obj.billed && obj.payed)
          ? this.transactions[index - 1].balance - obj.payed
        : obj.billed + this.transactions[index - 1].balance
      }
      return obj;
    })
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"/>
<div id="app">
  <table class="table table-borderd table-striped">
    <thead>
      <th>ID</th>
      <th>Billed</th>
      <th>Payed</th>
      <th>Balance</th>
    </thead>
    <tbody>
      <tr v-for="transaction in transactions">
        <td>{{ transaction.id }}</td>
        <td>{{ transaction.billed }}</td>
        <td>{{ transaction.payed }}</td>
        <td>{{ transaction.balance }}</td>
      </tr>
    </tbody>
  </table>
</div>

Vuejs 显示运行余额

Vuejs Display running balance

php

laravel

vue.js

Vuejs 显示 运行 余额

Vuejs Display running balance

php

laravel

vue.js

Vuejs 显示运行余额