Vue遍历data中某个字段并累加,res.result.forEach方法总结
前言:在实际的项目中,有时会遇到将data中返回的数据进行累计求和返显。这时,我们就可以使用forEach()方法进行处理。forEach的定义和方法:forEach()方法用于调用数组的每个元素,并将元素传递给回调函数。注意:forEach()对于空数组是不会执行回调函数的。一、html部分<div class="tab-content"><ta...
·
前言:在实际的项目中,有时会遇到将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
更多推荐
已为社区贡献15条内容
所有评论(0)