vue項目中的iview如何驗證for循環的輸入框、日期選擇框，及表單回填驗證不通過問題

 v-for循環的輸入框驗證是否必填：

　　　　　　　　　　　　　　<tr v-if="item.enabled" v-for="(item,index) in formItem.targetList" :key="index">
                            <td> {{item.enName}} </td>
                            <td align="center">
                                <FormItem label="" 
                                    :prop="'targetList.' + index + '.checkMoney'"
                                    :rules="{required: true, trigger: 'blur'}">
                                    <Input class="ivu-input-unit transparent w-80p-i" v-model="item.checkMoney" placeholder="請輸入"></Input>
                                </FormItem>
                            </td>
                            <td align="center">
                                <FormItem label=""
                                    :prop="'targetList.' + index + '.quantityQuotaPercent'"
                                    :rules="{required: true, trigger: 'blur'}">
                                    <Input class="ivu-input-unit transparent w-80p-i" v-model="item.quantityQuotaPercent" placeholder="請輸入"></Input>
                                    <span class="d-i-b-b ml-12-r fsz-18-r">%</span>
                                </FormItem>
                            </td>
                            <td>
                                <a class="delete-btn-unit" @click="targetFun(item,index)">刪除</a>
                            </td>
                        </tr>　　

雙重v-for循環的日期：

1. rules如果設type: "date",就所有的日期都變為必填項，設置required:false也是必填。

2. 不設置type為date，綁定的參數planData需要轉換為字符串格式 ，也就是通過getDate(val,indexs,index)轉換，就可以根據required的值實現是否必填

代碼：

　　　　　　　　　　　　　　<tr v-for="(items,indexs) in formItem.STEP">
                            <template v-for="(item,index) in items">
                                <th class="bg-col-a-2-1"> {{item.itemName}} </th>
                                <td align="center">
                                    <FormItem label="" 
                                        :prop="'STEP.' + indexs + '.' + index + '.planData'"
                                        :rules="{required: item.required, trigger: 'change'}">
                                        <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="請選擇" 
                                            v-model="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker>
                                    </FormItem>
                                </td>
                            </template>
                        </tr>


　　　　　　　　/**
             * 獲取日期的值
             */
            getDate(val,indexs,index) {
                // console.log(val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate(),indexs,index);
                this.formItem.STEP[indexs][index].planData = val.getFullYear() + "-" + (val.getMonth()+1) + "-" + val.getDate();
            },

解決方法：

1. 將v-model改為:value的方式綁定數據。經驗證，發現:value可以回填默認值，但是不能正確的賦值，也就是選中了日期后，獲取不到日期

　　　　　　　　　　　　　　　　　　　　　　<FormItem label="" 
                                        :prop="'STEP.' + indexs + '.' + index + '.planData'"
                                        :rules="{required: !item.required, trigger: 'change'}">
                                        <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="請選擇" 
                                            :value="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker>
                                    </FormItem>

 2. 處理驗證條件  :rules="{required: !item.required, trigger: 'change',pattern: /.+/}"

添加藍色部分代碼即可完美通過驗證，並且解決回填不通過驗證的問題

　　　　　　　　　　　　　　　　　　　　　　<FormItem label="" 
                                        :prop="'STEP.' + indexs + '.' + index + '.planData'"
                                        :rules="{required: !item.required, trigger: 'change',pattern: /.+/}">
                                        <DatePicker class="ivu-date-unit w-210-r" type="date" format="yyyy-MM-dd" placeholder="請選擇" 
                                            v-model="item.planData" @on-change="getDate(item.planData,indexs,index)"></DatePicker>
                                    </FormItem>