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

╰+攻爆jí腚メ 2022-03-06 11:18 508阅读 0赞

# 背景 #

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

# 方法介绍 #

##  1.显示效果 ##

总金额是由表格中所有的总金额加起来得到的。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]

##  2.总体代码展示 ##

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

###  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`是在方法开始声明好的。这些代码可以直接写在查询完数据之后。

# 总结 #

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220303/3bd5f92dfed649ddb49518a4085be146.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220303/e2ba3735474e479380410960dfa6c534.png