我们都知道在element-ui的form表单文档里数据校验都是普通的form里嵌套form-item的写法,而我遇到的是有循环遍历的,像图中一样,整个区域是循环遍历来实现添加删除功能的,按照官网文档来写是无法实现预期效果的,总是必填项填了之后依然显示提示信息,仿佛是这边数据变化没有检测到一样。来回修改搜索琢磨了很久,最终也是实现了,贴上代码一起看看吧。

 总结几个重要的点:

1、rules为data中rules里对应属性名,如 :rules = "rules.rewardLevel"  (代码是这个,自行更改)

2、循环遍历中需要设置必填项的el-form-item都要写上rules、prop

3、prop应该写成——  :prop="'orders.'+index+'.rewardLevel'"   以 + 号作为分割来解释吧,第一个orders是遍历数据对应的数组名(我这里是orders,根据自己的进行更改),index为遍历的key值变量;rewardLevel为form中的orders里的属性名(即该输入框对应的属性名);

4、另外注意el-form中要写上 :model (我这里是form,根据自己的进行更改),绑定的是form,orders是form里的。自己写的时候对应一下哦。

data里的form和rules照常写就行,注意以上几点写对了就可以。

          <el-form label-width="100px" ref="orderAward" :model="form">
                <el-form-item label="订单奖励" size="small"></el-form-item>
                <span v-for="(item,index) in form.orders" v-bind:key="index">
                    <el-form-item 
                        label="序号:" 
                        :rules="rules.rewardLevel" 
                        :prop="'orders.'+index+'.rewardLevel'" 
                        label-width="80px">
                        <el-input 
                            type="number" 
                            size="small" 
                            v-model="item.rewardLevel" 
                            style="width:90px" 
                            placeholder="请输入序号" 
                            :disabled="isDisabled">
                        </el-input>
                    </el-form-item>
               </span>
           </el-form>

-----------------------------------------------------我是分割线-------------------------------------------------------------

 我是搜了很多尝试很多次才实现的,大家有更好的方法可以在评论区告诉我哦。

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐