解决el-form表单prop和model绑定属性名不一致导致校验失败的问题_form表单 v-model= 与prop 中值不一样,校验

有时候后端传来的表单数据属性名和属性值是分开的，如{title:“仓库名称”,value:“一号仓库”}，但在表单校验规则中规定prop和model绑定的属性名必须一致，否则无法校验，面对这种问题我们可以自定义校验规则来解决：

<el-form :model="dataForm" ref="dataForm" label-width="120px"  :rules="rules">
	...
	 <el-form-item :label="item.title" :prop="item.title" >
         <el-input
             v-model="item.value"
             :placeholder="'请输入' + item.title"
           ></el-input>
      </el-form-item>
</el-form>
1
2
3
4
5
6
7
8
9

js:

//rules:{},
async init(productId, type) {//获取表单数据
	...
	data.data.list.forEach((item) => { 
          if(item.fillInType&&item.fillInType!=null&&item.fillInType==1){//判断是否开启校验
             let arr = []
             let rule = {}
            rule.trigger = 'blur'; 
            if( item.textType==1||
              item.textType==7){
              rule.type = 'String'
              rule.trigger = ['blur', 'change','clear']; 
            }else if(item.textType==3){
              rule.type = 'date'
              rule.trigger = ['blur', 'change']; 
            }else if(item.textType==18){
              rule.type = 'number'
              rule.trigger = 'change';
            }
            rule.required = true;
            rule.validator = this.checkRule//自定义校验规则函数
            rule.message = "请输入" + item.title
            arr.push(rule)
            this.rules[item.title] = arr 
          }
 });
},
checkRule(rule, value, callback){
       this.dataList.forEach((item) => {//遍历表单数据
        if(item.title == rule.field ){//判断当前表单属性名是否等于待校验属性名
          if (item.value!=null&&item.value!=""){ //校验逻辑
              callback()//校验通过
            }else{
              callback(new Error('请输入'+rule.field))
          }
        }
       });
    },          
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38