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、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
Javascript URI 解析介绍
Mar 15 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
解析Node.js异常处理中domain模块的使用方法
Feb 16 Javascript
移动适配的几种方案(三种方案)
Nov 25 Javascript
javascript基本数据类型及类型检测常用方法小结
Dec 14 Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
vue中使用cropperjs的方法
Mar 01 Javascript
详解es6超好用的语法糖Decorator
Aug 01 Javascript
一个Vue视频媒体多段裁剪组件的实现示例
Aug 09 Javascript
在Vue里如何把网页的数据导出到Excel的方法
Sep 30 Javascript
纯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汉字转拼音的示例
2014/02/27 PHP
一个php短网址的生成代码(仿微博短网址)
2014/05/07 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
简单实用的PHP防注入类实例
2014/12/05 PHP
SyntaxHighlighter代码加色使用方法
2008/09/07 Javascript
javascript 写的一个简单的timer
2009/07/30 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
解决jquery中美元符号命名冲突问题
2014/01/08 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
vue中阻止click事件冒泡,防止触发另一个事件的方法
2018/02/08 Javascript
js将键值对字符串转为json字符串的方法
2018/03/30 Javascript
js统计页面上每个标签的数量实例代码
2018/05/29 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
举例讲解Linux系统下Python调用系统Shell的方法
2015/11/07 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Windows系统Python直接调用C++ DLL的方法
2019/08/01 Python
Python使用mongodb保存爬取豆瓣电影的数据过程解析
2019/08/14 Python
python单向循环链表原理与实现方法示例
2019/12/03 Python
python小项目之五子棋游戏
2019/12/26 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
Python-openpyxl表格读取写入的案例详解
2020/11/02 Python
PyCharm常用配置和常用插件(小结)
2021/02/06 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
HTML5 Canvas的事件处理介绍
2015/04/24 HTML / CSS
越南母婴用品购物网站:Kids Plaza
2020/04/09 全球购物
优秀毕业生就业推荐信
2014/05/22 职场文书
优秀毕业生自荐信
2014/06/10 职场文书
三方股东合作协议书
2014/10/28 职场文书
2015年教师党员自我评价材料
2015/03/04 职场文书
技能培训通讯稿
2015/07/18 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书
《猴王出世》教学反思
2016/02/23 职场文书
MySQL优化及索引解析
2022/03/17 MySQL