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(); },
解决方法:将v-model改为: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>
vue项目中的iview如何验证for循环的输入框及日期选择框
原文:https://www.cnblogs.com/stella1024/p/12103431.html