elementUI分页组件封装
在实际开发需求,产品需要的分页组件比较简单,只可以一页页地翻,就是为了防止用于直接翻看最后的数据(因为有一些历史数据数据量比较大,查看的意义不大,检索效率比较低也比较忙,因为不希望用户在翻页的时候可以随意翻看很久之前的数据)
因此需要根据实际需求进行分页组件封装
以下封装的分页组件,勉强够用,但是还不够完善,有需要的用于可以再次基础上继续完善
<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分页组件封装的更多相关文章
- vue element-ui 分页组件封装
<template> <el-pagination @size-change="handleSizeChange" @current-change="h ...
- React后台管理系统- rc-pagination分页组件封装
1.用户列表页面使用的rc-pagination分页组件 Github地址: https://github.com/react-component/pagination 2.安装 cnpm insta ...
- 如何将angular-ui的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- 如何将angular-ui-bootstrap的分页组件封装成一个指令
准备工作: (1)一如既往的我还是使用了requireJS进行js代码的编译 (2)必须引入angualrJS , ui-bootstrap-tpls-1.3.2.js , bootstrap.css ...
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- 基于jQuery封装的分页组件
前言: 由于项目需要实现分页效果,上jQuery插件库找了下,但是木有找到自己想要的效果,于是自己封装了个分页组件. 思路: 主要是初始化时基于原型建立的分页模板然后绑定动态事件并实现刷新DOM的分页 ...
- vue 封装分页组件
分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...
- 基于jQuery封装的分页组件(可自定义设置)
jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个.在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我 ...
- vue封装分页组件
element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> &l ...
随机推荐
- npm errno -4048错误
这种错误是缓存原因导致的,首先清除缓存 npm cache clean --force 然后校验缓存依赖的完整和有效性 npm cache verify 最后重新安装即可
- 在Visual studio 2017中使用EF6连接MySQL
在Visual studio 2017中使用EF6连接Mysql ADO.NET Entity Framework 是微软以 ADO.NET 为基础所发展出来的对象关系对应 (O/R Mapping) ...
- 华为云搭建windows+wordpress+xampp
1.如何将本地文件上传至华为云ECS云服务器(Windows系统) 1.1 在本地电脑上,快捷键“WIN+R"打开“运行”中输入“mstsc”,点击确定 1.2 在“远程桌面连接”框点击“ ...
- Java web项目 本地配置https调试
一.创建密匙 网上有很多教程,就不在此赘述了. 假设最后生成的密匙为tomcat.keystore 密码为123456. 二.配置tomcat 首先,将密匙移到tomcat下根目录下. 进入conf文 ...
- uwsgi支持http长链接
http1.1支持长链接,而http1.0不支持,所以,在切换http版本号或者升级服务端版本时候,尤其要注意这个造成的影响. 当客户端以http1.1长链接方式连接服务端时,服务端如果不支持1.1, ...
- 1122. Hamiltonian Cycle (25)
The "Hamilton cycle problem" is to find a simple cycle that contains every vertex in a gra ...
- HTML/CSS实现文字环绕图片布局
原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...
- Python 基本数据类型详解
1.数字 int(整型) 在32位机器上,整数的位数为32位,取值范围为-2**31-2**31-1,即-2147483648-2147483647在64位系统上,整数的位数为64位,取值范围为-2* ...
- springboot easyexcel
pom..xml <dependency> <groupId>com.alibaba</groupId> <artifactId>easyexcel&l ...
- quartz 时间配置
Quartz中时间表达式的设置-----corn表达式 (注:这是让我看比较明白的一个博文,但是抱歉,没有找到原作者,如有侵犯,请告知) 时间格式: <!-- s m h d m w(?) y( ...