vue项目,动态计算俩个input的值并且赋值给另外的input

  • 在一个表单里可能有这种情况:输入数量金额等,自动计算和或者乘积,提交表单的时候一起提交,可以在计算属性里将值绑定
  • 大致效果:
  • 好了上代码
// 在计算属性
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)
  • 菜鸟一枚,欢迎大佬指点~~
posted @ 2021-04-13 18:42  一颗皮皮高QAQ  阅读(5195)  评论(3编辑  收藏  举报