vue 增加删除和修改操作

最新推荐文章于 2024-08-08 22:30:15 发布

WangDaLi_

最新推荐文章于 2024-08-08 22:30:15 发布

阅读量7.9k

点赞数 3

分类专栏： vue 知识点

本文链接：https://blog.csdn.net/WangDaLi_/article/details/93231671

版权

vue 知识点专栏收录该内容

5 篇文章 0 订阅

订阅专栏

代码如下：

<!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"