for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累

最近在写后台管理系统,遇到一个循环遍历的form表单组件,发现rules规则校验失效了。
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累_第1张图片
明明输入了内容,但是点击表单提交时,依然提示表单校验不通过。

代码如下:

<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

for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累_第2张图片

注意事项

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保持统一。

正确的写法

for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累_第3张图片
for循环遍历的`form表单组件`rules规则校验失效问题——输入内容后依然提示必填,亲测有效——基础积累_第4张图片
完成!!!

你可能感兴趣的:(前端基础知识,antd,element-ui的使用,vue.js,前端,javascript)