el-input-number组件无法触发change事件，实时校验失效的解决办法

el-input-number组件的坑

el-input-number 组件输入时，只有失去焦点才会触发change事件，导致输入时无法实时校验。

解决方案

使用input事件，实时监听输入框的输入值。上代码

<el-input-number
  ref="operationScore"
  v-model="form.operationScore"
  :precision="0"
  :min="1"
  :max="9999"
  style="width:100%"
  @input.native="operationScoreChange"
/>

这样虽然能实时获取输入值，但是获取到的值并不是最后一次输入的值。假如键入值152，此时v-mdel绑定的值却是15，也就是上一次的值。导致校验出现问题。
校验代码

data () {
    // 扣分校验
    const checkScore = (rule, value, callback) => {
      if (this.form.operationType == 0) {
        if (Number(value) > this.form.score) {
          return callback(new Error(this.$t('page.points.must.greater')))
        }
      }
      callback()
    }
    return {
      params: {},
      gridUrl: '',
      rules: {
        operationScore: [
          { required: true, message: this.$t('lang.pleaseInput'), trigger: ['blur'] },
          { validator: checkScore, trigger: ['blur'] }
        ]
      }
    }
  }

我的解决方案：input事件中获取最近的值，赋值给v-mdel绑定的值，再触发校验。

operationScoreChange () {
    this.form.operationScore = this.$refs.operationScore.displayValue
     this.$refs.form.validateField('operationScore')
   }