ant-design-vue form表单实现动态增减表单项_vue antd input 动态增减

在项目中遇到了需要对表单的最后两项进行动态增减 ，我这里实现以后做个记录。

<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-input v-model="item.work"></a-input>
 	  </a-form-model-item>
 	  
 	  <a-form-model-item
 	    label="等级" 
	    :prop=" 'InfoList.' + index + '.level' "
	    //在这里单独为表单项绑定一个校验规则
	    ：rules="rules.level"
	    >
	    //input需要绑定到InfoList中的元素
		 <a-input v-model="item.level"></a-input>
 	  </a-form-model-item>
 	  //如果你要保留最开始的表单行  可在删除icon上添加v-if="index !== 0" index为0时不显示删除icon
 	  <a-form-model-item  v-if="index !== 0">
		<a-icon type="minus-circle" @click="removeRow(item)"/>
 	  </a-form-model-item>
 	  
 	  <a-button @click="addRow">增加</a-button>
	</div>
</a-form-model>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

data() {
	return {
		form: {
			name: '',
			age: '',
			//如果刚开始不需要增减的表单项，数组置为空 ，后边向数组push对象 
			InfoList:[
			 {
				work: '',
				level: '',
			 }		
			]
		},
		//你的校验规则
		rules:{
			name: [{}],
			age: [{}],
			work: [{}],
			level: [{}],
		}
	}
}


methods: {
	//增加表单行  为添加按钮绑定一个 添加事件  向数组里push 对象
	addRow() {
		this.form.InfoList.push({
			work: '',
			level: '',
		})
	}，
	removeRow() {
		let index = this.form.InfoList.indexOf(item);
		if(index !== -1) {
			this.form.InfoList.splice(index, 1);
		}
	}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39