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)
  • 菜鸟一枚,欢迎大佬指点~~

作者:一颗皮皮高QAQ
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。

posted @   一颗皮皮高QAQ  阅读(5657)  评论(3编辑  收藏  举报
编辑推荐:
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
阅读排行:
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
点击右上角即可分享
微信分享提示