需求:整个表单是一个单页面,页面上要加入el-steps步骤条,当前步骤填写完成后,点击下一步则进行当前步骤的验证,验证成功才能进入下一个步骤的填写,因为整个el-form是在el-steps外部,只能使用el的部分验证validateField
思路,在下一步按钮方法上,添加当前步骤需要验证的字段名参数arr,通过循环校验当前字段,判断是否进入下一步
arr内容如下:
data() {
return {
arr:['field133','field134'],
}
}
valid方法如下:
methods: {
valid(arr){
//定义flag
let ok=1
for(let i in arr){
this.$refs.elForm.validateField(arr[i],err=>{
if(err) ok=0 }) //校验当前字段,如果没有通过验证,则ok=0
if(ok===0)break //如果ok为0,则说明有字段没有通过验证,终止循环
}
if(ok===1){
this.active131++} //循环结束,如果当前步骤的字段都通过验证,则进入下一步
}
}
页面代码:
<el-form ref="elForm" :model="formData" :rules="rules" size="medium" :disabled="formDisable"
label-width="100px">
<el-steps :active="active131" finish-status=