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 相关文章推荐
解读IE和firefox下JScript和HREF的执行顺序
Jan 12 Javascript
基于jquery的返回顶部效果(兼容IE6)
Jan 17 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
不同Jquery版本引发的问题解决
Oct 14 Javascript
使用js解决由border属性引起的div宽度问题
Nov 26 Javascript
jQuery动画效果animate和scrollTop结合使用实例
Apr 02 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
JS实现按比例缩放图片的方法(附C#版代码)
Dec 08 Javascript
js倒计时简单实现方法
Dec 17 Javascript
JS中的数组转变成JSON格式字符串的方法
May 09 Javascript
ES6 async、await的基本使用方法示例
Jun 06 Javascript
jquery实现点击左右按钮切换图片
Jan 27 jQuery
纯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 动态随机生成验证码类代码
2010/04/09 PHP
深入PHP FTP类的详解
2013/06/13 PHP
php搜索文件程序分享
2015/10/30 PHP
Zend Framework连接Mysql数据库实例分析
2016/03/19 PHP
Jquery 基础学习笔记之文档处理
2009/05/29 Javascript
jQuery DOM操作小结与实例
2010/01/07 Javascript
js确定对象类型方法
2012/03/30 Javascript
js中replace的用法总结
2013/12/27 Javascript
JS动画效果打开、关闭层的实现方法
2015/05/09 Javascript
JS+CSS实现大气的黑色首页导航菜单效果代码
2015/09/10 Javascript
JavaScript数组去重由慢到快由繁到简(优化篇)
2016/08/26 Javascript
Bootstrap3 Grid system原理及应用详解
2016/09/30 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
VUE开发一个图片轮播的组件示例代码
2017/03/06 Javascript
JavaScript运动框架 链式运动到完美运动(五)
2017/05/18 Javascript
vue-cli的eslint相关用法
2017/09/29 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
Python最基本的数据类型以及对元组的介绍
2015/04/14 Python
python实现各进制转换的总结大全
2017/06/18 Python
matplotlib savefig 保存图片大小的实例
2018/05/24 Python
python3用PIL把图片转换为RGB图片的实例
2019/07/04 Python
python多进程并发demo实例解析
2019/12/13 Python
Python使用QQ邮箱发送邮件报错smtplib.SMTPAuthenticationError
2019/12/20 Python
如何使用 Python 读取文件和照片的创建日期
2020/09/05 Python
python安装第三方库如xlrd的方法
2020/10/31 Python
Python项目打包成二进制的方法
2020/12/30 Python
windows系统Tensorflow2.x简单安装记录(图文)
2021/01/18 Python
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
群众路线个人对照检查材料
2014/09/23 职场文书
退学证明范本3篇
2014/10/29 职场文书
保姆聘用合同
2015/09/21 职场文书
使用 MybatisPlus 连接 SqlServer 数据库解决 OFFSET 分页问题
2022/04/22 SQL Server
Win11 PC上的Outlook搜索错误怎么办?
2022/07/15 数码科技