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 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
23个超流行的jQuery相册插件整理分享
Apr 25 Javascript
jQuery1.6 正式版发布并提供下载
May 05 Javascript
Egret引擎开发指南之编译项目
Sep 03 Javascript
jQuery仿淘宝网产品品牌隐藏与显示效果
Sep 01 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
vue.js选中动态绑定的radio的指定项
Jun 02 Javascript
vue组件name的作用小结
May 23 Javascript
vue用Object.defineProperty手写一个简单的双向绑定的示例
Jul 09 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
小程序实现列表倒计时功能
Jan 29 Javascript
使用compose函数优化代码提高可读性及扩展性
Jun 16 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
PHP ? EasyUI DataGrid 资料存的方式介绍
2012/11/07 PHP
ThinkPHP实现批量删除数据的代码实例
2014/07/02 PHP
PIGCMS 如何关闭聊天机器人
2015/02/12 PHP
PHP反射机制原理与用法详解
2017/02/15 PHP
Avengerls vs KG BO3 第三场2.18
2021/03/10 DOTA
Javascript与vbscript数据共享
2007/01/09 Javascript
Javascript 调试利器 Firebug使用详解六
2009/07/05 Javascript
自己整理的一个javascript日期处理函数
2010/10/16 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
js实现每日自动换一张图片的方法
2015/05/04 Javascript
JavaScript 定时器 SetTimeout之定时刷新窗口和关闭窗口(代码超简单)
2016/02/26 Javascript
jQuery遍历DOM节点操作之filter()方法详解
2016/04/14 Javascript
Vue.JS入门教程之列表渲染
2016/12/01 Javascript
Vue实现web分页组件详解
2017/11/28 Javascript
angular2中使用第三方js库的实例
2018/02/26 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
微信小程序自定义多列选择器使用详解
2019/06/21 Javascript
node+multer实现图片上传的示例代码
2020/02/18 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
从CentOS安装完成到生成词云python的实例
2017/12/01 Python
python实现ID3决策树算法
2017/12/20 Python
Python 实现使用dict 创建二维数据、DataFrame
2018/04/13 Python
Python+selenium 获取一组元素属性值的实例
2018/06/22 Python
python matlibplot绘制多条曲线图
2021/02/19 Python
详解python多线程之间的同步(一)
2019/04/03 Python
Python实现鼠标自动在屏幕上随机移动功能
2020/03/14 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
Html5 webRTC简单实现视频调用的示例代码
2020/09/23 HTML / CSS
UGG雪地靴德国官网:UGG德国
2016/11/19 全球购物
美国购买舞会礼服网站:Couture Candy
2019/12/29 全球购物
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
保护环境倡议书
2014/04/14 职场文书
小学运动会加油词
2015/07/18 职场文书
一文搞懂Redis中String数据类型
2022/04/03 Redis