实现分页组件要分三个部分

  样式,逻辑,和引用

  首先新建一个vue文件用来承载组件内容

  第一步:构建样式 

  <template>
    <nav>
    <ul class="pagination">
    <li :class="{'disabled': current == 1}"><a href="javascript:;" @click="setCurrent(current - 1)"> <img src="../../../assets/btnleft.png" alt=""> </a></li>
    <li v-for="(p,index) in grouplist" :class="{'active': current == p.val}" :key="index"><a href="javascript:;" @click="setCurrent(p.val)"> {{ p.text }} </a>
    </li>
    <li :class="{'disabled': current == page}"><a href="javascript:;" @click="setCurrent(current + 1)"> <img src="../../../assets/btnright.png" alt=""></a></li>
    </ul>
    </nav>
  </template> 

  <style scope="scope">
    .pagination {
      overflow: hidden;
      display: table;
      margin: 0 auto;
      height: 50px;
    }
    .pagination li {
      float: left;
      height: 30px;
      border-radius: 5px;
      margin: 3px;
    }
    .pagination li img{
      width:100%;
      height:100%;
     }
    .pagination li:hover{
      background: #1E7FED;
    }
    .pagination li:hover a{
      color: #fff;
    }
    .pagination a {
      display: block;
      width: 30px;
      height: 30px;
      text-align: center;
      line-height: 30px;
      font-size: 12px;
      border-radius: 5px;
      text-decoration: none;
      border:1px solid rgba(221,221,221,1);
      color: #666666;
    }
    .pagination .active {
      background: #1E7FED !important;
    }
    .active >a{
      color:white;
    }
  </style>

第二步:编写逻辑  

<script>
export default{
data(){
return {
current: this.currentPage
}
},
props: {
total: {// 数据总条数
type: Number,
default: 0
},
display: {// 每页显示条数
type: Number,
default: 20
},
currentPage: {// 当前页码
type: Number,
default: 1
},
pagegroup: {// 分页条数
type: Number,
default: 20,
coerce: function (v) {
v = v > 0 ? v : 20;
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>

第三步:引用组件

  1.在父组件中引入并注册

components: {
   "v-pagination": Paging,
},
2.在data下声明三个变量

total:0, // 记录总条数

display: 10, // 每页显示条数

current: 1, // 当前的页数

3.挂载

<v-pagination v-if="totals > 0" :total="totals" :current-page='current' @pagechange="pagechange"></v-pagination>
4.添加事件
pagechange:function(currentPage){
    // console.log(currentPage);
  //该参数就是当前点击的页码数
}

Vue 实现一个分页组件的更多相关文章

  1. 基于vue2.0的一个分页组件

    分页组件在项目中经常要用到之前一直都是在网上找些jq的控件来用(逃..),最近几个项目用上vue了项目又刚好需要一个分页的功能.于是百度发现几篇文章介绍的实在方式有点复杂, 没耐心看自己动手造轮子写了 ...

  2. 使用vue完成一个分页效果

    基于 element-ui 分页组件实现分页效果 效果如下: 使用说明: 0.首先在头部引入需要的外部文件 1.从element官方网页中复制想要的组件代码直接放入body中 2.编写逻辑代码 3.完 ...

  3. vue中使用分页组件、将从数据库中查询出来的数据分页展示(前后端分离SpringBoot+Vue)

    文章目录 1.看实现的效果 2.前端vue页面核心代码 2.1. 表格代码(表格样式可以去elementui组件库直接调用相应的) 2.2.分页组件代码 2.3 .script中的代码 3.后端核心代 ...

  4. 使用Vue实现一个树组件

    HTML代码: <!DOCTYPE html> <html> <head> <title>Vue Demo</title> <meta ...

  5. 基于Vue封装分页组件

    使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...

  6. asp.mvc中的vue分页实例,分页组件无法重置reload,解决点击查询按钮后,分页不刷新的问题

    刚刚接触Vue.js,现在需要做一个查询功能,并且进行服务端分页.主要思路是在页面中注册一个分页组件,然后进行调用.代码如下 1.引用vue.js,具体去网上下载 2.在html的body中添加如下代 ...

  7. 基于 bootstrap 的 vue 分页组件

    申手党点这里下载示例 基于 bootstrap 的 vue 分页组件,我想会有那么一部分同学,在使用Vue的时候不使用单文件组件,因为不架设 NodeJS 服务端.那么网上流传的 *.vue 的各种分 ...

  8. Vue 2.0 pagination分页组件

    最近写了一个分页组件,效果如下图: f-pagination.js文件 Vue.component('f-pagination',{ template:'<div class="fPa ...

  9. 基于Vue的简单通用分页组件

    分页组件是每一个系统里必不可少的一个组件,分页组件分为两部分.第一部分是模版部分,用于显示当前分页组件的状态,例如正在获取数据.没有数据.没有下一页等等:第二部分是分页数据对象,用于封装一个分页组件的 ...

随机推荐

  1. window7下docker toolbox 启用数据卷报错: Error response from daemon: invalid mode:

    场景:希望把d:\dockerShare文件夹作为数据卷 ,和docker中的centos镜像生成的容器关联. 原来的命令: docker run -d -it --name=edc-centos7 ...

  2. mysql CREATE DATABASE语句 语法

    mysql CREATE DATABASE语句 语法 作用:创建数据库. 大理石构件 语法:CREATE DATABASE database_name mysql CREATE DATABASE语句 ...

  3. 最短路(模板)【CodeChef CLIQUED,洛谷P3371】

    自TG滚粗后咕咕咕了这么久,最近重新开始学OI,也会慢慢开始更博了.... 最短路算法经典的就是SPFA(Bellman-Ford),Dijkstra,Floyd: 本期先讲两个经典的单源最短路算法: ...

  4. 题解 P1433 【吃奶酪】

    这道题是一道著名的NP问题. 正解应该是DP,但我在这里讲一种近似算法--爬山. 希望某些dalao注意一下爬山与模拟退火的区别. 爬山是直往低处往高处爬,每次取大的,也就是一种贪心思想. 而模拟退火 ...

  5. HDU 1002 A - A + B Problem II (大数问题)

    原题代号:HDU 1002 原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=1002 原题描述: Problem Description I have a ...

  6. 170906-MyBatis续

    ===============================================Dynamic SQL========================================== ...

  7. K-th occurrence HDU - 6704 (后缀数组+二分线段树+主席树)

    大意: 给定串s, q个询问(l,r,k), 求子串s[l,r]的第kk次出现位置. 这是一篇很好的题解: https://blog.csdn.net/sdauguanweihong/article/ ...

  8. Understanding RequireJS for Effective JavaScript Module Loading

    Modular programming is used to break large applications into smaller blocks of manageable code. Modu ...

  9. 转:SqlBulkCopy类进行大数据(一万条以上)插入测试

    转自:https://www.cnblogs.com/LenLi/p/3903641.html 结合博主实例,自己测试了一下,把数据改为3万行更明显!! 关于上一篇博客中提到的,在进行批量数据插入数据 ...

  10. 图像bayer格式介绍【转】

    本文转载自:http://www.cnblogs.com/whw19818/p/6223143.html 1 图像bayer格式介绍 bayer格式图片是伊士曼·柯达公司科学家Bryce Bayer发 ...