vue中form表单点击一次添加一行和删除一行

原创已于 2022-01-26 15:11:16 修改 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2022-01-24 17:02:22 首次发布

本文介绍了一个购房人基本信息表单的设计方案，包括姓名、家庭关系等字段，并提供了添加和删除购房人信息的功能。

具体链接

在这里插入图片描述

<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);
	}
},
//获取其中的值
submitHandler(){
    console.info("OK")

    this.$refs["basicInformation"].validate(valid => {
        console.info("OK1")
        console.info(this.basicInformation.purPeoList[0].hklxdm)
    });
}