Vue中使用Ant框架在form表单中使用输入框或数字输入框且用v-decorator取当前值

Ant中在form表单中使用输入框或数字输入框且用v-decorator在@change中取当前值如果是单个取值，只需要使用change传过来的值即可，如果是v-model直接取即可，如：this.model.字段名即可取到值。使用到v-decorator是为...

Ant中在form表单中使用输入框或数字输入框且用v-decorator在@change中取当前值

如果是单个取值，只需要使用change传过来的值即可，如果是v-model直接取即可，如：this.model.字段名即可取到值。使用到v-decorator是为了更好的验证。

<a-form-item class="x-table-form-item">
  <a-input  v-decorator="['testVal']" @change="count"  placeholder="请输入" style="width: 100%"></a-input >
</a-form-item>
//方法
count(val) {
	console.log("val是一个对象，val.targe.value就是当前字段当前值")
}

v-decorator中change取值取到上一个值而不是当前值的解决方法，加延迟即可。

由于v-decorator不是和v-model一样实现即时的双向绑定，所以要小心form表单赋值在change方法之后，如果此时不是取change方法自带的参数值又是当前字段改变的值，那么就需要做延迟处理，才能够取到值。（在多个值进行计算，实时更新结果时，能够一个方法解决问题，而不需要每个字段一个单独change方法，完全可以共用一个方法。

count() {
 console.log("开始计算")
  setTimeout(()=>{
    let m1 = this.form.getFieldValue('result3');
    let m2 = this.form.getFieldValue('result4');
    let l1 = this.form.getFieldValue('result5');
    //console.log("m1:"+m1+"-m2:"+m2+"-l1:"+l1);
    if (this.isValuable(m1) && this.isValuable(m2) && this.isValuable(l1)) {
      this.form.setFieldsValue({
        "result6": Number(((Number(m2) - Number(m1))/Number(l1) * 1000)/10).toFixed(0) * 10
      })
    }
    let n1 = this.form.getFieldValue('result3_2');
    let n2 = this.form.getFieldValue('result4_2');
    let l2 = this.form.getFieldValue('result5_2');
    if (this.isValuable(n1) && this.isValuable(n2) && this.isValuable(l2)) {
      this.form.setFieldsValue({
        "result6_2": Number(((Number(n2) - Number(n1))/Number(l2) * 1000)/10).toFixed(0) * 10
      })
    }
    this.countGapRatio();
  },10)


},

注意:js中计算应注意0等于空字符串。但是0不全等于空字符串

0 ==""    为true
0 === ""  为false