elementui el-input，v-for循环、校验、消除校验_el-input v-for

第一步；页面 el-input循环

<template>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <div v-for="(item,index) in ruleForm.mailSet" :key="index">    
         <el-form-item >
             <el-input  v-model.trim="ruleForm.mailSet[index]" ></el-input>
             <img src="add" @click="addItem"> 
             <img src="del" @click="deleteItem">
          </el-form-item> 
    </div>
  </el-form>
<template>
<script>
   export default{
     data(){
       return {
          ruleForm:{
             mailSet:[],
          }
        }
     },
   }
</script>

第二步：添加按钮(增加input框 or 减少input框)

<template>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <div v-for="(item,index) in ruleForm.mailSet" :key="index">    
         <el-form-item >
             <el-input  v-model.trim="ruleForm.mailSet[index]" ></el-input>
             <img src="add" @click="addItem"> 
             <img src="del" @click="deleteItem">
          </el-form-item> 
    </div>
  </el-form>
<template>
<script>
   export default{
     data(){
       return {
          ruleForm:{
             mailSet:[],
          }
        }
     },
     methods:{
       //添加一个input框
       addItem(){
        this.ruleForm.mailSet.splice(index+1,0,"")
       },
       //删除一个input框
       deleteItem(){
        this.ruleForm.mailSet.splice(index,1)
       },
     },
   }
</script>

第三步：对input 框进行校验（注意：自定义校验 callback 必须被调用。）

 
<template>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <div v-for="(item,index) in ruleForm.mailSet" :key="index">    
         <el-form-item :prop="'mailSet.'+index"  :rules="rules.mailSetRules">
             <el-input  v-model.trim="ruleForm.mailSet[index]" ></el-input>
             <img src="add" @click="addItem"> 
             <img src="del" @click="deleteItem">
          </el-form-item> 
    </div>
  </el-form>
<template>
<script>
   export default{
     data(){
       return {
          ruleForm:{
             mailSet:[],
          },
          rules:{
             mailSetRules:[{  message: '请填写电子邮箱', trigger: 'blur'},
             {  trigger: ["blur", "change"],
              validator:(rule, value, callback) => {
              let set1=new Set(this.ruleForm.mailSet);
              var reg=/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
              if(!reg.test(value) && this.ruleForm.isMail==2){
                this.mailSetRule=false;
                return callback("邮箱格式不正确");
              }
              if(this.ruleForm.mailSet.length!=set1.size){
                this.mailSetRule=false;
                return callback("邮箱不可重复");
              }
               callback();
            }
           }
          ],
          },
        }
     },
   }
</script>

第四步：如果多个页面共用一张表的话，消除校验回显（添加一个v-if判断条件，必须加上key值）

<template>
 <el-form :model="ruleForm" :rules="rules" ref="ruleForm">
    <div v-for="(item,index) in ruleForm.mailSet" :key="index">    
         <el-form-item :prop="'mailSet.'+index"  :rules="rules.mailSetRules" v-if="" >
             <el-input  v-model.trim="ruleForm.mailSet[index]" ></el-input>
             <img src="add" @click="addItem"> 
             <img src="del" @click="deleteItem">
          </el-form-item> 
 
 
         <el-form-item :prop="'mailSet.'+index"  :rules="rules.mailSetRules" v-else="" 
          key="1">
             <el-input  v-model.trim="ruleForm.mailSet[index]" ></el-input>
             <img src="add" @click="addItem"> 
             <img src="del" @click="deleteItem">
          </el-form-item> 
    </div>
  </el-form>
<template>

效果图