vue 增加删除和修改操作

代码如下：

	

		

			

				
				

					

						姓名：
					
				
				

					

						工作：
					
				
				

					

						工资：
					
				
				

					

						部门：
							{{se.dname}}
						
					
				
				

					

						
						
					
				
			
		
		 
		

			

				
序号
				
姓名
				
工作
				
工资
				
部门名称
				
部门地址
				
操作
			
			

				
{{adata.empno}}
				
{{adata.ename}}
				
{{adata.job}}
				
{{adata.sal}}
				
{{adata.dname}}
				
{{adata.loc}}
				

					
					
				
			
			 

				

					
					{{pageNum}}/{{pages}}
					
				
			
		
	

首先绑定Dom组件：


div的id为dali
vue里面绑定就是el="#dali"

1.列表
定义接收列表的集合：

预加载函数获取集合：

因为我用的pageInfo所以获取的时候在response.data后面加了.list意思就是获取pageInfo的list集合 然后存进list1里面

遍历集合：

把存进list1里面的数据遍历 v-for相当于foreach循环 adata定义的对象 list1是之前存进的集合
效果如下

2.添加

添加和修改共用模块：

定义类 之后方便调用

添加按钮：

vue里data定义empModel存取添加或修改的对象

点击按钮进入函数：

必须在方法里面：
在methods:{
toadd:function(){
vue.empModel={empno:0};
$(".mb").show();
}
}
vue.empModel={empno:0};
赋值主键是0

$(".mb").show();
模板显示

点击提交 触发v-on:click事件
进入函数：

判断之前的主键是否为0
为0的话路径就变成了添加，不为0就是之后的修改操作

3.修改点击触发函数


显示模板
把列表里传参的值赋值给对象，模板调用对象回显操作

效果如下

点击提交 还是进入之前提交的函数里

判断主键不为0 因为数据修改回显的时候主键有值
所以地址就定义为修改
调用修改的后台就行了

4.删除

点击按钮
调用删除函数传主键参数

调用后台传主键 后台根据主键的值进行删除操作