创建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实现分页组件的更多相关文章

  1. 基于Vue封装分页组件

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

  2. 基于iview 封装一个vue 表格分页组件

    iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...

  3. vue 封装分页组件

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

  4. semantic、vue 使用分页组件和日历插件

    最近正在试试semantic-ui,结合了vue,这里忍不住吐槽semantic和vue的友好度简直不忍直视,不过既然用了,这里就分享几个用到的插件了 1.分页组件(基于vue) var pageCo ...

  5. vue 自定义分页组件

    vue2.5自定义分页组件,可设置每页显示条数,带跳转框直接跳转到相应页面 Pagination.vue 效果如下图: all: small(只显示数字和上一页和下一页): html <temp ...

  6. vue自定义分页组件---切图网

    vue2.5自定义分页组件 Pagination.vue,可设置每页显示条数,带跳转框直接跳转到相应页面,亲测有用.目前很多框架自带有分页组件比如elementUI,不过在面对一个拿到PSD稿,然后重 ...

  7. vue封装分页组件

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

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

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

  9. vue的分页组件

    <template> <div class="page-nav"> <div class="page-btn-wrap"> ...

随机推荐

  1. 用简单的JS代码制作计算器

    代码+注释一共不到200行,是练习交流的必备良药 主界面如下: 操作示意图: 以下是代码部分 HTML: <div> <table class="window"& ...

  2. Alpha冲刺(8/10)——2019.4.30

    作业描述 课程 软件工程1916|W(福州大学) 团队名称 修!咻咻! 作业要求 项目Alpha冲刺(团队) 团队目标 切实可行的计算机协会维修预约平台 开发工具 Eclipse 团队信息 队员学号 ...

  3. 小心!做 UI 自动化一定要跨过这些坑

    一 .引子 UI自动化,在移动互联网时代的今天,一直都是在各大测试社区最为火爆的一个TOPIC.甚至在测试同行面前一提起自动化,大家就会自然而然的问:“恩,你们是用的什么框架?appium?还是rob ...

  4. 025 Linux基础入门-----历史、简介、版本、安装

    1.linux历史 Linux最初是由芬兰赫尔辛基大学学生Linus Torvalds由于自己不满意教学中使用的MINIX操作系统, 所以在1990年底由于个人爱好设计出了LINUX系统核心.后来发布 ...

  5. Svn CleanUp failed解决方案

    在项目目录下找到wc.db文件,使用sqlite工具打开,清空main下的WC_LOCK和 WORK_QUEUE表即可.

  6. pip install 时报错 pip is configured with locations that require TLS/SSL, however the ssl module in Python is not available.

    pip install 时报错: pip is configured with locations that require TLS/SSL, however the ssl module in Py ...

  7. 百度前端技术学院task15源代码

    这一道题涉及到排序,读取页面内容,输出显示到某一节点当中以及添加事件. 刚开始一直在想怎么获取某一节点的内容,后面采用的是sdata.childNodes,获取所有的节点.再通过schildNode[ ...

  8. Prometheus 配置文件详解

    Prometheus 配置文件详解 官方文档:https://prometheus.io/docs/prometheus/latest/configuration/configuration/ 指标说 ...

  9. 服务器同时安装python2支持的py-faster-rcnn以及python3支持的keras

    最近把服务器折腾一下,搞定这两个.

  10. 开源规则引擎 Drools 学习笔记 之 -- 1 cannot be cast to org.drools.compiler.kie.builder.impl.InternalKieModule

    直接进入正题 我们在使用开源规则引擎 Drools 的时候, 启动的时候可能会抛出如下异常: Caused by: java.lang.ClassCastException: cn.com.cheng ...