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) } },
复制代码

 

posted @   阿东哟  阅读(5399)  评论(1编辑  收藏  举报
编辑推荐:
· .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#中如何使用异步编程
点击右上角即可分享
微信分享提示