背景

  订餐系统前端使用的是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中的pagepage2中,所以这样写,如果直接定义在data中,就不需要写page了。同时vm是在方法开始声明好的。这些代码可以直接写在查询完数据之后。

总结

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

Logo

前往低代码交流专区

更多推荐