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 实现分页效果

分页，是在业务中经常要用到，为了节省用户流量和提升用户体验

代码：

最新文章

热门文章