Vue遍歷data中某個字段並累加，res.result.forEach方法總結

前言：在實際的項目中，有時會遇到將data中返回的數據進行累計求和返顯。這時，我們就可以使用forEach()方法進行處理。

forEach的定義和方法：

forEach()方法用於調用數組的每個元素，並將元素傳遞給回調函數。

注意：forEach()對於空數組是不會執行回調函數的。

一、html部分

<div class="tab-content">
    <table>
        <tbody>
            <tr style="background-color:#81b5fe;color:#fff;">
                <td width="10%">排名</td>
                <td width="18%">機構</td>
                <td width="18%">當日<br>件數</td>
                <td width="18%">當日<br>保費</td>
                <td width="18%">累計<br>件數</td>
                <td width="18%">累計<br>保費</td>
            </tr>
            <tr v-for="item in list1" :key="item.id" class="cellTr">
                <td>{{item.rank}}</td>
                <td>{{item.organName}}</td>
                <td>{{item.todayCount}}</td>
                <td>{{item.todayPremium}}</td>
                <td>{{item.totalCount}}</td>
                <td>{{item.totalPremium}}</td>
            </tr>
            <tr class="tr-total">
                <td colspan="2">合計</td>
                <td>{{addTodayCount}}</td>
                <td>{{addTodayPremium}}</td>
                <td>{{addTotalCount}}</td>
                <td>{{addTotalPremium}}</td>
            </tr>
        </tbody>
    </table>
</div>

二、script部分

<script>
export default {
created(){
//機構達成
    this.GLOBAL.get("policy/query/all/organ",'',(res,sta) => {
        if(sta == 1){
           this.list1 = res.result;
           let addTodayCount = 0;
           let addTodayPremium = 0;
           let addTotalCount = 0;
           let addTotalPremium = 0;
           res.result.forEach((item)=> {
              addTodayCount += item.todayCount;
              addTodayPremium += item.totalCount;
              addTotalCount += item.totalCount;
              addTotalPremium += item.totalPremium;
           });
           this.addTodayCount = addTodayCount;
           this.addTodayPremiun = addTodayPremium;
           this.addTotalCount = addTotalCount;
           this.addTotalPremium = addTotalPremium;
           console.log("請求成功");
        }else if(sta == 0){
           this.GLOBAL.showToast('查詢不到，請重試！');
           console.log("請求失敗");
           return;
        }
    });
},
data() {
    return {
      cur:0,
      list1:[],
      list2:[],
      list3:[],
      personName:'',
      addTodayCount:'',
      addTodayPremium:'',
      addTotalCount:'',
      addTotalPremium:'',
    };
},
};
</script>

如上如有問題，歡迎留言指正，謝謝。

版權聲明：本文爲博主原創文章，未經博主允許不得轉載 。

參考博客： https://blog.csdn.net/qq_31122833/article/details/80235513