- 在一个表单里可能有这种情况:输入数量金额等,自动计算和或者乘积,提交表单的时候一起提交,可以在计算属性里将值绑定
- 大致效果:
![](https://img2020.cnblogs.com/blog/2293147/202104/2293147-20210413183345641-708235688.png)
- 好了上代码
// 在计算属性
computed:{
sum(){
return parseFloat(this.addAcceptForm.number) * parseFloat(this.addAcceptForm.unitPrice) || 0
}
},
// dom结构:
<el-form :inline="true" :rules="addrules" :model="addAcceptForm" ref="addAcceptForm">
<el-form-item label="数量:" prop="number">
<el-input v-model="addAcceptForm.number"></el-input>
</el-form-item>
<el-form-item label="单价:" prop="unitPrice">
<el-input v-model="addAcceptForm.unitPrice"></el-input>
</el-form-item>
<el-form-item label="金额:">
<el-input v-model="sum" disabled=""></el-input>
</el-form-item>
// 提交的时候我是这样处理sum值的
submitAddAccept() {
this.$refs["addAcceptForm"].validate(valid => {
if (valid) {
const form = this.addAcceptForm;
form.money = this.sum // 直接将计算结果赋值
this.addActLoading = true;
addData("/rear/acceptance/save", form)