element --- v-for循环表单动态校验

主要实现功能：

 

 点击新增时，会多出一条收货人和联系电话的输入框并且都是必填校验。

部分代码如下：

1.  <div v-for="(item,index) in ruleData.receivingInforList" :key="index">
                           <el-form-item label="收货人：" 
                               :prop="'receivingInforList.'+ index +'.receiver'" 
                               :rules="[{ required: true, message: '收货人不能为空', trigger: ['blur','change'] }]"
                               class="receInform">
                               <el-input class="el-input-sch"  v-model="item.receiver" placeholder="请输入收货人"></el-input>
                           </el-form-item>
                           <el-form-item label="联系电话：" 
                               :prop="'receivingInforList.'+ index +'.contactNumber'" 
                               class="receInform"
                               :rules="[{ required: true, message: '联系电话不能为空', trigger: ['blur','change'] }]">
                               <el-input class="el-input-sch"  v-model="item.contactNumber" type="tel" placeholder="请输入联系电话"></el-input>
                           </el-form-item>
                           <el-button type="danger" v-if="item.isDelete&&index!== 0" class="el-btn" @click="handleDeleteClick(item)" >删除</el-button>
                           <el-button type="primary" v-else class="el-btn" @click="handleAddClick()" >新增</el-button>
                       </div>

   data 定义的对象如下：

2.  ruleData:{
                   departmentId:'',
                   organizationRelationAddress:'',
                   receivingInforList:[
                       {
                           receiver:'',
                           contactNumber:'',
                           isDelete:false
                       }
                   ]
               },

    

3. 定义校验属性 :prop="'receivingInforList.'+ index +'.receiver'"
4. 新增时直接操作 this.ruleData.receivingInforList push一条新对象即可。点击删除则找到index Of 所在的索引，利用splice (索引值，1)删除即可。

          // 删除
           handleDeleteClick(val){
               if(this.ruleData.receivingInforList.indexOf(val) != -1){
                   this.ruleData.receivingInforList.splice(this.ruleData.receivingInforList.indexOf(val),1)
               }
           },
           // 新增
           handleAddClick(){
               this.ruleData.receivingInforList.push( {
                       receiver:'',
                       contactNumber:'',
                       isDelete:true
                   })
           },