Element-ui中el-table中有form表单元素,实现点击动态添加行

1:在通过用Element—UI加Admin做后台管理系统的时候,有个需求就是在el-table中的表格中还需要加上form表单元素,比如input元素,且需要点击添加行信息需要实现动态添加行

效果案例图

Element-ui中el-table中有form表单元素,实现点击动态添加行_第1张图片
此处是列表项的源码



添加行信息
			
				
					
				
				
					
				
				
					
				
				
					
				

				
					
				
			
			

2:动态添加,也还是用到了原生JavaScript中的push()方法,通过将选择的列表项重需要渲染的字段名存放在添加的函数中,在push到列表

//点击加号添加一行数据
			AddListRow() {
				this.data01.Content.MDM017402.push({
					"MROCardCode":"",
					"MROCardName":"",					
					"DZCardCode":"",
					"DZCardName":"",
					"MROAmount":'',
					"DZAmount":''
				});
			},

3:点击删除当前行


		handleDelete(index) {
				this.data01.Content.MDM017402.splice(index, 1);
			},

你可能感兴趣的:(Vue.js,Element-ui,Element-ui动态添加行,el-table动态添加行)