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

 更新时间:2018-11-06 15:00:52   作者:佚名   我要评论(0)

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

今天用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分页组功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:

  • Vue2.5 结合 Element UI 之 Table 和 Pagination 组件实现分页功能
  • 基于vue实现swipe分页组件实例
  • 基于vue2的table分页组件实现方法
  • 基于vue实现分页/翻页组件paginator示例
  • vuejs2.0实现分页组件使用$emit进行事件监听数据传递的方法
  • 基于Vue如何封装分页组件

相关文章

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

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

    今天用vue来实现一个分页组件,总体来说,vue实现比较简单,样式部分模仿了elementUI。所有代码的源码可以再github上下载的到:下载地址 先来看一下实现效果:
    2018-11-06
  • 浅谈Vue数据响应思路之数组

    浅谈Vue数据响应思路之数组

    之前梳理Vue数据响应思路 时没有考虑数组的情况。 js 中数组有很多实例方法,其中有一部分会改变数组本身的值,比如 push pop shift unshift 等,这些方法被称
    2018-11-06
  • vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错

    前言: 项目使用vue-cli版本2.9.3 ,vue-router使用webpackChunkName实现按需加载. BUG描述:该报错在项目上线一段时间后,有用户反映页面无法正常游览 (后面
    2018-11-06
  • vue实现自定义日期组件功能的实例代码

    vue实现自定义日期组件功能的实例代码

    实现一个日期组件,如图: components.js代码如下: Vue.component('sc-calendar',{ template:'<div class="scCalendar">' + '<div class="calenda
    2018-11-06
  • 易语言彻底删除指定的文件

    易语言彻底删除指定的文件

    删除文件命令 英文命令:kill 操作系统支持:Windows、Linux 所属类别:磁盘操作 成功返回真,失败返回假。 语法: 逻辑型 删除文件 (欲删除的文件名
    2018-11-06
  • 易语言在指定路径下新建一个文件夹目录

    易语言在指定路径下新建一个文件夹目录

    创建目录命令 英文命令:MkDir 操作系统支持:Windows、Linux 所属类别:磁盘操作 创建一个新的目录。成功返回真,失败返回假。 语法: 逻辑型 创建目录
    2018-11-06
  • 易语言播放指定的音乐文件

    易语言播放指定的音乐文件

    播放音乐命令 英文命令:PlayMusic 操作系统支持:Windows 所属类别:媒体播放 可以播放 .WAV、.MID 声音文件或相应格式的字节集声音数据、声音资源。成
    2018-11-06
  • electron中使用bootstrap的示例代码

    electron中使用bootstrap的示例代码

    安装 安装bootstrap命令如下: npm install bootstrap --save 安装后可能报告如下错误: npm WARN bootstrap@4.1.3 requires a peer of popper.
    2018-11-06
  • 微信小程序实现选项卡效果

    微信小程序实现选项卡效果

    本文实例为大家分享了微信小程序实现选项卡效果展示的具体代码,供大家参考,具体内容如下 demo.wxss .swiper-tab{ width: 100%; border-bottom:
    2018-11-06
  • Vue递归实现树形菜单方法实例

    Vue递归实现树形菜单方法实例

    什么是树形菜单还是要简单的啰嗦一下,比如: 上图是截图自elementui的实例,实现方式是用文档结构(类似像原生Dom文档结构的写法)的方式,好处就是很灵
    2018-11-06

最新评论