vue实现动态添加form表单

上篇博客介绍了如何动态实现table的新增表格，其实对于表格和表单的动态添加在日常场景中用到的还蛮多的，两者的实现都有着诸多相似之处，本篇博客小编带领大家揭开实现动态增加form表单的神秘面纱。

图示最终效果：
当点击新增购房人基本信息时，动态新增表单，并且可以根据索引通过点击删除来删除当前表单。
和动态新增table表格一样，新增数据要以对象的形式push到数组里面去，删除还是依赖与splice函数。

具体代码实现：

<el-form ref="basicInformation" :model="basicInformation" label-width="100px">
			<div style="border-left: 4px solid #39a9ff;padding-left: 8px;line-height: initial;font-size: initial;">
				<h4>购房人基本信息</h4>
			</div>
			<el-row :gutter="20" v-for="(item,index) in basicInformation.purPeoList" :key="index">
				<el-row :gutter="20">
					<el-col :span="7">
						<el-form-item label="姓名" :prop="'purPeoList.'+index+'.xm'">
							<el-input v-model="item.xm"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="家庭关系" :prop="'purPeoList.'+index+'.jtcygxdm'">
							<el-input v-model="item.jtcygxdm"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="户口类型" :prop="'purPeoList.'+index+'.hklxdm'">
							<el-input v-model="item.hklxdm"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="7">
						<el-form-item label="证件类型" :prop="'purPeoList.'+index+'.zjlxdm'">
							<el-input v-model="item.zjlxdm"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="证件号码" :prop="'purPeoList.'+index+'.zjhm'">
							<el-input v-model="item.zjhm"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="是否购房人" :prop="'purPeoList.'+index+'.sfgfrdm'">
							<el-input v-model="item.sfgfrdm"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="7">
						<el-form-item label="户籍登记日期" :prop="'purPeoList.'+index+'.hjdjrq'">
							<el-input v-model="item.hjdjrq"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="外市迁入" :prop="'purPeoList.'+index+'.wsqrdm'">
							<el-input v-model="item.wsqrdm"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="7">
						<el-form-item label="联系电话" :prop="'purPeoList.'+index+'.lxdh'">
							<el-input v-model="item.lxdh"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="7">
						<el-form-item label="联系地址" :prop="'purPeoList.'+index+'.lxdz'">
							<el-input v-model="item.lxdz"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-form-item>
					<el-button type="danger" v-if="basicInformation.purPeoList.length >1" size="small" plain
						@click="removeRow(index)">
						删除</el-button>
				</el-form-item>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="6" :push="18">
					<el-form-item>
						<el-button size="small" @click="addBuyerInformation">新增购房人基本信息</el-button>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="20" style="margin-top:50px;">
				<el-col :span="6" :push="18">
					<el-form-item label-width="0">
						<!-- <el-button type="success" @click="lastStepHandler" style="width:100px;">上一步</el-button> -->
						<el-button type="success" @click="submitHandler" style="width:100px;">保存</el-button>
						<el-button type="success" style="width:100px;" @click="submitHandlerAndNextStep">下一步</el-button>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>

data中如下定义：

//购房人基本信息属性
		basicInformation: {
     
			purPeoList: [
				{
     
					xm: "",
					jtcygxdm: "",
					hklxdm: "",
					zjlxdm: "",
					zjhm: "",
					sfgfrdm: "",
					hjdjrq: "",
					wsqrdm: "",
					lxdh: "",
					lxdz: "",
				},
			],
		},

methods中的方法：

//新增购房人基本信息
addBuyerInformation() {
	const that = this;
	that.basicInformation.purPeoList.push({});
},
//删除购房人基本信息
removeRow(index) {
	if (index >= 0) {
		this.basicInformation.purPeoList.splice(index, 1);
	}
},

总结：表单实现动态添加主要依赖v-for，仔细观察发现生活小妙招，哎，细不细看你们的了。