Vue实现数据的增删改分页
现在我们在做之前要明白一点:vue强大之处-----数据驱动和自动刷新现在我们要做一个这样的作业,包含添加数据,删除数据,编辑数据,对数据进行分页,此功能没有后台,全是前台做的:第一步:添加数据 增加用户时使用push和unshift方法都可以,前者是把数据添加到数组后边,后者是把数据添加到数组前面:下面为完整代码,然后再来一一解释<div class="conta...
现在我们在做之前要明白一点:vue强大之处-----数据驱动和自动刷新
现在我们要做一个这样的作业,包含添加数据,删除数据,编辑数据,对数据进行分页,此功能没有后台,全是前台做的:
第一步:添加数据
增加用户时使用push和unshift
方法都可以,前者是把数据添加到数组后边,后者是把数据添加到数组前面:
下面为完整代码,然后再来一一解释
<div class="container" id="box">
<div class="panel panel-primary">
<div class="panel-heading">请添加</div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="exampleInputEmail1">姓名:</label>
<input v-model="username" type="text" name="username " class="form-control" id="exampleInputEmail1" >
</div>
<div class="form-group">
<label for="exampleInputPassword1">学号:</label>
<input v-model="id" type="text" name="id" class="form-control" id="exampleInputPassword1">
</div>
<div class="col-lg-offset-5 col-md-7">
<button type="button" @click="add" class="btn btn-primary">添加</button>
<button type="button" class="btn btn-primary">重置</button>
</div>
</form>
</div>
<br/>
<table class="table table-bordered table-hover">
<caption class="h3 text-info">学生信息表</caption>
<tr class="text-danger">
<th class="text-center">序号</th>
<th class="text-center">名字</th>
<th class="text-center">学号</th>
<th class="text-center">操作</th>
</tr>
<tr class="text-center" v-for="item in subArr">
<td>{{ $index+pageNo*record+1 }}</td>
<td>{{ item.name }}</td>
<td>{{ item.id }}</td>
<td>
<button @click="now=$index+pageNo*record" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#layer">删除</button>
<button @click="edit($index+pageNo*record)" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#edit">编辑</button>
</td>
</tr>
<tr v-show="arr.length!=0">
<td colspan="4" class="text-center">
<button @click="delAll=true" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#layer">删除全部</button>
</td>
</tr>
<tr v-show="arr.length==0">
<td colspan="4" class="text-center text-muted">
<p>暂无数据....</p>
</td>
</tr>
</table>
<div class="text-center">
<nav aria-label="Page navigation">
<ul class="pagination">
<li v-for="i in pagearr" track-by="$index" :class="pageNo==(i-1)?'active':''">
<a href="#" @click="pageNo=i-1">{{ i }}</a>
</li>
</ul>
</nav>
</div>
</div>
<div role="dialog" class="modal fade bs-example-modal-sm" id="layer">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">{{ delAll?'确认全部删除么?':'确认删除么?'}} </h4>
</div>
<div class="modal-body text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm" @click="delAll=false">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="del()">确认</button>
</div>
</div>
</div>
</div>
<div role="dialog" class="modal fade bs-example-modal-sm" id="edit">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span>×</span>
</button>
<h4 class="modal-title">请编辑</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
姓名:<input v-model="selectedlist.name" type="text" name="username " class="form-control" id="username" >
学号:<input v-model="selectedlist.id" type="text" name="id" class="form-control" id="id">
</div>
</form>
</div>
<div class="modal-footer text-right">
<button data-dismiss="modal" class="btn btn-primary btn-sm" @click="selectedlist=[]">取消</button>
<button data-dismiss="modal" class="btn btn-danger btn-sm" @click="edit_true()">编辑</button>
</div>
</div>
</div>
</div>
</div>
<script>
window.onload=function () {
new Vue({
el:"#box",
data:{
username:"",
id:"",
arr:[],
now:-1,
delAll:false,
selectedlist:[],//暂存被选中进行编辑的数据
selectedindex:-1,//记录被选中的index
pageNo:0,
record:3,
pagearr:[],
},
methods:{
add(){
if(this.username=="" || this.id==""){
alert("请输入姓名或学号")
}else{
this.arr.unshift({name:this.username,id:this.id});
this.username="";
this.id="";
this.page();
}
},
del(){
if(this.delAll){
this.arr=[];
this.delAll=false;
this.page();
}else{
this.arr.splice(this.now,1);
if((this.arr.length+1)%this.record==1){
this.pageNo--;
} //当最后一页的最后一条数据被删除时,也要改变当前页面
this.page();
}
},
edit(index){
this.selectedlist=[];
this.selectedindex=index;
this.selectedlist=JSON.parse( JSON.stringify(this.arr[index]) );// 深度拷贝,先转换为字符串,然后再转换
},
edit_true(){
this.arr[this.selectedindex].id=this.selectedlist.id;
this.arr[this.selectedindex].name=this.selectedlist.name;
},
page(){
let pageMax=Math.ceil(this.arr.length/this.record);
this.pagearr=[];
for(let i=1;i<=pageMax;i++){
this.pagearr.push(i);
}
},
},
computed:{
subArr(){
return this.arr.slice(this.pageNo*this.record,(this.pageNo+1)*this.record);
}
},
ready(){
this.arr.unshift({name:'aaa',id:111});
this.arr.unshift({name:'bbb',id:222});
this.arr.unshift({name:'ccc',id:333});
this.arr.unshift({name:'ddd',id:444});
this.arr.unshift({name:'eee',id:555});
this.arr.unshift({name:'fff',id:666});
this.arr.unshift({name:'ggg',id:777});
this.arr.unshift({name:'hhh',id:888});
this.arr.unshift({name:'iii',id:999});
this.page();
}
});
};
</script>
v-show="arr.length!=0",v-show="true"显示,v-show="false"不显示。
数据添加使用:
this.arr.unshift({name:this.username,id:this.id});
第二步:删除数据
这里删除数据分为删一条和全部删除,所以引入了一个数据delAll,首先使delAll为false,表示不全部删除。删除一条数据要知道是删除的哪一条,所以点击删除的时候就改变now的值,代表现在在哪一条数据上,然后弹出模态框,点击确定才删除:
this.arr.splice(this.now,1); //splice是用于删除数组中的指定元素,第一个参数是从哪删除的索引,第二个参数是删除的个数
点击全部删除的时候,改变delAll,使它等于true,代表要全部删除:
this.arr=[]; //全部删除就把数组清空 this.delAll=false; //过后把delAll恢复以前的值
以上的删除页面都会自动更新,因为你删除一条,arr数组就少一条,循环的arr的数据就在变。别忘了,vue会自动更新。
第三步:编辑数据
我们想要编辑哪一条数据,就把now传到函数里面去,从arr里面寻找选中的数据,然后声明一个空数组,用于暂存选中的数据,编辑完后就又把数据赋值回arr那一条数据。
edit(index){ this.selectedlist=[]; this.selectedindex=index; this.selectedlist=JSON.parse( JSON.stringify(this.arr[index]) );// 深度拷贝,先转换为字符串,然后再转换 },
如果代码是这样:
edit(index){ this.selectedlist=[]; this.selectedindex=index; this.selectedlist=this.arr[index]; },
那么就会有一个问题,因为
arr[index]
是个Object类型的数据,若使用=赋值,则赋值操作为浅度拷贝(把数据的地址赋值给对应变量,而没有把具体的数据复制给变量,变量会随数据值的变化而变化),selectedlist与list[index]使用相同的数据地址,互相引起数据值的变化。因此这里我们需要进行深度拷贝
如果点击取消
@click="selectedlist=[]"
点击确定
@click="edit_true()"
edit_true(){ this.arr[this.selectedindex].id=this.selectedlist.id; this.arr[this.selectedindex].name=this.selectedlist.name; },//把修改完的值再赋值回去
第四步:分页功能
先把页面底部的几页显示出来:
咱们就用一个空数组来存页数,比如有4页,[1,2,3,4],然后循环这个数组,把1,2,3,4,显示出来
page(){ let pageMax=Math.ceil(this.arr.length/this.record); //计算总的页数,注意:前面的所有行为都必须调用此函数 this.pagearr=[]; for(let i=1;i<=pageMax;i++){ this.pagearr.push(i); } },
然后再控制页面显示几条数据,用一个子数组来保存当前页的数据:
computed:{ subArr(){ return this.arr.slice(this.pageNo*this.record,(this.pageNo+1)*this.record); } }, //此刻就要使用vue的计算属性功能了,此计算非常强大,只要data变,就会重新计算,这就是数据驱动
当然,因为有以上的强大功能做铺垫后面就简单了,点击第二页时就改变pageNo,pageNo一变,数据也会跟着变。
更多推荐
所有评论(0)