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奇异的arguments分析
Oct 20 Javascript
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
jquery表单对象属性过滤选择器实例分析
May 18 Javascript
JavaScript每天定时更换皮肤样式的方法
Jul 01 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
QQ登录背景闪动效果附效果演示源码下载
Sep 22 Javascript
Vue ElementUI之Form表单验证遇到的问题
Aug 21 Javascript
jQuery实现广告条滚动效果
Aug 22 jQuery
Vue实例中生命周期created和mounted的区别详解
Aug 25 Javascript
解决jquery有正确返回值但不执行success函数的问题
Aug 20 jQuery
JavaScript实现复选框全选功能
Apr 11 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
overlord人气高涨,却被菲利普频繁举报,第四季很难在国内上映
2020/05/06 日漫
php smarty模版引擎中的缓存应用
2009/12/11 PHP
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
Zend Framework入门教程之Zend_Mail用法示例
2016/12/08 PHP
js计数器代码
2006/11/04 Javascript
js 幻灯片的实现
2011/12/06 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
node.js读取文件到字符串的方法
2015/06/29 Javascript
AngularJS基础 ng-keyup 指令简单示例
2016/08/02 Javascript
JS框架之vue.js(深入三:组件1)
2016/09/29 Javascript
JavaScript浮点数及运算精度调整详解
2016/10/21 Javascript
Vue动态组件与异步组件实例详解
2019/02/23 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
在Heroku云平台上部署Python的Django框架的教程
2015/04/20 Python
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python实现将绝对URL替换成相对URL的方法
2015/06/28 Python
pycharm 2019 最新激活方式(pycharm破解、激活)
2020/09/22 Python
Python count函数使用方法实例解析
2020/03/23 Python
Python如何操作office实现自动化及win32com.client的运用
2020/04/01 Python
jupyter notebook实现显示行号
2020/04/13 Python
python 弧度与角度互转实例
2020/04/15 Python
TensorFlow打印输出tensor的值
2020/04/19 Python
对Keras中predict()方法和predict_classes()方法的区别说明
2020/06/09 Python
Python+Dlib+Opencv实现人脸采集并表情判别功能的代码
2020/07/01 Python
Python在字符串中处理html和xml的方法
2020/07/31 Python
利用HTML5+css3+jquery+weui实现仿微信聊天界面功能
2018/01/08 HTML / CSS
HTML5开发动态音频图的实现
2020/07/02 HTML / CSS
优秀毕业生自我鉴定
2014/02/11 职场文书
会计专业导师推荐信
2014/03/08 职场文书
销售会计岗位职责
2014/03/15 职场文书
网络编辑求职信
2014/04/30 职场文书
2015年音乐教研组工作总结
2015/07/22 职场文书
go goth封装第三方认证库示例详解
2022/08/14 Golang