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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
jQuery EasyUI 中文API Button使用实例
Apr 14 Javascript
jQuery中DOM操作实例分析
Jan 23 Javascript
javascript实现uploadify上传格式以及个数限制
Nov 23 Javascript
各种选择框jQuery的选中方法(实例讲解)
Jun 27 jQuery
vue watch深度监听对象实现数据联动效果
Aug 16 Javascript
JavaScript寄生组合式继承原理与用法分析
Jan 11 Javascript
vue-router命名视图的使用讲解
Jan 19 Javascript
JS原型与继承操作示例
May 09 Javascript
js实现简单选项卡制作
Aug 05 Javascript
深入了解Vue3模板编译原理
Nov 19 Vue.js
浅谈JS的二进制家族
May 09 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使用Cookie控制访问授权的方法
2015/01/21 PHP
百度地图API使用方法详解
2015/08/25 PHP
thinkphp整合微信支付代码分享
2016/11/24 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
可以把编码转换成 gb2312编码lib.UTF8toGB2312.js
2007/08/21 Javascript
用JavaScript实现类似于ListBox功能示例代码
2014/03/09 Javascript
用js一次改变多个input的readonly属性值的方法
2014/06/11 Javascript
实例讲解JQuery中this和$(this)区别
2014/12/08 Javascript
jquery+ajax实现跨域请求的方法
2015/01/20 Javascript
node.js调用C++开发的模块实例
2015/07/03 Javascript
Javascript 计算字符串在localStorage中所占字节数
2015/10/21 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
JS触摸屏网页版仿app弹窗型滚动列表选择器/日期选择器
2016/10/30 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
jQuery插件zTree实现更新根节点中第i个节点名称的方法示例
2017/03/08 Javascript
js实现瀑布流效果(自动生成新的内容)
2017/03/16 Javascript
JavaScript实现隐藏省略文字效果的方法
2017/04/27 Javascript
js实现加载页面就自动触发超链接的示例
2017/08/31 Javascript
JS实现百度网盘任意文件强制下载功能
2018/08/31 Javascript
jquery层次选择器的介绍
2019/01/18 jQuery
layui lay-verify form表单自定义验证规则详解
2019/09/18 Javascript
Android分包MultiDex策略详解
2017/10/30 Python
python利用Excel读取和存储测试数据完成接口自动化教程
2020/04/30 Python
python 利用matplotlib在3D空间中绘制平面的案例
2021/02/06 Python
Expedia韩国官网:亚洲发展最快的在线旅游门户网站
2018/02/26 全球购物
Sunglasses Shop英国:欧洲领先的太阳镜在线供应商之一
2018/09/19 全球购物
芬兰设计商店美国:Finnish Design Shop US
2019/03/25 全球购物
数学系个人求职信范文
2014/01/30 职场文书
致400米运动员广播稿
2014/02/07 职场文书
国际商贸专业自荐信
2014/06/09 职场文书
外贸采购员岗位职责
2015/04/03 职场文书
中国古代史学名著《战国策》概述
2019/08/09 职场文书
Mac环境Nginx配置和访问本地静态资源的实现
2021/03/31 Servers
Django模型层实现多表关系创建和多表操作
2021/07/21 Python
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技