el-input 之校验输入框只能输入数字

html 

 <el-form-item label="所在圩区圩内控制水位(m)" prop="polderFieldWaterLevel">
          <el-input v-model.trim.number="ruleForm.polderFieldWaterLevel" @input="handleInput('polderFieldWaterLevel', $event)" placeholder="请输入所在圩区圩内控制水位(m)" clearable @clear="ruleForm.polderFieldWaterLevel = undefined" />
        </el-form-item>
        <el-form-item label="菜田面积(亩)" prop="area">
          <el-input v-model.trim.number="ruleForm.area" @input="handleInput('area', $event)" placeholder="请输入菜田面积(亩)" clearable @clear="ruleForm.area = undefined" />
        </el-form-item>
        <el-form-item label="地面高程(m)" prop="polderFieldHeight">
          <el-input v-model.trim.number="ruleForm.polderFieldHeight" @input="handleInput('polderFieldHeight', $event)" placeholder="请输入地面高程(m)" clearable @clear="ruleForm.polderFieldHeight = undefined" />
        </el-form-item>

js

 // 校验数字
    handleInput(str, value) {
      this.ruleForm[str] = value.replace(/[^\d]/g, "");
    },

关键点: 绑定@input事件, 第一个参数是为了传入表单绑定的值, 第二个参数既是输入的值