Vue练习--table增删改

最新推荐文章于 2023-03-31 20:30:00 发布

AsaZyf

最新推荐文章于 2023-03-31 20:30:00 发布

阅读量365

点赞数

分类专栏： Vue 文章标签： Vue Vue增删改查增删改查 table增删改查

本文链接：https://blog.csdn.net/AsaZyf/article/details/83315177

版权

Vue 同时被 2 个专栏收录

50 篇文章 1 订阅

订阅专栏

Vue练习

6 篇文章 0 订阅

订阅专栏

带数据存储

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css" />
		<script type="text/javascript" src="js/vue.js" ></script>
	</head>
	<body>
	    <div id="wrap">
	    	<div class="container">
	    		<table class="table table-bordered table-hover">
	    			<tr>
	    				<td>学号</td>
	    				<td>姓名</td>
	    				<td>性别</td>
	    				<td>操作</td>
	    			</tr>
	    			<tr v-for="(item,index) in infoList">
	    				<td>{{item.id}}</td>
	    				<td>{{item.username}}</td>
	    				<td>{{item.sex}}</td>
	    				<td>
	    					<button class="btn btn-danger" @click="dele(index)">删除</button>
	    					<button class="btn btn-info" @click="alter(index)">修改</button>
	    				</td>
	    			</tr>
	    			<tr>
	    				<td colspan="4" class="text-center"><button class="btn btn-warning" type="button" @click="addshow">增加</button></td>
	    			</tr>
	    		</table>
	    		<hr />
	    		<form v-if="isShow">
	    			<h3>登记信息</h3>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入id" class="form-control" v-model="id"/>
	    			</div>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入姓名" class="form-control" v-model="username"/>
	    			</div>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入性别" class="form-control" v-model="sex"/>
	    			</div>
	    			<div class="form-group">
	    				<button class="btn btn-warning" type="button" @click="addInfo">增加</button>
	    			</div>
	    		</form>
	    		<form v-else>
	    			<h3>更改信息</h3>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入id" class="form-control" v-model="oldid"/>
	    			</div>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入姓名" class="form-control" v-model="oldname"/>
	    			</div>
	    			<div class="form-group">
	    				<input type="text" placeholder="请输入性别" class="form-control" v-model="oldsex"/>
	    			</div>
	    			<div class="form-group">
	    				<button class="btn btn-info" type="button" @click="updateInfo">更改</button>
	    			</div>
	    		</form>
	    	</div>
	    </div>
	    <script>
	    	var vm=new Vue({
	    		el:"#wrap",
	    		data:{
//	    			infoList:[
//	    			    {id:1,username:"王刚",sex:"男"},
//	    			    {id:2,username:"周游",sex:"男"},
//	    			    {id:3,username:"金铭",sex:"女"}
//	    			],
	    			infoList:JSON.parse(localStorage.getItem("newArr")) || [],
	    			id:"",
	    			username:"",
	    			sex:"",
	    			isShow:true,
	    			oldid:"",
	    			oldname:"",
	    			oldsex:"",
	    			selected:""
	    		},
	    		methods:{
	    			addInfo:function(){
	    				var obj={	    					
	    				    id:this.id,
	    				    username:this.username,
	    				    sex:this.sex
	    				}
	    				for (var i=0;i<this.infoList.length;i++) {
							if(this.infoList[i].id == obj.id){
								alert('有重复')
								return
							}
						}
	    				this.infoList.push(obj)
	    				localStorage.setItem("newArr",JSON.stringify(this.infoList))
	    				this.id=""
	    				this.username=""
	    				this.sex=""	    	
	    			},
	    			dele:function(index){
	    				this.infoList.splice(index,1)
	    				localStorage.setItem("newArr",JSON.stringify(this.infoList))
	    			},
	    		    alter:function(index){
	    		    	this.isShow=false
	    		    	this.oldid=this.infoList[index].id
	    		    	this.oldname=this.infoList[index].username
	    		    	this.oldsex=this.infoList[index].sex
	    		    	this.selected=this.infoList[index]
	    		    },
	    		    addshow:function(){
	    		    	this.isShow=true
	    		    },
	    		    updateInfo:function(){
//	    		    	console.log(this.selected)
                        this.selected.id=this.oldid
                        this.selected.username=this.oldname
                        this.selected.sex=this.oldsex
	    		    	this.oldid=""
	    		    	this.oldname=""
	    		    	this.oldsex=""
	    		    	localStorage.setItem("newArr",JSON.stringify(this.infoList))
	    		    }
	    		}
	    	})
	    </script>
	</body>
</html>