VUE—el-form包含循环遍利的数据校验
el-form包含循环遍利的数据校验
我们都知道在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>
-----------------------------------------------------我是分割线-------------------------------------------------------------
我是搜了很多尝试很多次才实现的,大家有更好的方法可以在评论区告诉我哦。
更多推荐
所有评论(0)