脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue分页组件

100行代码实现一个vue分页组功能

 更新时间：2018年11月06日 14:36:59   作者：伊泽瑞尔  
今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。接下来本文通过实例代码给大家介绍100行代码实现一个vue分页组功能，感兴趣的朋友跟随小编一起看看吧

今天用vue来实现一个分页组件，总体来说，vue实现比较简单，样式部分模仿了elementUI。所有代码的源码可以再github上下载的到：下载地址 先来看一下实现效果：

点击查看效果

整体思路

我们先看一下使用到的文件的目录：

我们在 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，当前页在中间的。

下面看具体的实现：

<!--上一页-->
   <button @click="prePage" :disabled="currentPage === 1">上一页</button>
   <!--总页数小于8的-->
   <template v-if="pageTotal <= showPageNo">
    <button v-for="i in pageTotal" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
   </template>
   <template v-else-if="currentPage < 4">
    <button v-for="i in 6" @click="changeCurrentPage(i)" :class="{active:i === currentPage}" :key="i">{{i}}</button>
    <button :disabled="true">···</button>
    <button>{{pageTotal}}</button>
   </template>
   <template v-else-if="currentPage > pageTotal - 4">
    <button>1</button>
    <button :disabled="true">···</button>
    <button v-for="i in 6" @click="changeCurrentPage(i + (pageTotal - 6))" :class="{active:(i + (pageTotal - 6)) === currentPage}" :key="i">{{i + (pageTotal - 6)}}</button>
   </template>
   <template v-else>
    <button>1</button>
    <button :disabled="true">···</button>
    <button @click="changeCurrentPage(currentPage - 2)">{{currentPage - 2}}</button>
    <button @click="changeCurrentPage(currentPage - 1)">{{currentPage - 1}}</button>
    <button class="active">{{currentPage}}</button>
    <button @click="changeCurrentPage(currentPage + 1)">{{currentPage + 1}}</button>
    <button @click="changeCurrentPage(currentPage + 2)">{{currentPage + 2}}</button>
    <button :disabled="true">···</button>
    <button @click="changeCurrentPage(pageTotal)">{{pageTotal}}</button>
   </template>
   <!--下一页-->
   <button @click="nextPage" :disabled="currentPage === pageTotal">下一页</button>

可以看到页面上需要实现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的实现

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

<template>
 <div class="pageComponentsTest">
  <page-component :page-config="pageConfigTotal" @changeCurrentPage="changePage"></page-component>
  <page-component :page-config="pageConfigPageTotal"></page-component>
 </div>
</template>

配合入参部分：

{
  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实现分页组件整体来说是很容易了，比使用jQuery方便很多，使用vm模式开发前端的最明显的一个好处是，能是数据mode部分与view页面部分保持同步，而开发者不用考虑这个过程，所以整体来说简单了很多。

以上所述是小编给大家介绍的100行代码实现一个vue分页组功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！

您可能感兴趣的文章:

相关文章

  • Vue3中的ref和reactive响应式原理解析

    Vue3中的ref和reactive响应式原理解析

    这篇文章主要介绍了Vue3中的ref和reactive响应式,本节主要介绍了响应式变量和对象，以及变量和对象在响应式和非响应式之间的转换，需要的朋友可以参考下
    2022-08-08
  • VUE多层路由嵌套实现代码

    VUE多层路由嵌套实现代码

    这篇文章主要为大家详细介绍了VUE多层路由嵌套的实现代码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解vue 命名视图

    详解vue 命名视图

    这篇文章主要介绍了vue 命名视图的相关知识，本文给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-08-08
  • Vue自定义Hook实现简化本地存储

    Vue自定义Hook实现简化本地存储

    这篇文章主要为大家详细介绍了如何通过使用 Vue 3 的 Composition API 创建一个强大而灵活的自定义 Hook,简化了在 localStorage 或 sessionStorage 中管理数据的流程,需要的可以参考下
    2023-12-12
  • vue项目实现添加图片裁剪组件

    vue项目实现添加图片裁剪组件

    这篇文章主要为大家详细介绍了vue项目实现添加图片裁剪组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2022-03-03
  • 关于vue面试题汇总

    关于vue面试题汇总

    本文给大家收藏整理了关于vue面试题汇总的一些知识,需要的朋友可以参考下
    2018-03-03
  • Vue Steps步骤条渲染异常问题

    Vue Steps步骤条渲染异常问题

    这篇文章主要介绍了Vue Steps步骤条渲染异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • 详解vite+ts快速搭建vue3项目以及介绍相关特性

    详解vite+ts快速搭建vue3项目以及介绍相关特性

    这篇文章主要介绍了vite+ts快速搭建vue3项目以及介绍相关特性，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2021-02-02
  • vue项目开发中setTimeout等定时器的管理问题

    vue项目开发中setTimeout等定时器的管理问题

    这篇文章主要介绍了vue项目开发中setTimeout等定时器的管理问题,需要的朋友可以参考下
    2018-09-09
  • vite如何构建vue3项目

    vite如何构建vue3项目

    本文介绍了如何使用Vite快速搭建Vue项目,强调Vite对Node.js版本有最低要求（>=12.0.0）,提供了环境准备、安装步骤和启动指南,旨在帮助开发者高效启动Vue项目
    2024-10-10

最新评论