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


Posted in Javascript onNovember 06, 2018

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

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

点击查看效果

整体思路

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

100行代码实现一个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,当前页在中间的。

下面看具体的实现:

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

Javascript 相关文章推荐
js循环改变div颜色具体方法
Jun 25 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jquery实现可关闭的倒计时广告特效代码
Sep 02 Javascript
AngularJS  双向数据绑定详解简单实例
Oct 20 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
JS树形菜单组件Bootstrap TreeView使用方法详解
Dec 21 Javascript
AngularJS之自定义服务详解(factory、service、provider)
Apr 14 Javascript
JavaScript 2018 中即将迎来的新功能
Sep 21 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
微信小程序自定义tabBar组件开发详解
Sep 24 #Javascript
Vue递归实现树形菜单方法实例
Nov 06 #Javascript
electron中使用bootstrap的示例代码
Nov 06 #Javascript
vue实现自定义日期组件功能的实例代码
Nov 06 #Javascript
浅谈Vue数据响应思路之数组
Nov 06 #Javascript
Vue项目中最新用到的一些实用小技巧
Nov 06 #Javascript
详解Vue内部怎样处理props选项的多种写法
Nov 06 #Javascript
You might like
《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
php分页查询mysql结果的base64处理方法示例
2017/05/18 PHP
yii2.0框架数据库操作简单示例【添加,修改,删除,查询,打印等】
2020/04/13 PHP
关于jQuery object and DOM element
2013/04/15 Javascript
javascript中call和apply的用法示例分析
2015/04/02 Javascript
JavaScript 消息框效果【实现代码】
2016/04/27 Javascript
angularjs 表单密码验证自定义指令实现代码
2016/10/27 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
在vue项目中正确使用iconfont的方法
2018/09/28 Javascript
Vue组件的使用及个人理解与介绍
2019/02/09 Javascript
vue.js页面加载执行created,mounted的先后顺序说明
2020/11/07 Javascript
编写v-for循环的技巧汇总
2020/12/01 Javascript
js面向对象封装级联下拉菜单列表的实现步骤
2021/02/08 Javascript
python基于Tkinter库实现简单文本编辑器实例
2015/05/05 Python
Python实现的彩票机选器实例
2015/06/17 Python
python 根据pid杀死相应进程的方法
2017/01/16 Python
python常见排序算法基础教程
2017/04/13 Python
Python 中pandas.read_excel详细介绍
2017/06/23 Python
CentOS7安装Python3的教程详解
2019/04/10 Python
Python检测数据类型的方法总结
2019/05/20 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
python实现登录与注册系统
2020/11/30 Python
戴森西班牙官网:Dyson西班牙
2020/02/04 全球购物
小学教师的自我评价范例
2013/10/31 职场文书
医学专业毕业生推荐信
2013/11/14 职场文书
荷叶圆圆教学反思
2014/02/01 职场文书
电子工程专业毕业生求职信
2014/03/14 职场文书
会计试用期自我评价怎么写
2014/09/18 职场文书
2014年基层党支部工作总结
2014/12/04 职场文书
护士节慰问信
2015/02/15 职场文书
质检员岗位职责范本
2015/04/07 职场文书
2016优秀员工先进事迹材料
2016/02/25 职场文书
python 模块重载的五种方法
2021/04/24 Python
golang DNS服务器的简单实现操作
2021/04/30 Golang