ant-design-vue form表单实现动态循环效验

最新推荐文章于 2024-09-13 15:18:53 发布

何故沾衣欲湿杏花雨

最新推荐文章于 2024-09-13 15:18:53 发布

阅读量2.6k

点赞数 2

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/DJxyyy/article/details/127447815

版权

本文介绍了如何在Ant Design Vue中进行动态表单循环验证，包括单层和多层循环的实现方法。

摘要由CSDN通过智能技术生成

单层循环的话

<a-form-model
   ref="ruleForm"
   :model="form"
   :rules="rules"
>
    //不需要增减的表单项  
    //设置display:flex属性 可让表单显示在一行
    
	<div style="display:flex">
	// prop 表单域的model字段
	  <a-form-model-item  label="姓名"  prop="name"  ref="name">
		<a-input v-model="form.name"></a-input>
 	  </a-form-model-item>
 	   <a-form-model-item label="年龄"  prop="age"  ref="age">
		<a-input v-model="form.age"></a-input>
 	  </a-form-model-item>
	</div>	
	
	//这里你可以写多组表单项
	...
	
	//需要动态增减的表单行
	//InfoList就是我们每次添加表单时要push对象的数组
	
	<div v-for="(item,index) in form.InfoList" :key="item.index"        style="display:flex">
	  <a-form-model-item 
	   label="工作" 
	   :prop=" 'InfoList.' + index + '.work' "
	   //在这里单独为表单项绑定校验规则
	   ：rules="rules.work"
	  >
	 	 <a