首页 > 其他分享 >Vue遍历data中某个字段并累加,res.result.forEach方法总结

Vue遍历data中某个字段并累加,res.result.forEach方法总结

时间:2022-11-23 18:02:44浏览次数:38  
标签:Vue res addTotalCount addTodayPremium item addTotalPremium result addTodayCount 

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 >
	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>

  

标签:Vue,res,addTotalCount,addTodayPremium,item,addTotalPremium,result,addTodayCount,
From: https://www.cnblogs.com/mo3408/p/16919272.html

相关文章

  • vue组件-文本超出显示点点点且悬浮可查看所有内容
    需求当文本超出的时候需要显示点点点,然后鼠标悬浮其上要能查看所有的文本内容。就直接封装一个通用的组件。依赖项element-plusvue3组件存放目录新建vue文件/compo......
  • Vue 初识
    官方地址地址:https://cn.vuejs.org/安装Vue库地址:https://v2.cn.vuejs.org/v2/guide/installation.html 安装浏览器调试工具 另外一种方式安装Vue-devtools......
  • wordpress 火车头发布模块
    <html><head><metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"><title>免登陆WordPress发布接口</title></head><body><p>最新版本或者意......
  • docker没有vi不能执行yum报Device or resource busy
    最近在使用docker的过程中发现一个问题,就是想用vim编辑器编辑一个文件,发现连vi都没有。于是想到一个办法用dockercp来解决问题:首先执行dockerps-a查看容器的id然后再......
  • vue2源码学习1
    1.vue源码解读流程newVue调用的是Vue.prototype._init从该函数开始经过$options参数合并之后initLifecycle初始化生命周期标志初始化事件,初始化渲染函数。......
  • WordPress编辑器支持Word图片自动粘贴
    ​ 百度ueditor新增的将word内容导入到富文本编辑框的功能怎么没有啊,...ueditor实现word文档的导入和下载功能的方法:1、UEditor没有提供word的导入功能,只能说是粘贴复......
  • java web开发(和vue联合开发)
        前面我们谈到了很多次vue,也说到了vue的很多优点。比如说,vue实现了mvc中全部v的功能,也就是view的部分。这样,后端开发就变得很简单,前后端之间只要实现json数据的......
  • element ui框架(vuex3使用)
        前面我们使用了sessionStorage实现了登陆状态的保存。但是sessionStorage保存的数据是有限的,如果希望实现vue不同组件之间的数据共享,可以使用vuex来实现。目前......
  • element ui框架(vuex模块化)
        上一节我们说到了vuex在数据保存中的作用。其实vuex在实际使用中,需要保存非常多的数据,不可能所有的数据都放到index.js里面。因此,有必要把数据放到单独的模块里......
  • 前端-Avue属性解释
    Avue属性<template><!--基础组件--><basic-container><!--<el-button@click='exportHandle'>导出</el-button>--><avue-crud设置表格属性......