使用vue怎么实现一个分页组功能

本篇文章为大家展示了使用vue怎么实现一个分页组功能，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

企业建站必须是能够以充分展现企业形象为主要目的，是企业文化与产品对外扩展宣传的重要窗口，一个合格的网站不仅仅能为公司带来巨大的互联网上的收集和信息发布平台，创新互联建站面向各种领域：木托盘等成都网站设计、成都全网营销推广解决方案、网站设计等建站排名服务。

文件的目录：

我们在 pageComponentsTest.vue 页面引入了 pageComponent.vue 分页组件。整体思路是通过 props
来达到组件的灵活通用的效果，整体语法是使用vue的VM语法。

pageComponent.vue实现

首先实现一个分页，需要知道数据总条数，一个页面显示的数据条数和当前显示第几页的数据。那么我们在 pageComponent.vue 里面的 props 就有了。看下面的代码：

props: {
   // 分页配置
   pageConfig: {
    type: Object, require: true, default() {
     return {
      pageSize: 10,   //一页的数据条数
      pageNo: 0,    //当前页的索引
      total: 0,     //总的数据条数
      pageTotal: 0   //总的页数
     }
    }
   }

根据用户入参，我们可以使用计算属性来计算一个总页数的变量：

computed: {
   //计算总页数，如果传了pageTotal,直接取pageTotal的值，如果传了total，那么根据pageSize去计算
   pageTotal(){
    const config = this.pageConfig
    if(config.pageTotal){
     return config.pageTotal
    }else {
     if(config.pageSize && config.total){
      return Math.ceil(config.total/config.pageSize)
     }else {
      return 0
     }
    }
   }
  }

有了总页数，和当前页，就需要各种判断来实现我们的html部分了，这里分4中情况

1. 总页数小于8，只需要直接遍历到8就行了。

2. 总页数大于8，但当前页小于4的。

3. 总页数大于8，当前页靠后的。

4. 总页数大于8，当前页在中间的。

下面看具体的实现：

   上一页
   
   
    {{i}}
   
   
    {{i}}
    ···
    {{pageTotal}}
   
    pageTotal - 4">
    1
    ···
    {{i + (pageTotal - 6)}}
   
   
    1
    ···
    {{currentPage - 2}}
    {{currentPage - 1}}
    {{currentPage}}
    {{currentPage + 1}}
    {{currentPage + 2}}
    ···
    {{pageTotal}}
   
   
   下一页

可以看到页面上需要实现3个方法，分别是上下页，和点击页面的方法。

methods: {
   prePage(){
    this.currentPage -= 1
    this.$emit('changeCurrentPage',this.currentPage)
   },
   nextPage(){
    this.currentPage += 1
    this.$emit('changeCurrentPage',this.currentPage)
   },
   changeCurrentPage(i){
    this.currentPage = i
    this.$emit('changeCurrentPage',this.currentPage)
   }
  }

以上就是 pageComponent.vue 的大致实现了，每次页面改变，都会触发一个 changeCurrentPage 方法的回调，用来通知当前使用组件的页面当前页已经改变。

pageComponentsTest.vue的实现

引用页面就比较简单了，只要传入组件需要的对应的参数，就能显示我们的组件了。 引用部分：

配合入参部分：

{
  name: "pageComponentsTest",
  data() {
   return {
    pageConfigTotal:{total:21,pageSize:10,pageNo:1},
    pageConfigPageTotal:{total:21,pageSize:10,pageNo:1,pageTotal:50}
   }
  },
  components:{'page-component':pageComponent},
  methods: {
   changePage(page){
    this.pageConfigTotal.pageNo = page
   }
  }
 }

上述内容就是使用vue怎么实现一个分页组功能，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注创新互联行业资讯频道。