本文共 2463 字，大约阅读时间需要 8 分钟。

需要实现一个动态添加行的功能，输入数量和价格的时候，计算小计，合计如下图

小计=数量×价格

合计=所有的小计和

   
            
                
    
                     采购明细                
                          添加                            
    
            
    
                
     
                          
                           
                                
序号
                                
材料名称
                                
材料类型
                                
规格型号
                                
计量单位
                                
需用数量
                                
参考价格（元/单）
                                
小计（元）
                                
备注
                                
删除
                           
                          
                          
       
                                
{ {index+1}}
                                
  
                                
    { {item.dictLabel}}      
                                
  
                                
  
                                
  
                                
  
                                
  
                                
  
                                
 
         
 
           
         
 
                           
                      
     
                   
     总价：            
     
                
                  
     
            
    
   

var vu = new Vue({        el: '#content',        data: {            rows: [[${inventoryList}]],            typeList: [[${materialTypeList}]]        },        computed: {            total() {                return this.rows.map(                    row => row.purchaseCount * row.price).reduce(                    (acc, cur) => (parseFloat(cur) + acc), 0)            }        },        methods: {            subtotal(index) {                var row=this.rows[index];                return row.purchaseCount* row.price;            },            loadMore: function () {                var self = this;                self.rows.push({                    "remark": null,                    "id": null,                    "materialName": null,                    "materialType": null,                    "model": null,                    "unit": null,                    "purchaseCount": null,                    "price": null,                    "subtotal": null,                    "purchaseId": null                });            },            removeTodo: function (index) {                this.rows.splice(index, 1);            }        }    });    $("#add").click(function () {        vu.loadMore();    });

如果有更好的实现请指正

转载地址：http://yhmdi.baihongyu.com/