首页 > 其他 > 详细

vue项目中的iview如何验证for循环的输入框及日期选择框

时间:2019-12-27 15:22:07      阅读:219      评论:0      收藏:0      [点我收藏+]

 

 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

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!