element表單中一個el-form-item下多個form-item項校驗（循環校驗）

在vue+element的項目中，需要對form表單下的一個form item中校驗多項數據，如下圖：

 

 

 

代碼實現（需要注意prop的值）：

<div class="send-wrap">
        <div class="send-header">
            <p class="title">在線下單</p>
        </div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <div class="send-content">
                <div class="sign">
                    <svg class="zbIcon" aria-hidden="true">
                        <use xlink:href="#icon-jiaobiao"></use>
                    </svg>
                    <p>寄</p>
                </div>
                <div class="sendItem-form">
                    <div class="send-row">
                        <el-form-item  label="發貨人" prop="name">
                            <el-input v-model="ruleForm.name" placeholder="請輸入發貨人"></el-input>
                        </el-form-item>
                        <el-form-item prop="tel" label-width="0">
                            <el-input v-model="ruleForm.tel" placeholder="請輸入發貨人手機號/電話"></el-input>
                        </el-form-item>
                        <el-button type="warning">智能解析</el-button>
                    </div>
                    <div class="send-row">
                        <el-form-item  label="地址" prop="addr">
                            <el-input v-model="ruleForm.addr" placeholder="請輸入詳細地址、門牌號"></el-input>
                        </el-form-item>
                        <el-form-item prop="area" label-width="0">
                            <el-input v-model="ruleForm.area"  placeholder="請選擇省市區"></el-input>
                        </el-form-item>
                        <el-button type="warning">地址薄</el-button>
                    </div>
                </div>
            </div>
            <div class="send-content receive-content" v-for="(item,index) in ruleForm.receiveLists" :key="index">
                <div class="sign receive-sign">
                    <svg class="zbIcon" aria-hidden="true">
                        <use xlink:href="#icon-jiaobiao"></use>
                    </svg>
                    <p>收</p>
                </div>
                <el-button type="warning" style="float: right;" @click="addrDel(index)" v-if="ruleForm.receiveLists.length!=1">刪除</el-button>
                <div class="sendItem-form">
                    <div class="send-row">
                        <el-form-item  label="收貨人" :rules="rules.receiveName" :prop="`receiveLists.${index}.receiveName`">
                            <el-input v-model="item.receiveName" placeholder="請輸入收貨人"></el-input>
                        </el-form-item>
                        <el-form-item :rules="rules.receiveTel" :prop="`receiveLists.${index}.receiveTel`" label-width="0">
                            <el-input v-model="item.receiveTel" placeholder="請輸入收貨人手機號/電話"></el-input>
                        </el-form-item>
                        <el-button type="warning">智能解析</el-button>
                    </div>
                    <div class="send-row">
                        <el-form-item  label="地址" :rules="rules.receiveAddr" :prop="`receiveLists.${index}.receiveAddr`">
                            <el-input v-model="item.receiveAddr" placeholder="請輸入詳細地址、門牌號"></el-input>
                        </el-form-item>
                        <el-form-item :rules="rules.receiveArea" :prop="`receiveLists.${index}.receiveArea`" label-width="0">
                            <el-input v-model="item.receiveArea"  placeholder="請選擇省市區"></el-input>
                        </el-form-item>
                        <el-button type="warning">地址薄</el-button>
                    </div>
                </div>
            </div>
            <div class="receive-add" @click="receiveAdd">
                <el-button type="warning">添加收件人</el-button>
            </div>
            <el-form-item>
              <el-button type="primary" @click="submitForm('ruleForm')">立即創建</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
    </div>

邏輯部分：

var vm = new Vue({
        el: "#app",
        data: {
            ruleForm: {
                name: '',
                tel:"",
                addr:"",
                area:"",
                receiveLists:[],
            },
            receiveObj:{
                receiveName: '',
                receiveTel:"",
                receiveAddr:"",
                receiveArea:"",
            },            
            rules: {
                name: [
                    { required: true, message: '請輸入姓名', trigger: 'blur' },
                ],
                tel: [
                    { required: true, message: '請輸入電話', trigger: 'blur' }
                ],
                addr: [
                    { required: true, message: '請輸入地址', trigger: 'blur' },
                ],
                area: [
                    { required: true, message: '請輸入省市區', trigger: 'blur' },
                ],
                receiveName: [
                    { required: true, message: '請輸入收貨人', trigger: 'blur' },
                ],
                receiveTel: [
                    { required: true, message: '請輸入收貨人電話', trigger: 'blur' }
                ],
                receiveAddr: [
                    { required: true, message: '請輸入詳細地址', trigger: 'blur' },
                ],
                receiveArea: [
                    { required: true, message: '請輸入省市區', trigger: 'blur' }
                ],
            }
        },
        mounted() {
            this.init();
        },
        methods: {
            init(){
                this.ruleForm.receiveLists.push(Object.assign({},this.receiveObj));
            },
            //添加收件地址
            receiveAdd(){   
                if(this.ruleForm.receiveLists.length<20){
                    this.ruleForm.receiveLists.push(Object.assign({},this.receiveObj));
                }
            },
            //刪除收件地址
            addrDel(index){
                this.ruleForm.receiveLists.splice(index,1);
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                if (valid) {
                    alert('submit!');
                } else {
                    console.log('error submit!!');
                    return false;
                }
                });
            },
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    })