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 相关文章推荐
Javascript 自适应高度的Tab选项卡
Apr 05 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
Jul 25 Javascript
JavaScript事件处理器中的event参数使用介绍
May 24 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 Javascript
Listloading.js移动端上拉下拉刷新组件
Aug 04 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
非常实用的vue导航钩子
Mar 20 Javascript
swiper在vue项目中loop循环轮播失效的解决方法
Sep 15 Javascript
小程序实现录音功能
Sep 22 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生成带有雪花背景的验证码
2006/10/09 PHP
ajax缓存问题解决途径
2006/12/06 PHP
深入apache host的配置详解
2013/06/09 PHP
创建一个复制UBB软件信息的链接或按钮的js代码
2008/01/06 Javascript
Prototype 工具函数 学习
2009/07/23 Javascript
用js调用迅雷下载代码的二种方法
2013/04/15 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(上)
2015/10/28 Javascript
jQuery中判断对象是否存在的方法汇总
2016/02/24 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
JS输出空格的简单实现方法
2016/09/08 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
jQuery的$.extend 浅拷贝与深拷贝
2017/03/08 Javascript
javascript实现数据双向绑定的三种方式小结
2017/03/09 Javascript
利用Ionic2 + angular4实现一个地区选择组件
2017/07/27 Javascript
layui点击按钮添加可编辑的一行方法
2018/08/15 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
2018/08/28 Javascript
对于防止按钮重复点击的尝试详解
2019/04/22 Javascript
微信小程序实现音频文件播放进度的实例代码
2020/03/02 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
python判断字符串是否纯数字的方法
2014/11/19 Python
pycharm安装图文教程
2017/05/02 Python
Python读取mat文件,并保存为pickle格式的方法
2018/10/23 Python
python广度优先搜索得到两点间最短路径
2019/01/17 Python
从0开始的Python学习016异常
2019/04/08 Python
python缩进长度是否统一
2020/08/02 Python
Html5之svg可缩放矢量图形_动力节点Java学院整理
2017/07/17 HTML / CSS
网络方面基础面试题
2012/11/16 面试题
咖啡店的创业计划书,让你hold不住
2014/01/03 职场文书
违反课堂纪律检讨书
2014/01/19 职场文书
九年级历史教学反思
2014/01/27 职场文书
春节请假条
2014/04/11 职场文书
小学作文评语大全
2014/04/21 职场文书
经典毕业生求职信
2014/07/12 职场文书
八项规定对照检查材料
2014/08/31 职场文书
入党现实表现材料
2014/12/23 职场文书
清明节扫墓活动总结
2015/02/09 职场文书