vue分页组件

咱们在用vue写后台项目时，分页功能每每是必不可少的，找了很久也没有找到，因此就本身写了一个，效果以下：

主要代码以下

首先说下思路：

1.建一个paper.vue的组件，用来存放分页功能

2.在代码里分为template部分，script部分，style部分

3.用到vue父子组件传值，父组件经过prop传值个子组件，子组件经过$emit将分页index传送给父组件，在父组件中点击子组件的分页时，每次请求列表，利用子组件传回的index进行数据请求

4.具体分页操做都在paper.vue中进行操做

5.两个代码能够直接粘贴复制用，获取列表的数据根据本身需求进行更改便可

 

------子组件代码-----------------------------------------------

<template>
<div class="paper">
<nav aria-label="Page navigation">
<ul class="pagination">
<li>
<span class="pageInfo">共{{allPage}}条数据</span>
</li>
<li>
<a href="#" aria-label="Previous" v-show="current != 1" @click="current--&&jumpcurrent-- && goto(current)" >
<span aria-hidden="true">上一页</span>
</a>
</li>
<li :class="{'active':current == index}" v-for="index in pages"><a href="#" @click="goto(index)">{{index}}</a></li>
<li>
<a href="#" aria-label="Next" v-show="total != current && total != 0 " @click="current++ && jumpcurrent ++ && goto(current)">
<span aria-hidden="true">下一页</span>
</a>
</li>
<li>
<a href="#" style="margin-left:10px;border:none;padding:2px 0;">第</a>
<a href="#" style="padding:0;">
<input class="jumpPage" type="text" v-model="jumpcurrent">
</a>
<a href="#" style="border:none;padding:2px 0;">页</a>
</li>
<li>
<a href="#" style="margin-left:10px;background:#337AB7;color:#fff;border-color:#337AB7;" @click="goto(jumpcurrent)">跳转</a>
</li>
</ul>
</nav>
</div>
</template>

<script>
export default {
name: 'paper',
props:['total','allPage'],
data () {
return {
jumpcurrent:1,//跳转页计数
current:1,//显示页计数
currentnum:5,//导航总显示个数
}
},
watch:{
current:function(old,newVal){
}
},
computed:{
pages:function(){
var pag = [];
if( this.current < this.currentnum ){ //若是当前的激活的项 小于要显示的条数
//总页数和要显示的条数那个大就显示多少条
var i = Math.min(this.currentnum,this.total);
while(i){
pag.unshift(i--);
}
}else{ //当前页数大于显示页数了
var middle = this.current - Math.floor(this.currentnum / 2 ),//从哪里开始
i = this.currentnum;
if( middle > (this.total - this.currentnum) ){
middle = (this.total - this.currentnum) + 1
}
while(i--){
pag.push( middle++ );
}
}
return pag
}
},
methods:{
goto:function(index){
if(this.jumpcurrent > this.total){
this.jumpcurrent = this.current;
swal({
title:"超出最大页码",
text: "2秒后自动关闭。",
icon:"error",
timer: 2000,
buttons:false
});
return;
}else{
this.jumpcurrent = index;
this.current = index;
};
this.$emit("change",index);
}
}
}
</script>

<style scoped>
.pagination {
margin: 0;
}
.pagination>li>a {
background: none;
/*background:rgba(211,220,230,.5);*/
color:#555;
padding: 2px 10px;
margin:0 2px;
border-color: #99A0A8;
border-radius: 0;
-webkit-border-radius:0;
-moz-border-radius:0;
}
/*.active {
background-color: #337AB7;
color:#fff;
}*/
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover{
background-color: #337AB7;
color:#f8f8f8;
border-color: #337AB7;
}
.jumpPage {
width: 25px;
text-align: center;
background:none;
border:none;
padding:2px 0;
}
.pageInfo {
padding:2px 10px;
background:none ;
border:none;
color:#444;
}
.pageInfo:hover{
background:none;
border:none;
color:#444;
}
</style>

 

 

------父组件调用-------------------------------------------------------------------

<template>

  <div class="user">

    <div class="main BR">

      <div class="main-header"><img class="main-angle" src="../../assets/images/angle.png" alt="">用户管理</div>

      <div class="mainTitle"><button type="button" class="btn btn-primary addbtn" data-toggle="modal" data-target="#addModal">新增用户</button></div>

      <div class="tableWrap">

        <div class="table-responsive">

          <table class="table BR">

            <thead>

              <tr>

                <th style="width:60px;">序号</th>

                <th>用户昵称</th>

                <th>手机号</th>

                <th>用户角色</th>

                <th>用户状态</th>

                <th style="width:200px;">操做</th>

              </tr>

            </thead>

            <tbody>

              <tr v-for="(item,index) in userList">

                <td scope="row">{{index+1}}</td>

                <td>{{item.loginname}}</td>

                <td>{{item.phone}}</td>

                <td>{{item.name}}</td>

                <td>{{item.name}}</td>

                <td>

                  <button type="button" class="btn btn-info tabBtn" @click="lookMain(item)" data-toggle="modal" data-target="#lookModal">详情</button>

                  <button type="button" class="btn btn-success tabBtn">编辑</button>

                  <button type="button" class="btn btn-danger tabBtn" @click="deleteInfo(item)">删除</button>

                </td>

              </tr>

            </tbody>

          </table>

        </div>

      </div>

      <div class="mainPage">

        <Paper :total="total" :allPage="allpage" v-on:change="changePage"></Paper>

      </div>

    </div>

   </div>

</template>

 

<script>

import Paper from "@/components/publicComponent/paper"

export default {

  name: 'user',

  components:{

    Paper

  },

  data () {

    return {

      loginData:"",

      userList:[],

      addForm:[],

      lookForm:[],

      editForm:[],

      allpage:0,//总记录数

      size:10,//每页显示个数

      current:1,//当前显示页

      total:0//总数

    }

  },

  created:function (){//钩子函数，在页面加载完毕前执行

    this.jumpLogin();

    this.loginData = JSON.parse(sessionStorage.loginData);

    this.getList();

  },

  methods:{

    //初始判断有没有token，没有的话跳转登陆页

    jumpLogin:function(){

      if(!sessionStorage.loginData){this.$router.push({ path: '/' });}

    },

    //获取用户列表

    getList:function(){

      this.$http({

            url: global.url+'/robomb/user/getUserList',

            method: 'POST',

            emulateJSON:true,

            body: {

              token:this.loginData.token,

              pageSize:this.current,

              recordSize:this.size

            },

            headers: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}

        }).then(function(response) {

            var data = response.body;

            if(data.returncode == 0){

              swal({ 

                  title:"数据加载错误", 

                  text: "2秒后自动关闭。", 

                  icon:"error",

                  timer: 2000, 

                  buttons:false

                });

            }else if(data.returncode == 1){

                this.userList = data.data.userList;

                this.allpage = data.size;

                //总页数

                this.total = Math.floor((data.size + this.size) / 10);

            }else{

              swal({ 

                  title:"数据加载错误", 

                  text: "2秒后自动关闭。", 

                  icon:"error",

                  timer: 2000, 

                  buttons:false

                });

            };

        }, function(response) {

              

        });

    },

    changePage:function(index){

      this.current = index;

      this.getList();

    }

  }

}

</script>

 

<style scoped>

.form-group {

  overflow: hidden;

}

.control-label {

  padding-left: 0;

  padding-right: 0;

}

</style>