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