Vue+iview---计算总金额功能的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/m0_37508531/article/details/88648982

背景

  订餐系统前端使用的是vue框架，基于iview组件，因为是订单系统，计算总金额是一个不可缺少的功能。

方法介绍

 1.显示效果

  总金额是由表格中所有的总金额加起来得到的。

 2.总体代码展示

 2.1 绑定数据的代码

		<div style="margin-top:10px">
          总金额：
          ￥<label>{{totalCash}}</label>
        </div>

 2.2 data中进行声明

	  //总金额
      totalCash: 0,
      //中午金额
      sumaftnoon: 0,
      //晚上金额
      sumnight: 0

 2.3 计算方法

vm.page.ajaxHistoryData.forEach(element => {
     vm.sumaftnoon += element.price *element.totalNum
 });

vm.page2.ajaxHistoryData.forEach(element => {
      vm.sumnight += element.price *element.totalNum
 });

vm.totalCash = vm.sumaftnoon + vm.sumnight

  因为我的ajaxHistoryData分别定义在data中的page和page2中，所以这样写，如果直接定义在data中，就不需要写page了。同时vm是在方法开始声明好的。这些代码可以直接写在查询完数据之后。

总结

  所有走过的路都是最美的风景，好好总结吧！