实现的效果:计费体积随长、宽高的改变而改变
一、实现方法:给长、宽、高的input框添加@change,监听change事件,当input的值变化时,执行modifyCbm方法
①vue模板内容:
<el-col :span="3" :offset="1"><el-form-item label="计费体积(cbm)"><el-input v-model.number="form.cbm" placeholder="计费体积" disabled="true"></el-input></el-form-item></el-col><el-col :span="3" :offset="1"><el-form-item label="长(cm)" prop="length"><el-input v-model.number="form.length" placeholder="长" @change="modifyCbm"></el-input></el-form-item></el-col><el-col :span="3" :offset="1"><el-form-item label="宽(cm)" prop="width"><el-input v-model.number="form.width" placeholder="宽" @change="modifyCbm"></el-input></el-form-item></el-col><el-col :span="3" :offset="1"><el-form-item label="高(cm)" prop="height"><el-input v-model.number="form.height" placeholder="高" @change="modifyCbm"></el-input></el-form-item></el-col>
②modifyCbm方法:
modifyCbm(){if(this.form.length!=''&&this.form.width!=''&&this.form.height!=''){this.form.cbm=this.form.length*this.form.width*this.form.height/1000000;}else{this.form.cbm=0;}}
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号