博主信息
博文 28
粉丝 0
评论 0
访问量 82523
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
element ui的form表单,一个input的值随着其他input框的值改变而改变(类似于vue的侦听属性)
蒸蒸
原创
3406人浏览过

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

一、实现方法:给长、宽、高的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举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学