vue 增加删除和修改操作

代码如下：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>Insert title here</title><script type="text/javascript" src="/axios.min.js"></script&gt...

WangDaLi_

7980人浏览 · 2019-06-21 21:25:48

WangDaLi_ · 2019-06-21 21:25:48 发布

代码如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="/axios.min.js">
</script>
<script type="text/javascript" src="/vue.min.js">
</script>
<script type="text/javascript" src="/jquery-3.2.1.js">
</script>
</head>
<body>
	<div id="dali">
		<div class="mb">
			<table>
				<input type="hidden" v-model="empModel.empno">
				<tr>
					<td>
						姓名：<input type="text" v-model="empModel.ename">
					</td>
				</tr>
				<tr>
					<td>
						工作：<input type="text" v-model="empModel.job">
					</td>
				</tr>
				<tr>
					<td>
						工资：<input type="text" v-model="empModel.sal">
					</td>
				</tr>
				<tr>
					<td>
						部门：<select v-model="empModel.dno">
							<option v-for="se in list2" :value="se.deptno">{{se.dname}}</option>
						</select>
					</td>
				</tr>
				<tr>
					<td>
						<input type="button" value="提交" v-on:click="tijiao()">
						<input type="button" value="取消" v-on:click="qu()">
					</td>
				</tr>
			</table>
		</div>
		<input type="button" value="添加" v-on:click="toadd()"> 
		<table border="1" cellspacing="0">
			<tr>
				<td>序号</td>
				<td>姓名</td>
				<td>工作</td>
				<td>工资</td>
				<td>部门名称</td>
				<td>部门地址</td>
				<td>操作</td>
			</tr>
			<tr v-for="adata in list1">
				<td>{{adata.empno}}</td>
				<td>{{adata.ename}}</td>
				<td>{{adata.job}}</td>
				<td>{{adata.sal}}</td>
				<td>{{adata.dname}}</td>
				<td>{{adata.loc}}</td>
				<td>
					<input type="button" value="修改" v-on:click="toupdate(adata)">
					<input type="button" value="删除" v-on:click="todel(adata.empno)">
				</td>
			</tr>
			 <tr style="text-align: center;">
				<td colspan="10">
					<input type="button" v-on:click="getlist(pageNum-1)" value="上一页">
					{{pageNum}}/{{pages}}
					<input type="button" v-on:click="getlist(pageNum+1)" value="下一页">
				</td>
			</tr>
		</table>
	</div>
</body>
<script type="text/javascript">
	var vue=new Vue({
		el:"#dali",
		data:{
			empModel:[],
			list2:[],//部门信息
			list1:[],//员工信息
			pageNum:1,
			pages:0,
		},
		mounted:function(){
			$(".mb").hide();
			axios.get("/selectemp").then(function(response){
				vue.list1=response.data.list;
				vue.pageNum=response.data.pageNum;
				vue.pages=response.data.pages;
			})
			axios.get("/selectdept").then(function(response){
				vue.list2=response.data;
			})
		},
		methods:{
			getlist:function(pageNum){
				axios.get("/selectemp?pageNum="+pageNum).then(function(response){
					vue.list1=response.data.list;
					vue.pageNum=response.data.pageNum;
					vue.pages=response.data.pages;
				})
			},
			toadd:function(){
				vue.empModel={empno:0};
				$(".mb").show();
			},
			qu:function(){
				$(".mb").hide();
			},
			tijiao:function(){
				console.log("444:"+vue.empModel.dno);
				var url="../addemp";
				if(vue.empModel.empno!=0){
					url="../updateemp";
				}
				$.get(url,vue.empModel,function(res){
					console.log("操作："+res);
					if(res=='1'){
						alert("操作成功！");
						location.href="../tolist";
					}else{
						alert("操作失败！");
					}
				})
			},
			toupdate:function(thedata){
				vue.empModel=thedata;
				$(".mb").show();
			},
			todel:function(empno){
				axios.post("/del?empno="+empno).then(function(res){
					console.log(res);
					if(res.data=='1'){
						alert("删除成功！");
						location.href="../tolist";
					}else{
						alert("删除失败！");
					}
				})
			}
		}
	})
</script>
</html>

首先绑定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.删除
在这里插入图片描述
点击按钮
调用删除函数传主键参数

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

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^