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数据缓存系统实现代码
Oct 24 Javascript
jquery+json实现数据列表分页示例代码
Nov 15 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
Feb 23 Javascript
js+html5通过canvas指定开始和结束点绘制线条的方法
Jun 05 Javascript
javascript实现根据时间段显示问候语的方法
Jun 18 Javascript
javascript如何操作HTML下拉列表标签
Aug 20 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
JS实现数组去重方法总结(六种方法)
Jul 14 Javascript
js实现方块上下左右移动效果
Aug 17 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
微信小程序自定义支持图片的弹窗
Dec 21 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 开源框架22个简单简介
2009/08/24 PHP
用PHP实现Ftp用户的在线管理
2012/02/16 PHP
PHP命名空间与自动加载类详解
2018/09/04 PHP
Laravel6.0.4中将添加计划任务事件的方法步骤
2019/10/15 PHP
firefox下对ajax的onreadystatechange的支持情况分析
2009/12/14 Javascript
js中scrollHeight,scrollWidth,scrollLeft,scrolltop等差别介绍
2012/05/16 Javascript
Jquery通过Ajax方式来提交Form表单的具体实现
2013/11/07 Javascript
nodejs开发环境配置与使用
2014/11/17 NodeJs
js中hash和ico的关联分析
2015/02/05 Javascript
jquery+easeing实现仿flash的载入动画
2015/03/10 Javascript
JavaScript实现仿网易通行证表单验证
2015/05/25 Javascript
jQuery多级手风琴菜单实例讲解
2015/10/22 Javascript
Angular设置title信息解决SEO方面存在问题
2016/08/19 Javascript
javascript 秒表计时器实现代码
2017/03/09 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
解决修复npm安装全局模块权限的问题
2018/05/17 Javascript
axios的拦截请求与响应方法
2018/08/11 Javascript
浅谈Vue.js 关于页面加载完成后执行一个方法的问题
2019/04/01 Javascript
详解jquery和vue对比
2019/04/16 jQuery
javascript设计模式 ? 简单工厂模式原理与应用实例分析
2020/04/09 Javascript
文章或博客自动生成章节目录索引(支持三级)的实现代码
2020/05/10 Javascript
js实现圆形菜单选择器
2020/12/03 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python连接DB2数据库
2016/08/27 Python
Python 结巴分词实现关键词抽取分析
2017/10/21 Python
python3射线法判断点是否在多边形内
2019/06/28 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python中有几个关键字
2020/06/04 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
千禧酒店及度假村官方网站:Millennium Hotels and Resorts
2019/05/10 全球购物
英国经济型酒店品牌:Travelodge
2019/12/17 全球购物
销售代表求职自荐信
2013/10/01 职场文书
有针对性的求职自荐信
2013/11/14 职场文书
班主任对学生的评语
2014/04/26 职场文书
《美丽的南沙群岛》教学反思
2014/04/27 职场文书