vue简单版分页功能实现
vue简单版分页功能实现
功能介绍:
将数据(n条)进行划分,根据所在页面展示对应页面的数据。如 有100条数据,每一页展示10条,总共就就是100/10 = 10页。
功能实现逻辑: 1.准备静态页面, 分页块需要 上一页 1 2 3 下一页,这种格式。
2.准备data数据块,定义需要的变量。如需要按照每页展示5条数据,定一个a变量,还需要准备一个总页数(总页数=总的数据/每页展示数据)向上取整得来,定一个b变量接受, 还需要一个根据总的数据计算后的,接受显示数据的变量,还需要准备初始页码d,到这变量准备就绪。
3.进行@click事件,上一页,需要做判断,当当前页码不等于1时,让当前页码进行--操作。下一页,也需要判断,当当前页码小于总页码时,让当前页码进行++操作, 点击所处页码也需要做判断,将你点击的页码赋值你所在页码的值。
功能实现代码: html代码块
<div id="app">
<div class="conTable">
<table>
<tr>
<th>ID</th>
<th>数量</th>
<th>分类</th>
<th>开始时间</th>
<th>结束时间</th>
</tr>
<tr v-for="item in pageNumber" :key="item.id">
<td>{{item.id}}</td>
<td>{{item.number}}</td>
<td>{{item.classification}}</td>
<td>{{item.startTime}}</td>
<td>{{item.endTime}}</td>
</tr>
</table>
</div>
<div class="pading">
<div class="pravPage" @click="pravPage">上一页</div>
<div class="pages" v-for="(item, index) in pageCount" @click="page(item)">
<div :class="item==pageNum ? 'acv':'active'" >{{item}}</div>
</div>
<div class="nextPage" @click="nexTpage">下一页</div>
</div>
</div>
css代码块
#app{
background: #cdcdcd;
}
.conTable{
height: 250px;
color: #223a5c;
}
table{
width: 800px;
line-height: 27px;
text-align: center;
margin: auto;
padding-top: 20px;
}
.pading{
display: flex;
justify-content: right;
font-size: 18px;
font-weight: bold;
padding-right: 20px;
background: #d2d8d6;
}
.pading>div:first-child,
.pading>div:last-child{
width: 80px;
font-size: 14px;
background: #ebb470;
margin-right: 6px;
margin-left: 6px;
display: flex;
align-items: center;
justify-content: center;
}
.pading>div:first-child:hover,
.pading>div:last-child:hover{
background: #eaeaea;
}
.pages{
display: flex;
}
.active{
width: 25px;
height: 25px;
border: 2px solid #020202;
border-radius: 5px;
margin: 0 2px;
text-align: center;
color: #f00;
}
.acv{
width: 25px;
height: 25px;
border: 2px solid #eaeaea;
background: #40472b;
border-radius: 5px;
margin: 0 2px;
text-align: center;
color: #fff;
}
script代码块
<script>
new Vue({
el: '#app',
data() {
return {
pageNum: 1, // 页码
pageSize: 5, // 每页显示5条数据
pageCount: '', // 总页数
pageNumber:[], // 处理后用于展示的数据
// paging:[{},{},{},{},{}...], 多条结构
paging: [{ id: 1, number: '1034',classification: 'I', startTime: '2023-03-12 00:00:00', endTime: '2023-03-13 09:00:00' }//这只是一条数据,需要多条模拟,可以多复制
],
}
},
created(){
this.pageCount = Math.ceil(this.paging.length/this.pageSize);
// Math.ceil(向上取整) Math.floor(向下取整)
this.page(this.pageNum)
},
methods: {
page(item){ //当前页
this.pageNum = item
// pageNum=1 => 0第一组数据的第一个索引号; 2 => 10第二组数据的第一个索引号
let list = (this.pageNum -1)*this.pageSize; //拿到新一组的索引
// 获取每组所需要的5条数据
// slice(开始索引号,截取多少个长度)
this.pageNumber = this.paging.slice(list, list+this.pageSize)
},
pravPage(){ //上一页
if(this.pageNum != 1){
this.pageNum --;
this.page(this.pageNum)
}
},
nexTpage(){ //下一页
if(this.pageNum < this.pageCount){
this.pageNum ++;
this.page(this.pageNum)
}
}
}
})
</script>
//别忘记引入vue.js啊!!!
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战