Blogger Information
Blog 28
fans 0
comment 0
visits 65149
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
element ui的form表单,一个input的值随着其他input框的值改变而改变(类似于vue的侦听属性)
蒸蒸
Original
2659 people have browsed it

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

一、实现方法:给长、宽、高的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. }
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post