ElementUI之動態增減表單項，循環表單驗證（單層循環與雙重循環）

Element的表單驗證要注意的就是v-model和prop的值要對應上，不然無法觸發驗證

1.單層循環表單

html代碼如下：

 <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <template v-for="(item, index) in formData.oneCycle">
                <el-form-item label="姓名" :prop="'oneCycle.' + index + '.name'" :rules="{required: true, message: '請輸入姓名',trigger: 'blur'}">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
            </template>
 </el-form>

js代碼如下：

 formData: {
               oneCycle: [{
                             name: ''
                           },{
                             name: ''
               }]
            },
 rules: {}

rules可以寫在數據里面也可以寫在單行內，具體按需求定

2.雙層或多層循環表單

html代碼如下：

 <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <template v-for="(item, index) in formData.oneCycle">
                <el-form-item label="姓名" :prop="'oneCycle.' + index + 'name'" :rules="{required: true, message: '請輸入姓名',trigger: 'blur'}">
                    <el-input v-model="item.name"></el-input>
                </el-form-item>
                <template v-for="(itemSon, indexSon) in item.towCycle">
                    <el-form-item label="性別" :prop="'oneCycle.' + index + '.towCycle.' + indexSon + 'sex'" :rules="{required: true, message: '請輸入性別',trigger: 'blur'}">
                        <el-input v-model="item.sex"></el-input>
                    </el-form-item>
                </template>
            </template>
 </el-form>

js代碼如下：

 formData: {
                        oneCycle: [{
                            name: '',
                            towCycle: [{
                                sex: ''
                            }, {
                                sex: ''
                            }]
                        }, {
                            name: '',
                            towCycle: [{
                                sex: ''
                            }, {
                                sex: ''
                            }]
                        }]
            },

多重循環的原理也是一樣，只要值對應上就行，具體對應的值可以看下面的圖

坑：1.表單內循環的對象數組沒有放在form表單綁定的對象里面，如下圖

如果不按這樣寫會提示    please transfer a valid prop path to form item!

 2.prop填寫錯誤，比如上圖的"."未加，其實主要需要注意的就是prop