elementui表单校验遇到的问题

1、项目有时候表单的校验规则复杂，需要自定义

关键代码如下

// html代码部分
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
  <el-form-item label="评估净值">
    <el-input v-model="form.asPgjz" prop="asPgjz"></el-input>
  </el-form-item>
</el-form>

// js代码部分
data() {
	return {
		form: {
			asPgjz: ''
		},
		rules: {
			asPgjz:[
			    { required: true, trigger: 'blur',message: '请输入评估净值'},
			    {validator: (rule,value,callback) =>{
			    	// 根据需求，写代码逻辑
		            let m = api.amountInspectionM(value)
			            if(m.b){
			                this.formAddItemModel.asPgjz = api.twoZero(value)
			                this.asPgjzFlag = true
			            }else{
			                this.asPgjzFlag = false
			            }
			            return m.b
			        } ,trigger: 'blur',message: '只能输入数字和两位小数'}
			        // validator的值也可以摘出去作为一个方法，如下
			        // { validator: this.numericalRate, trigger: 'blur' }
			]
		}
	}
},
methods: {
	numericalRate (rule, value, callback) {
      if (Number(value) >= 100) {
        callback(new Error('数值不能大于100%'))
      }else {// else必须写，否则校验规则通过后的代码不会执行
		callback()
	  }
    }
}

2、prop值为动态时，有时候会出现校验不生效的问题

此时在给prop赋值时注意，默认赋值不能为空，可以如下设置

<el-form-item :prop="deviceType === 3?'deviceName': 'empty'"></el-form-item>
// 用empty或其他任意字符串代替即可

3、在通过v-if来控制el-form-item是否显示的时候，或者控制具体显示哪一种情况的时候，一定要给el-form-item写上key属性，否则也会导致校验失效