vue实现动态添加行（并计算合计，小计）

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

小计=数量×价格

合计=所有的小计和

 

            
            

                采购明细
                
                     添加
                
            
            

                

                    

                    

                        
序号
                        
材料名称
                        
材料类型
                        
规格型号
                        
计量单位
                        
需用数量
                        
参考价格（元/单）
                        
小计（元）
                        
备注
                        
删除

                    
                    

                    

                        
{{index+1}}
                        

                            
                        
                        

                            
                                

                            
                        
                        

                            
                        
                        

                            
                        
                        

                            
                        
                        

                            
                        
                        

                            
                        
                        

                            
                        

                        

                            

                                
                            
                        

                    
                
                   总价：
            

                
            
            

 

 

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();
    });

如果有更好的实现请指正