如何在表 vuejs 中求和？答案

【问题标题】：How to sum total in table vuejs?如何在表 vuejs 中求和？
【发布时间】：2022-01-12 08:56:55
【问题描述】：

有两行数据行，

<tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
  <td>
    <pre> sub total : {{ambilaja(formatPrice(ambilPrice[index] - (ambilPrice[index] * subtotalRow[index])))}}</pre>
  </td>
<tr>
<div> total : {{this.totals}}</div>

上述值的结果是每一行的总和，这里我将值传递给函数 ambilaja()。

 return {
    totals : 0
    },
    computed : (){
         ambilaja: function(){
              return (value) => this.lempar(value)
         },
    }, 
    method : {
       lempar(data){
          console.log(data) 
          result console 
          30002 -> total row index 0
          2003 -> total row index 1
       }
    }

如何加总？例如：30002 + 2003 = this.totals

【问题讨论】：

从您的代码中，ambilaja 是一个计算属性。您不能将其作为函数调用以显示小计。您必须将小计分成一个单独的组件。 Aso 你必须使用计算属性来计算你的总数。

标签： javascript vue.js vuex

【解决方案1】：

不确定 ambilPrice 或 subtotalRow 中的数据类型，但您可以添加另一个方法并传递参数来进行计算。

<tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
  <td>
    <pre> sub total : {{ambilaja(formatPrice(ambilPrice[index] - (ambilPrice[index] * subtotalRow[index])))}}</pre>
  </td>
<tr>
<div> total : {{calTotals(ambilPrice, ambilPrice, subtotalRow)}}</div>

Vue 代码：

return {
  totals : 0
  },
  method : {
    calTotals(ambilPriceArr, subtotalRow, index) {
      this.totals = this.totals + ambilPriceArr[index] - (ambilPriceArr[index] * subtotalRow[index]);
      return this.totals;
    },
}

【讨论】：

【解决方案2】：

解决此问题的最佳方法是使用computed 属性作为总数，如下所示。

computed() {
    total: function(){
        let sum = 0;
        this.result_estimate.item_tabel.forEach(item => sum += this.calculatePriceForIndividualRow(item));
        return sum;
    },
},

calculatePriceForIndividualRow 是计算每一行总和的函数。

【讨论】：