欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

element ui的form表单,一个input的值随着其他input框的值改变而改变(类似于vue的侦听属性)

程序员文章站 2022-03-13 12:41:35
...

实现的效果:计费体积随长、宽高的改变而改变
element ui的form表单,一个input的值随着其他input框的值改变而改变(类似于vue的侦听属性)

一、实现方法:给长、宽、高的input框添加@change,监听change事件,当input的值变化时,执行modifyCbm方法

①vue模板内容:

  1. <el-col :span="3" :offset="1">
  2. <el-form-item label="计费体积(cbm)">
  3. <el-input v-model.number="form.cbm" placeholder="计费体积" disabled="true"></el-input>
  4. </el-form-item>
  5. </el-col>
  6. <el-col :span="3" :offset="1">
  7. <el-form-item label="长(cm)" prop="length">
  8. <el-input v-model.number="form.length" placeholder="长" @change="modifyCbm"></el-input>
  9. </el-form-item>
  10. </el-col>
  11. <el-col :span="3" :offset="1">
  12. <el-form-item label="宽(cm)" prop="width">
  13. <el-input v-model.number="form.width" placeholder="宽" @change="modifyCbm"></el-input>
  14. </el-form-item>
  15. </el-col>
  16. <el-col :span="3" :offset="1">
  17. <el-form-item label="高(cm)" prop="height">
  18. <el-input v-model.number="form.height" placeholder="高" @change="modifyCbm"></el-input>
  19. </el-form-item>
  20. </el-col>

②modifyCbm方法:

  1. modifyCbm(){
  2. if(this.form.length!=''&&this.form.width!=''&&this.form.height!=''){
  3. this.form.cbm=this.form.length*this.form.width*this.form.height/1000000;
  4. }else{
  5. this.form.cbm=0;
  6. }
  7. }