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

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

蒸蒸
蒸蒸原创
2021年12月02日 10:14:392658浏览

实现的效果:计费体积随长、宽高的改变而改变

一、实现方法:给长、宽、高的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. }
声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议