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 相关文章推荐
jquery实现的超出屏幕时把固定层变为定位层的代码
Feb 23 Javascript
JS小功能(列表页面隔行变色)简单实现
Nov 28 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
如何在JS中实现相互转换XML和JSON
Jul 19 Javascript
JavaScript编写一个简易购物车功能
Sep 17 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
详解网站中图片日常使用以及优化手法
Jan 09 Javascript
移动端刮刮乐的实现方式(js+HTML5)
Mar 23 Javascript
JavaScript简单计算人的年龄示例
Apr 15 Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 Javascript
微信小程序点击列表跳转到对应详情页过程解析
Sep 26 Javascript
Vue + iView实现Excel上传功能的完整代码
Jun 22 Vue.js
微信小程序自定义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
PHP如何编写易读的代码
2007/07/10 PHP
PHP 抓取网页图片并且另存为的实现代码
2010/03/24 PHP
关于PHPDocument 代码注释规范的总结
2013/06/25 PHP
关于PHP语言构造器介绍
2013/07/08 PHP
PHP与Java进行通信的实现方法
2013/10/21 PHP
用javascript实现的支持lrc歌词的播放器
2007/05/17 Javascript
JavaScript的setAttribute兼容性问题解决方法
2013/11/11 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
javascript跑马灯抽奖实例讲解
2020/04/17 Javascript
瀑布流的实现方式(原生js+jquery+css3)
2020/06/28 Javascript
vue2.0实战之基础入门(1)
2017/03/27 Javascript
JavaScript实现简单的双色球(实例讲解)
2017/07/31 Javascript
nodejs中Express与Koa2对比分析
2018/02/06 NodeJs
ES6中Symbol、Set和Map用法详解
2019/08/20 Javascript
vue element upload组件 file-list的动态绑定实现
2019/10/11 Javascript
浅谈Vue SSR中的Bundle的具有使用
2019/11/21 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
windows如何把已安装的nodejs高版本降级为低版本(图文教程)
2020/12/14 NodeJs
[56:13]DOTA2-DPC中国联赛定级赛 LBZS vs Phoenix BO3第一场 1月10日
2021/03/11 DOTA
使用graphics.py实现2048小游戏
2015/03/10 Python
请不要重复犯我在学习Python和Linux系统上的错误
2016/12/12 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
tensorflow mnist 数据加载实现并画图效果
2020/02/05 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Django 博客实现简单的全文搜索的示例代码
2020/02/17 Python
记一次django内存异常排查及解决方法
2020/08/07 Python
Schutz鞋官方网站:Schutz Shoes
2017/12/13 全球购物
Topman美国官网:英国著名的国际平价时尚男装品牌
2017/12/22 全球购物
职业技术学校毕业生推荐信
2013/12/03 职场文书
合伙协议书
2014/04/23 职场文书
入党积极分子培养人意见
2015/06/02 职场文书
护士岗位竞聘书
2015/09/15 职场文书
如何用RabbitMQ和Swoole实现一个异步任务系统
2021/05/29 PHP
如何利用pygame实现打飞机小游戏
2021/05/30 Python
【海涛教你打dota】体验一超神发条:咱是抢盾专业户
2022/04/01 DOTA
Windows server 2012 R2 安装IIS服务器
2022/04/29 Servers