Vue implement paging effect

Paging, is often used in business, in order to save user traffic and enhance the user experience

Talk about ideas:

First, define the page size, and page number currentPage pagesize, with a total data storage array;

With a calculated property page_arrs, the role is to show the page is the page we need

And we page_arrs the array to split the original, divided by a slice () method;

Click Bind method on the control button, on page number currentPage be modified to change the whole page display

 

Specifically look at the following code

Code:

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 } 
      ], 
      The currentPage: . 1 , this page number // 
      pageSize: 10 // page size 
     } 
}

 

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