有时候后端传来的表单数据属性名和属性值是分开的,如{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>
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))
}
}
});
},