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 动态改变图片大小
Jun 11 Javascript
验证javascript中Object和Function的关系的三段简单代码
Jun 27 Javascript
浅析JavaScript中的类型和对象
Nov 29 Javascript
浅析XMLHttpRequest的缓存问题
Dec 13 Javascript
基于jQuery实现复选框的全选 全不选 反选功能
Nov 24 Javascript
jquery 根据name名获取元素的value值
Feb 27 Javascript
json的使用小结
Jun 08 Javascript
微信小程序左右滑动切换页面详解及实例代码
Feb 28 Javascript
微信小程序 五星评价功能的实现
Mar 09 Javascript
详解用webpack把我们的业务模块分开打包的方法
Jul 20 Javascript
6行代码实现微信小程序页面返回顶部效果
Dec 28 Javascript
extjs4图表绘制之折线图实现方法分析
Mar 06 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
php下批量挂马和批量清马代码
2011/02/27 PHP
深入解析fsockopen与pfsockopen的区别
2013/07/05 PHP
php中opendir函数用法实例
2014/11/15 PHP
PHP获取当前日期和时间及格式化方法参数
2015/05/11 PHP
PHP使用redis实现统计缓存mysql压力的方法
2015/11/14 PHP
搭建Vim为自定义的PHP开发工具的一些技巧
2015/12/11 PHP
php过滤htmlspecialchars() 函数实现把预定义的字符转换为 HTML 实体用法分析
2019/06/25 PHP
尝试在让script的type属性等于text/html
2013/01/15 Javascript
javascript常用对话框小集
2013/09/13 Javascript
js键盘上下左右键怎么触发function(实例讲解)
2013/12/14 Javascript
jQuery中each()方法用法实例
2014/12/27 Javascript
js+css实现的圆角边框TAB选项卡滑动门代码分享(2款)
2015/08/26 Javascript
JS实现Select的option上下移动的方法
2016/03/01 Javascript
JS中用try catch对代码运行的性能影响分析
2016/12/26 Javascript
Vue动态控制input的disabled属性的方法
2018/06/26 Javascript
使用Nuxt.js改造已有项目的方法
2018/08/07 Javascript
Vue.js实现tab切换效果
2019/07/24 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
vuex的使用步骤
2021/01/06 Vue.js
一起深入理解js中的事件对象
2021/02/06 Javascript
Python实现的爬虫功能代码
2017/06/24 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python第三方库h5py_读取mat文件并显示值的方法
2019/02/08 Python
Python多进程入门、分布式进程数据共享实例详解
2019/06/03 Python
Python 如何优雅的将数字转化为时间格式的方法
2019/09/26 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
python能否java成为主流语言吗
2020/06/22 Python
Python性能分析工具py-spy原理用法解析
2020/07/27 Python
python自动从arxiv下载paper的示例代码
2020/12/05 Python
美国新兴城市生活方式零售商:VILLA
2017/12/06 全球购物
Watch Station官方网站:世界一流的手表和智能手表
2020/01/05 全球购物
《微笑着面对生活》优秀演讲稿范文
2014/09/23 职场文书
CentOS下安装Jenkins的完整步骤
2022/04/07 Servers