elementui步骤条实现部分验证,单个elform

需求:整个表单是一个单页面,页面上要加入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=
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值