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
                   })
           },