jeecgboot-vue3如何实现表单赋值后,另一字段根据值来计算并赋值
时间: 2024-02-03 07:11:58 浏览: 111
在jeecgboot-vue3中实现表单赋值后,另一字段根据值来计算并赋值的方法如下:
1.首先,在表单中定义需要计算的字段,并设置其初始值为0。
```
<el-form-item label="数量" prop="num">
<el-input v-model="form.num"></el-input>
</el-form-item>
<el-form-item label="总价" prop="totalPrice">
<el-input v-model="form.totalPrice" :disabled="true"></el-input>
</el-form-item>
```
2.在表单中为需要计算的字段添加监听事件,当数量字段值变化时触发计算。
```
<el-form-item label="数量" prop="num">
<el-input v-model="form.num" @change="calcTotalPrice"></el-input>
</el-form-item>
```
3.在计算函数中,获取数量字段的值并根据计算规则计算总价,然后将计算结果赋值给总价字段。
```
methods: {
calcTotalPrice() {
const num = this.form.num;
const totalPrice = num * 10;
this.form.totalPrice = totalPrice;
}
}
```
这样,当用户输入数量后,总价字段会根据计算规则自动更新。注意,需要在计算函数中将计算结果赋值给总价字段,才能在页面上显示更新后的总价值。
阅读全文