在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以随意翻看很久之前的数据)

因此需要根据实际需求进行分页组件封装

以下封装的分页组件,勉强够用,但是还不够完善,有需要的用于可以再次基础上继续完善

 <template>
<el-pagination @size-change="handleSizeChange" background @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize" :total="total" :layout="layout">
<slot>
<ul class="el-pager">
<li class="number active">{{currentPage}}</li>
<li class="number" @click="handlePage(item)" v-for="item in pager">{{item}}</li>
</ul>
</slot>
</el-pagination>
</template>
<script>
export default {
props: {
currentPage: {
type: [String, Number],
default: 1
},
total: {
type: [String, Number],
default: 0
},
pageSizes: {
type: Array,
default:function(){
return [10,20,50,100,200,300,400]
}
},
pageSize: {
type: [String, Number],
default: 10
},
layout: {
type: String,
default: 'total,prev,slot,next,sizes'
}
},
data() {
return {
}
},
computed:{
pager:function(){
let pager=this.total/this.pageSize
pager=Math.ceil(pager)//总页数
if(pager<this.currentPage){
return []
}
let flag=this.currentPage+4
if(flag>pager){//大于总页数
let arr=[]
let total=pager-this.currentPage
for(let i=1;i<=total;i++){
arr.push(this.currentPage+i)
}
return arr
}else if(flag<=pager){
return [this.currentPage+1,this.currentPage+2,this.currentPage+3,this.currentPage+4]
}
}
},
methods: {
handlePage(page){
this.handleCurrentChange(page)
},
handleSizeChange(val) {
this.$emit('size-change', val)
},
handleCurrentChange(val) {
this.$emit('current-change', val)
}
}
} </script>
<style lang="scss" scoped>
.page {
text-align: center;
color: #409EFF;
} </style>

页面使用:

  1、在main.js页面全局注册分页组件

// 全局注册分页组件
import newPagination from '@/components/newPagination'
Vue.component('newPagination', newPagination)

  2、页面直接调用

 <new-pagination @current-change="handleCurrentChangeExp" :page-size=listQryExp.limit layout="total, prev, pager, next" :total=totalExp></new-pagination>

elementUI分页组件封装的更多相关文章

  1. vue element-ui 分页组件封装

    <template> <el-pagination @size-change="handleSizeChange" @current-change="h ...

  2. React后台管理系统- rc-pagination分页组件封装

    1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...

  3. 如何将angular-ui的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  4. 如何将angular-ui-bootstrap的分页组件封装成一个指令

    准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...

  5. 基于Vue封装分页组件

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

  6. 基于jQuery封装的分页组件

    前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...

  7. vue 封装分页组件

    分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...

  8. 基于jQuery封装的分页组件(可自定义设置)

    jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...

  9. vue封装分页组件

    element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> &l ...

随机推荐

  1. 用了 10 多年的 Tomcat 居然有bug !

    Java技术栈 www.javastack.cn 优秀的Java技术公众号 为了解决分布式链路追踪的问题,我们引入了实现OpenTracing的Jaeger来实现.然后我们为SpringBoot框架写 ...

  2. HNUSTOJ-1690 千纸鹤

    1690: 千纸鹤 时间限制: 1 Sec  内存限制: 128 MB提交: 992  解决: 296[提交][状态][讨论版] 题目描述  圣诞节快到了,校园里到处弥漫着粉红色的气息.又是一个情侣秀 ...

  3. 洛谷 - P3803 -【模板】多项式乘法(FFT) - NTT

    https://www.luogu.org/problemnew/show/P3803 看别人偏偏就是要用NTT去过.实验证明大概是这样用.求0~n的多项式和0~m的多项式的乘积.注意MAXN取值.A ...

  4. Android 开发环境部署

    引言   在windows安装Android的开发环境不简单也说不上算复杂,本文写给第一次想在自己Windows上建立Android开发环境投入Android浪潮的朋友们,为了确保大家能顺利完成开发环 ...

  5. Python 中Semaphore 信号量对象、Event事件、Condition

    Semaphore 信号量对象 信号量是一个更高级的锁机制.信号量内部有一个计数器而不像锁对象内部有锁标识,而且只有当占用信号量的线程数超过信号量时线程才阻塞.这允许了多个线程可以同时访问相同的代码区 ...

  6. 2019-11-26-Resharper-去掉注释拼写

    title author date CreateTime categories Resharper 去掉注释拼写 lindexi 2019-11-26 8:42:5 +0800 2018-09-04 ...

  7. 高可用4层lvs——keepalived

    搭建方式: node01: ipvsadm -C ifconfig eth0:2 down --------------------------------- node01,node04安装keepa ...

  8. C#索引器3 重载

    7.索引器  重载 public class Demo { private Hashtable name = new Hashtable(); public string this[int index ...

  9. Spring Boot 使用Mybatis注解开发增删改查

    使用逆向工程是遇到的错误 错误描述 org.apache.ibatis.binding.BindingException: Invalid bound statement (not found): c ...

  10. [CF852D] Exploration plan

    问题描述 The competitors of Bubble Cup X gathered after the competition and discussed what is the best w ...