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

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

一、实现方法：给长、宽、高的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;
      }
    }

更多相关文章

随机推荐