for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效
·
最近在写后台管理系统,遇到一个循环遍历的form表单组件
,发现rules
规则校验失效了。
明明输入了内容,但是点击表单提交时,依然提示表单校验不通过。
代码如下:
<a-form-model ref="ruleForm" :model="form" layout="vertical">
<div v-for="(item, index) in params" :key="index">
<a-form-model-item
:label="item.displayText"
:prop="item.type"
:rules="{
required: true,
message: '请输入内容',
trigger: 'blur',
}"
>
<a-input-number
v-model.trim="item.totalAmount"
:min="0"
style="width: 100%"
:precision="6"
allowClear
/>
</a-form-model-item>
<div class="perCls" :key="index">
<p>每套费用(元)<span>总费用/产品交付数量</span></p>
<p>{{ priceBlur(num ? item.totalAmount / num : 0) }}</p>
</div>
</div>
</a-form-model>
params
的数据:
[ { "type": "totalAmount", "displayText": "总费用", "quoteSubOrderId": "1431", "singleAmount": null, "totalAmount": null } ]
解决办法——一定要按照下面的方式来写
百度后大神提供的解决办法:VUE—el-form包含循环遍利的数据校验:https://blog.csdn.net/weixin_43691818/article/details/121923444
注意事项
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里的。自己写的时候对应一下哦。
5.循环遍历的数据来源必须是form中的,也就是说必须是form.orders才可以。此处的orders变量名可以更改,但是要跟prop保持统一。
正确的写法
完成!!!
更多推荐
已为社区贡献1条内容
所有评论(0)