Vue 实现分页效果
分页,是在业务中经常要用到,为了节省用户流量和提升用户体验
讲一下思路:
首先是定义页号currentPage 和 页大小pagesize,用一个数组保存总数据;
用一个计算属性page_arrs,作用是 让页面展示的是我们所需要的页面
而我们在page_arrs中要分割原数组,用一个slice()方法进行分割;
在控件button上绑定点击方法,对页号currentPage进行修改,从而修改整个页面展示
具体看以下代码
代码:
data () { return { arrs : [ {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6}, {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6}, {name:'Otto',id:1}, {name:'Jacob',id:2}, {name:'Larry',id:3}, {name:'Tim',id:4}, {name:'Tom',id:5}, {name:'Jack',id:6} ], currentPage : 1,//当前页号 pagesize :10 //每页大小 } }
<table class="table table-hover "> <thead> <tr> <th class="number">序号</th> <th >题目</th> <th class="del">删除</th> </tr> </thead> <tbody> <tr class="tr" v-for="(item,index) in page_arrs" :key="index"> <th>{{index+1}}</th> <td>{{item.name}}</td> <td><a href="">删除</a></td> </tr> </tbody> </table> <div class="page"> <button class="btn btn-default" type="submit" @click="primaryPage">首页</button> <button class="btn btn-default" type="submit" @click="prePage">上页</button> <button class="btn btn-default" type="submit">{{current_page}}/{{Math.ceil(arrs.length/pagesize)}}</button> <button class="btn btn-default" type="submit" @click="nextPage">下页</button> <button class="btn btn-default" type="submit" @click="lastPage">尾页</button> </div>
computed:{ page_arrs(){ let {currentPage,pagesize} = this return this.arrs.slice((currentPage-1)*pagesize,currentPage*pagesize) }, current_page(){ return this.currentPage }
},
methods: { primaryPage(){ this.currentPage = 1 }, prePage(){ if(this.currentPage == 1){ return } this.currentPage = this.currentPage - 1 }, nextPage(){ if(this.currentPage == Math.ceil(this.arrs.length/this.pagesize)){ return } this.currentPage = this.currentPage + 1 }, lastPage(){ this.currentPage = Math.ceil(this.arrs.length/this.pagesize) } },
分类:
Vue.js
, JavaScript
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC计划阶段(plan_phase)底层原理浅谈
· .NET开发智能桌面机器人:用.NET IoT库编写驱动控制两个屏幕
· 用纯.NET开发并制作一个智能桌面机器人:从.NET IoT入门开始
· 一个超经典 WinForm,WPF 卡死问题的终极反思
· ASP.NET Core - 日志记录系统(二)
· 支付宝事故这事儿,凭什么又是程序员背锅?有没有可能是这样的...
· 在线客服系统 QPS 突破 240/秒,连接数突破 4000,日请求数接近1000万次,.NET 多
· C# 开发工具Visual Studio 介绍
· 在 Windows 10 上实现免密码 SSH 登录
· C#中如何使用异步编程