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>