vue实现分页组件
创建pagination.vue
/*
* 所需参数
* total Number 总页数
* current Number 当前页面下标
* pageSize Number 页面显示条数
* sizes Array 页面条数容器数组
* jump(index) function 重新获取数据的方法
* getPageSize(index) function 更改页面显示条数的方法
*/
<style lang="less">
@color:#1199F0;
.page-wrapper{
padding:20px 10px;
ul{
overflow: hidden;
display: table;
margin: auto;
height: 50px;
list-style: none;
li{
float:left;
}
}
.paging-size{
height:30px;
margin-right:20px;
select{
width:50px;
height:30px;
text-align:center;
border:1px solid @color;
}
}
.paging-item{
height: 30px;
line-height: 30px;
margin: 3px;
padding-left:12px;
padding-right:12px;
border-radius: 5px;
font-size: 12px;
color: #;
cursor: pointer;
&:hover,&.current{
color:#fff;
background-color: @color;
}
}
.paging-jump{
margin-left:20px;
margin-top:3px;
height:30px;
font-size:;
overflow: hidden;
input[type="number"]{
float: left;
padding: 5px;
width:50px;
height:28px;
text-align:center;
border:1px solid @color;
}
input[type="button"]{
float: left;
padding: 12px;
height:30px;
border:none;
color:#fff;
background-color: @color;
}
}
}
</style>
<template>
<div class="page-wrapper">
<ul>
<li class="paging-size">
<select @change="getPageSize">
<option v-for="i in sizes" :value="i" :selected="i==pageSize">{{i}}</option>
</select>
</li>
<li class="paging-item" v-if="current!=1" @click='jump(1)'>首页</li>
<li class="paging-item" v-if="current-1>0" @click='jump(current-1)'>上一页</li>
<li class="paging-item" v-if="current-2>0" @click='jump(current-2)'>{{current-}}</li>
<li class="paging-item" v-if="current-1>0" @click='jump(current-1)'>{{current-}}</li>
<li class="paging-item current" @click='jump(current)'>{{current}}</li>
<li class="paging-item" v-if="total-current>1" @click='jump(current+1)'>{{current+}}</li>
<li class="paging-item" v-if="total-current>2" @click='jump(current+2)'>{{current+}}</li>
<li class="paging-item" v-if="total-current>1" @click='jump(current+1)'>下一页</li>
<li class="paging-item" v-if="current!=total" @click='jump(total)'>尾页</li>
<li class="paging-jump">
<input type="number" v-model="jumpPage" :max="total" min=""/>
<input type="button" value="跳转" @click='jump(jumpPage)'/>
</li>
</ul>
</div>
</template>
<script>
export default {
data(){
return {
jumpPage:
}
},
props:{
total:Number,
current:Number,
pageSize:Number,
sizes:{
type:Array,
default:function(){
return [,,]
}
}
},
mounted(){
if(this.total-this.current>){
this.jumpPage=this.current+;
}
else{
this.jumpPage=;
}
},
watch:{
current(){
if(this.total-this.current>){
this.jumpPage=this.current+;
}
else{
this.jumpPage=;
}
}
},
methods:{
jump(index){
index=Number(index);
if (this.current != index && index > && index < this.total + ) {
this.$emit('jump', index);
}
},
getPageSize(e){
let pageSize=Number(e.target.value);
this.$emit('getPageSize',pageSize);
}
}
}
</script>
index.vue中注册
components:{
'v-pagination':(resolve)=>{
require(['components/pagination'],resolve);
}
}
index.vue中使用
<v-pagination
:total="total"
:current="current"
:pageSize="pageSize"
@getPageSize="getPageSize"
@jump="jump"
></v-pagination>
完整index.vue代码
<template>
<div class="wrapper" v-swipeleft='left' v-swiperight='right'>
<v-pagination
:total="total"
:current="current"
:pageSize="pageSize"
@getPageSize="getPageSize"
@jump="jump"
></v-pagination>
</div>
</template> <script>
export default {
data () {
return {
total:,
current:,
pageSize:
}
},
methods:{
jump(index){
this.current=index;
},
getPageSize(pageSize){
this.pageSize=pageSize;
}
},
components:{
'v-pagination':(resolve)=>{
require(['components/pagination'],resolve);
}
}
}
</script>
<style lang="less" scoped="scoped">
.wrapper{
height:%;
width:%;
}
</style>
vue实现分页组件的更多相关文章
- 基于Vue封装分页组件
使用Vue做双向绑定的时候,可能经常会用到分页功能 接下来我们来封装一个分页组件 先定义样式文件 pagination.css ul, li { margin: 0px; padding: 0px;} ...
- 基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
- vue 封装分页组件
分页 一般都是调接口, 接口为这种格式 {code: 0, msg: "success",…} code:0 data:{ content:[{content: "11& ...
- semantic、vue 使用分页组件和日历插件
最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...
- vue 自定义分页组件
vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...
- vue自定义分页组件---切图网
vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...
- vue封装分页组件
element提供的分页是已经封装好的组件,在这里再次封装是为了避免每个用到分页的页面点击跳转时都要写一遍跳转请求 分页组件 <!--分页组件--> <template> &l ...
- vue element-ui 分页组件封装
<template> <el-pagination @size-change="handleSizeChange" @current-change="h ...
- vue的分页组件
<template> <div class="page-nav"> <div class="page-btn-wrap"> ...
随机推荐
- springboot swagger2注解使用
swagger2 注解整体说明 @Api:用在请求的类上,表示对类的说明 tags="说明该类的作用,可以在UI界面上看到的注解" value="该参数没什么意义,在UI ...
- PostgreSQL中的Toast Pointer
1.分析背景 在使用数据库的过程中(PG的版本为9.2),遇到了错误"missing chunk number 0 for toast value XX in pg_toast_2619&q ...
- git安装和使用配置
1.简介 Git是一个开源的分布式版本控制系统,能用于快速高效地处理任何或小或大的项目,它是Linus Torvalds为了帮助管理Linux内核开发而开发的一个源码开放的版本控制软件. 2.Linu ...
- thinkphp漏洞如何修复
THINKPHP漏洞修复,官方于近日,对现有的thinkphp5.0到5.1所有版本进行了升级,以及补丁更新,这次更新主要是进行了一些漏洞修复,最严重的就是之前存在的SQL注入漏洞,以及远程代码执行查 ...
- 集合单列--Colletion
集合 学习集合的目标: 会使用集合存储数据 会遍历集合,把数据取出来 掌握每种集合的特性 集合和数组的区别 数组的长度是固定的.集合的长度是可变的. 数组中存储的是同一类型的元素,可以存储基本数据类型 ...
- golang学习笔记--包导入及go 常用命令及参数
包导入:包导入路劲即代码包在工作区的src目录下的相对路径. 同一个源码文件中导入的多个代码包的最后一个元素不能重复,否则引起编译错误,如果只导入不使用,同样会引起编译错误 若想导入最后一个元素名相同 ...
- Wamp Https 的 SSL认证 配置说明
Wamp Https 的 SSL认证 配置说明版本 Apache2.2.11注:右下角图标的 重启 不能有效加载 配置文件 应退出后重新运行注:C:\wamp\bin\apache\Apache2.2 ...
- vs2015下编译免费开源的jpeg库,ijg的jpeg.lib
vs2015下编译免费开源的jpeg库,ijg的jpeg.lib 1. 去Independent JPEG Group官网www.ijg.org下载jpegsrc,我下载的版本是jpegsrc9c.z ...
- HashMap源码原理
HashMap源码解析(负载因子,树化策略,内部hash实现,resize策略) 内部属性: 负载因子: final float loadFactor(默认为0.75f) 实际容量: int thre ...
- c#十进制转换
1.方法定义 /// <summary> /// 十进制转换 /// </summary> /// <param name="hexChar"> ...