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
欢迎任何形式的转载,但请务必注明出处。
限于本人水平,如果文章和代码有表述不当之处,还请不吝赐教。
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· DeepSeek 开源周回顾「GitHub 热点速览」
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了