vue实现动态添加行(并计算合计,小计)
vue实现动态添加行的功能,输入数量和价格的时候,计算小计
·
需要实现一个动态添加行的功能,输入数量和价格的时候,计算小计,合计如下图
小计=数量×价格
合计=所有的小计和
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">
采购明细
<button id="add" class="btn btn-danger " type="button">
<i class="glyphicon glyphicon-remove"></i> 添加
</button>
</div>
<div v-cloak class="part" id="content">
<table class="table table-hover">
<thead>
<tr>
<th class="center">序号</th>
<th class="center">材料名称</th>
<th class="center">材料类型</th>
<th class="center">规格型号</th>
<th class="center">计量单位</th>
<th class="center">需用数量</th>
<th class="center">参考价格(元/单)</th>
<th class="center">小计(元)</th>
<th class="center">备注</th>
<th class="center">删除</th>
</tr>
</thead>
<tr v-for="(value,index) in rows">
<td>{{index+1}}</td>
<td>
<input type="text" class="form-control" v-model="value.materialName"
:name="'inventoryList['+index+'].materialName'">
</td>
<td>
<select :name="'inventoryList['+index+'].materialType'" class="form-control">
<template v-for="item in typeList">
<option
v-if="item.dictValue == value.materialType" selected
:value="item.dictValue"> {{item.dictLabel}}
</option>
<option v-else :value="item.dictValue" v-text="item.dictLabel">
</option>
</template>
</select>
</td>
<td>
<input type="text" class="form-control" v-model="value.model"
:name="'inventoryList['+index+'].model'">
</td>
<td>
<input type="text" class="form-control" v-model="value.unit"
:name="'inventoryList['+index+'].unit'">
</td>
<td>
<input type="text" class="form-control" v-model="value.purchaseCount"
:name="'inventoryList['+index+'].purchaseCount'">
</td>
<td>
<input type="text" class="form-control" v-model="value.price"
:name="'inventoryList['+index+'].price'">
</td>
<td>
<input type="text" class="form-control" v-model="subtotal(index)"
:name="'inventoryList['+index+'].subtotal'">
</td>
<td>
<input type="text" class="form-control" v-model="value.remark"
:name="'inventoryList['+index+'].remark'">
</td>
<td>
<div>
<a class="remove" href="javascript:;;;" @click="removeTodo(index)" title="删除行"><i
class="glyphicon glyphicon-remove"></i></a>
</div>
</td>
</tr>
</table>
<label class="col-sm-2 control-label">总价:</label>
<div class="col-sm-4">
<input id="totalAmountUp"
class="form-control" type="text" v-model="total" readonly>
</div>
</div>
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();
});
如果有更好的实现请指正
更多推荐
已为社区贡献1条内容
所有评论(0)