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

主要实现功能：

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

部分代码如下：

 <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 定义的对象如下：

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

定义校验属性 :prop="'receivingInforList.'+ index +'.receiver'"

新增时直接操作 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
                })
        },