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

  样式,逻辑,和引用

  首先新建一个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. CDMA原理

    CDMA原理——特点 CDMA具有抗多径干扰.抗窄带干扰.抗认为干扰.抗多径延迟扩展的能力.同时有提高蜂窝系统的通信容量和便于模拟与数字体制的共存与过渡等优点.与TDMA技术形成强劲的竞争力. 与FD ...

  2. POJ 3181 Dollar Dayz ( 完全背包 && 大数高精度 )

    题意 : 给出目标金额 N ,问你用面额 1~K 拼成 N 的方案有多少种 分析 : 完全背包的裸题,完全背包在 DP 的过程中实际就是列举不同的装填方案数来获取最值的 故状态转移方程为 dp[i] ...

  3. Java——动态绑定和多态

    动态绑定是在执行期间(而不是编译期间)判断所用对象的实际类型,根据其实际的类型调用其相应的方法(确定选择哪个多态形式被调用). 首先是方法的参数是父类对象,传入子类对象是否可行 然后引出Parent ...

  4. SQL 查询表字段长度, 名称, 类型, 存储过程创建和修改时间

    获取存储过程的修改时间和创建时间查询建立时间 --表 select * from sysobjects where id=object_id(N'表名') and xtype='U' --表的结构 s ...

  5. CSS的一些单位,如rem、px、em、vw、vh、vm

    总结了一下一些单位的不同 px:像素(pixel)相对长度单位,,是相对于屏幕显示器分辨率而言的: em:em的值并不是固定的,会集成父级元素的字体大小: 注意: 1.body选择其中声明Font-s ...

  6. C++ 对象间通信框架 V2.0 ××××××× 之(五)

    类定义: ======================================================================= // MemberFuncPointer.h: ...

  7. permutation 1

    permutation 1 #include<bits/stdc++.h> using namespace std; ]; void init() { ; i<=; i++)A[i] ...

  8. SpringBoot项目属性配置-第二章

    SpringBoot入门 1. 相信很多人选择Spring Boot主要是考虑到它既能兼顾Spring的强大功能,还能实现快速开发的便捷.我们在Spring Boot使用过程中,最直观的感受就是没有了 ...

  9. 使用vue技术应当使用的技术和兼容性选择

    假如你的前端框架使用了vue,那你可以大胆地使用以下技术,并忽略其他js和css的兼容性问题,因为 关于vue的兼容性 官方给出了规定 Vue 不支持 IE8 及以下版本,因为 Vue 使用了 IE8 ...

  10. java虚拟机规范-运行时数据区

    前言 java虚拟机是java跨平台的基石,本文的描述以jdk7.0为准,其他版本可能会有一些微调. 引用 java虚拟机规范 数据类型 java总共有两种数据类型:基本类型和引用类型.java虚拟机 ...