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)
    }
},

原文地址：https://www.cnblogs.com/adongyo/p/11373129.html