实现的效果:计费体积随长、宽高的改变而改变
一、实现方法:给长、宽、高的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;
}
}