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>