vue2.0实现分页组件的实例代码


Posted in Javascript onJune 22, 2017

最近使用vue2.0重构项目, 需要实现一个分页的表格, 没有找到合适的分页组件, 就自己写了一个, 效果如下:

vue2.0实现分页组件的实例代码

该项目是使用 vue-cli搭建的, 如果你的项目中没有使用webpack,请根据代码自己调整:

首先新建pagination.vue文件, 所有组件的代码都写在这里, 写这样的组件并没有什么太大的难度, 主要是解决父子组件之间值传递的问题

<template>
 <nav>
  <ul class="pagination">
   <li :class="{'disabled': current == 1}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(current - 1)"> « </a></li>
   <li :class="{'disabled': current == 1}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(1)"> 首页 </a></li>
   <li v-for="p in grouplist" :class="{'active': current == p.val}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" 
                                     @click="setCurrent(p.val)"> {{ p.text }} </a>
   </li>
   <li :class="{'disabled': current == page}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(page)"> 尾页 </a></li>
   <li :class="{'disabled': current == page}"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="setCurrent(current + 1)"> »</a></li>
  </ul>
 </nav>
</template>
<script type="es6">
 export default{
  data(){
   return {
    current: this.currentPage
   }
  },
  props: {
   total: {// 数据总条数
    type: Number,
    default: 0
   },
   display: {// 每页显示条数
    type: Number,
    default: 10
   },
   currentPage: {// 当前页码
    type: Number,
    default: 1
   },
   pagegroup: {// 分页条数
    type: Number,
    default: 5,
    coerce: function (v) {
     v = v > 0 ? v : 5;
     return v % 2 === 1 ? v : v + 1;
    }
   }
  },
  computed: {
   page: function () { // 总页数
    return Math.ceil(this.total / this.display);
   },
   grouplist: function () { // 获取分页页码
    var len = this.page, temp = [], list = [], count = Math.floor(this.pagegroup / 2), center = this.current;
    if (len <= this.pagegroup) {
     while (len--) {
      temp.push({text: this.page - len, val: this.page - len});
     }
     ;
     return temp;
    }
    while (len--) {
     temp.push(this.page - len);
    }
    ;
    var idx = temp.indexOf(center);
    (idx < count) && ( center = center + count - idx);
    (this.current > this.page - count) && ( center = this.page - count);
    temp = temp.splice(center - count - 1, this.pagegroup);
    do {
     var t = temp.shift();
     list.push({
      text: t,
      val: t
     });
    } while (temp.length);
    if (this.page > this.pagegroup) {
     (this.current > count + 1) && list.unshift({text: '...', val: list[0].val - 1});
     (this.current < this.page - count) && list.push({text: '...', val: list[list.length - 1].val + 1});
    }
    return list;
   }
  },
  methods: {
   setCurrent: function (idx) {
    if (this.current != idx && idx > 0 && idx < this.page + 1) {
     this.current = idx;
     this.$emit('pagechange', this.current);
    }
   }
  }
 }
</script>
<style lang="less">
 .pagination {
  overflow: hidden;
  display: table;
  margin: 0 auto;
  /*width: 100%;*/
  height: 50px;
 li {
  float: left;
  height: 30px;
  border-radius: 5px;
  margin: 3px;
  color: #666;
 &
 :hover {
  background: #000;
 a {
  color: #fff;
 }
 }
 a {
  display: block;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  font-size: 12px;
  border-radius: 5px;
  text-decoration: none
 }
 }
 .active {
  background: #000;
 a {
  color: #fff;
 }
 }
 }
</style>

使用时, 在父组件中引入, 代码如下:

<template>
        <v-pagination :total="total" :current-page='current' @pagechange="pagechange"></v-pagination>
</template>
<script type="es6">
  import pagination from '@/components/common/pagination/pagination'
export default{
    data(){
 return {
        total: 150,     // 记录总条数
        display: 10,   // 每页显示条数
        current: 1,   // 当前的页数
},
 methods: {
     pagechange:function(currentPage){
       console.log(currentPage);
       // ajax请求, 向后台发送 currentPage, 来获取对应的数据
     }
   },
components: {
      'v-pagination': pagination,
    }
}
</script>

至此, 一个基于 vue2.0 的分页组件就完成了

Javascript 相关文章推荐
JS 各种网页尺寸判断实例方法
Apr 18 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
javascript获取dom的下一个节点方法
Sep 05 Javascript
兼容Firefox的Javascript XSLT 处理XML文件
Dec 31 Javascript
javascript Slip.js实现整屏滑动的手机网页
Nov 25 Javascript
JavaScript数据结构与算法之栈与队列
Jan 29 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
layui 动态设置checbox 选中状态的例子
Sep 02 Javascript
详解element-ui中表单验证的三种方式
Sep 18 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 Javascript
浅析JavaScript中的事件委托机制跟深浅拷贝
Jan 20 Javascript
vue Element-ui表格实现树形结构表格
Jun 07 Vue.js
纯JS实现只能输入数字的简单代码
Jun 21 #Javascript
详解ElementUI之表单验证、数据绑定、路由跳转
Jun 21 #Javascript
Vue实现百度下拉提示搜索功能
Jun 21 #Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 #Javascript
jQuery实现可拖动进度条实例代码
Jun 21 #jQuery
详解Vue整合axios的实例代码
Jun 21 #Javascript
详解在vue-cli项目中安装node-sass
Jun 21 #Javascript
You might like
php 抽象类的简单应用
2011/09/06 PHP
PHP检测用户是否关闭浏览器的方法
2016/02/14 PHP
php版微信开发Token验证失败或请求URL超时问题的解决方法
2016/09/23 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
php+iframe 实现上传文件功能示例
2020/03/04 PHP
jQuery Autocomplete自动完成插件
2010/07/17 Javascript
js类式继承的具体实现方法
2013/12/31 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
jQuery 操作input中radio的技巧
2016/07/18 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
JavaScript提高加载和执行效率的方法
2017/02/03 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
JS浅拷贝和深拷贝原理与实现方法分析
2019/02/28 Javascript
jQuery实现文本显示一段时间后隐藏的方法分析
2019/06/20 jQuery
详解package.json版本号规则
2019/08/01 Javascript
mapboxgl实现带箭头轨迹线的代码
2021/01/04 Javascript
[01:50]2014DOTA2西雅图邀请赛 专访欢乐周宝龙
2014/07/08 DOTA
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python正则表达式教程之三:贪婪/非贪婪特性
2017/03/02 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
用scikit-learn和pandas学习线性回归的方法
2019/06/21 Python
Keras 使用 Lambda层详解
2020/06/10 Python
Python 如何实现访问者模式
2020/07/28 Python
CSS3制作Dropdown下拉菜单的方法
2015/07/18 HTML / CSS
html5 音乐播放器 audio 标签使用概述
2013/07/15 HTML / CSS
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
草莓网官网:StrawberryNET
2019/08/21 全球购物
英国豪华家具和经典家居饰品购物网站:OKA
2020/06/05 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
八项规定整改措施
2014/02/12 职场文书
社区清明节活动总结
2014/07/04 职场文书
2014个人四风对照检查材料思想汇报
2014/09/18 职场文书
单方投资意向书
2015/05/11 职场文书
现货白银电话营销话术
2015/05/29 职场文书