el-form嵌套多重循环的表单验证

2 篇文章 0 订阅
2 篇文章 0 订阅
 <el-form :model="saveParams"  :rules="rules" ref="ruleFormRef">
          <el-form-item label="任务时间" label-width="100px" prop="endTime">
              <el-date-picker
              :disabled="isDisabled"
              :picker-options="taskStartoption"
              format="yyyy-MM-dd HH:mm" 
              value-format="yyyy-MM-dd HH:mm" 
              v-model="saveParams.beginTime" 
              type="datetime" placeholder="选择日期">
              </el-date-picker> -
              <el-date-picker :disabled="isDisabled"
              :picker-options="taskEndoption"
              @focus="changeTaskEndTime"
              style="width:220px;" 
              format="yyyy-MM-dd HH:mm" 
              value-format="yyyy-MM-dd HH:mm" 
              v-model="saveParams.endTime" type="datetime" placeholder="选择日期">
              </el-date-picker>
          </el-form-item>
          <div v-for="(item,index) in saveParams.routeList" :key="index">
	          <el-form-item
               :prop="'routeList.'+index+'.beginTime'" 
               :rules="[{ required: true,validator:beginTimeRouterRole, trigger: 'blur'}]"
              >
	                <el-date-picker
	                  :disabled="isDisabled"
	                  @focus="changeRouteStartTime"
	                  @change="routerIndex = index"
	                  :picker-options="routeStartoption"
	                  v-model="item.beginTime"
	                  type="datetime"
	                  format="yyyy-MM-dd HH:mm" 
	                  value-format="yyyy-MM-dd HH:mm"
	                  placeholder="选择日期时间">
	                </el-date-picker>
	           </el-form-item> - 
	           <el-form-item 
	            :prop="'routeList.'+index+'.endTime'"  
	            :rules="[{ required: true,validator:endTimeRouterRole, trigger: 'blur'}]"
	            >
	                  <el-date-picker 
	                  :disabled="isDisabled"
	                  :picker-options="routeEndoption"
	                  @change="routerIndex = index"
	                  @focus="changeRouteEndTimeBlur($event,index)"
	                  format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" 
	                  v-model="item.endTime" type="datetime" placeholder="选择日期时间">
	                  </el-date-picker> 
	            </el-form-item>
          
	            <div  v-for="(v,i) in item.execList" :key="i" >
	                <el-form-item
	                :prop="`routeList[${index}].execList[${i}].needMan`"
	                :rules="[{ required: true,validator:needManRouterRole, trigger: 'blur'}]">
	                      <el-input v-model="v.needMan" type="number" ></el-input>
	                </el-form-item>
                </div>
            </div>
      </el-form>
data(){
	return {
		rules: {
	        beginTime: [{ required: true, message: "请选择任务开始时间", trigger: "blur" },],
	        needMan: [{ required: true, validator: orgIdRole,trigger: "blur" },],
	        endTime: [{ required: true, validator: endTimeRole, trigger: "blur" },],
	     },
	}
},
 computed:{
    beginTimeRouterRole(){
      var _this=this;
      return function(rule, value, callback){
        if(!value){
          callback(new Error('xxxxxx'));
        }else{
          if (value<_this.saveParams.beginTime) {
            callback(new Error('xxxxxxxxx'));
          } else {
            callback();
          }
        }
      }
    },
    endTimeRouterRole(){
      var _this=this;
      return function(rule, value, callback) {
        console.log(value);
        if(!value){
           return callback(new Error("xxxxxxx"));
        }else{
            if (value!="" && _this.routeList[_this.routerIndex].beginTime>=value) {
              return callback(new Error("xxxxxxx"));
            } else {
              callback();
            }
        }
       
      }
    },
    needManRouterRole(){
      var _this=this;
      return function(rule, value, callback) {
        if (!(Number(value))>0) {
          return callback(new Error("请填写执勤人数"));
        } else {
          callback();
        }
      }
    },
  },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值