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 创建快捷方式的代码(fso)
Nov 19 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
js实现简单的购物车有图有代码
May 26 Javascript
js使用循环清空某个div中的input标签值
Sep 29 Javascript
JavaScript变量的作用域全解析
Aug 14 Javascript
vue项目国际化vue-i18n的安装使用教程
Mar 14 Javascript
vue将毫秒数转化为正常日期格式的实例
Sep 16 Javascript
Vue 表情包输入组件的实现代码
Jan 21 Javascript
微信小程序云函数使用mysql数据库过程详解
Aug 07 Javascript
JS实现的进制转换,浮点数相加,数字判断操作示例
Nov 09 Javascript
Vue 一键清空表单的实现方法
Feb 07 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
PHP合并数组函数array_merge用法分析
2017/02/17 PHP
关于window.pageYOffset和document.documentElement.scrollTop
2011/04/05 Javascript
window.dialogArguments 使用说明
2011/04/11 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
Jquery读取URL参数小例子
2013/08/30 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
jquery 字符串切割函数substring的用法说明
2014/02/11 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
jQuery插件easyUI实现通过JS显示Dialog的方法
2016/09/16 Javascript
jquery事件与绑定事件
2017/03/16 Javascript
JS手机端touch事件计算滑动距离的方法示例
2017/10/26 Javascript
详解vue-cli之webpack3构建全面提速优化
2017/12/25 Javascript
vue bus全局事件中心简单Demo详解
2018/02/26 Javascript
vue.js将时间戳转化为日期格式的实现代码
2018/06/05 Javascript
PHP实现基于Redis的MessageQueue队列封装操作示例
2019/02/02 Javascript
jQuery分组选择器简单用法示例
2019/04/04 jQuery
基于Vue全局组件与局部组件的区别说明
2020/08/11 Javascript
[51:43]OG vs LGD 2018国际邀请赛淘汰赛BO3 第五场 8.26
2018/08/30 DOTA
python django集成cas验证系统
2014/07/14 Python
总结Python编程中函数的使用要点
2016/03/20 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
python自动生成model文件过程详解
2019/11/02 Python
Python时间差中seconds和total_seconds的区别详解
2019/12/26 Python
TensorBoard 计算图的查看方式
2020/02/15 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
EntityManager都有哪些方法
2013/11/01 面试题
学习委员自我鉴定
2014/01/13 职场文书
高中校园广播稿3篇
2014/09/29 职场文书
2015年大学生村官工作总结
2015/04/21 职场文书
如何用Laravel包含你自己的帮助函数
2021/05/27 PHP
python获取对象信息的实例详解
2021/07/07 Python
python标准库ElementTree处理xml
2022/05/20 Python