使用El-table/El-form(同理)编辑数据并动态增加编辑框进行提交

El-table部分

El-table实现编辑数据并动态增加列，大概样式图如下：

操作栏为按钮；当然增加也可以改成 + 1 给个CSS看起来应该也不错（图片用Axure画的）

HTML部分

// el-table这里的增加部分为临时手写 删除是临时加的 上面的图片暂时没加
<el-table
	border
	:data='data'
	height='200'>
	<el-table-column label="No" align="center" type="index" />
	<el-table-column label="参数1" prop="para1" width="250" align="center">
		<template slot-scope="scope">
			<el-input v-model="scope.row.para1" placeholder="请输入参数1"></el-input>
		</template>
	</el-table-column>
	<el-table-column label="参数2" prop="para2" width="250" align="center">
		<template slot-scope="scope">
			<el-input v-model="scope.row.para2" placeholder="请输入参数2"></el-input>
		</template>
	</el-table-column>
	<el-table-column label="操作"  width="250" align="center">
		<template slot-scope="scope">
			<el-button @click="addBtn(socpe.$index)" >增加</el-input>
		</template>
		<template slot-scope="scope">
			<el-button @click="deleteBtn(socpe.$index)" >删除</el-input>
		</template>
	</el-table-column>
</el-table>

简单的做一下说明：
   这里的通过为操作栏中的按钮绑定点击事件，然后在JS事件内部动态的改变表格对象中的数据的大小，以此来实现行数据的增删效果；
   

JS部分(JS部分是通用的)

// 这里的index可以在删除的时候用
addBtn(index) {
	this.data.push({
		{
			para1: '',
			para2: ''
		}
	});
}

//再加一个删除方法吧，html里面没加这个删除按钮，传参一样的都是传当前行数据的索引
deleteBtn(index) {
	this.data.splice(index, 1);
}

这里列举的实例仅为El-table的实例，el-form道理是一样的代码几乎都是重复的 所以这里就不再列举了，谢谢！