vue分页组件

图例

组件

  1 <template>
  2     <div class="pager">
  3         <nav aria-label="Page navigation">
  4             <ul class="pagination">
  5                 <li>
  6                     <span class="pageInfo">共{{allPage}}条数据</span>
  7                 </li>
  8                 <li>
  9                     <a href="#" aria-label="Previous" v-show="current != 1" @click="current--&&jumpcurrent-- && goto(current)">
 10                         <span aria-hidden="true">上一页</span>
 11                     </a>
 12                 </li>
 13                 <li :class="{'active':current == index}" v-for="index in pages">
 14                     <a href="#" @click="goto(index)">{{index}}</a>
 15                 </li>
 16                 <li>
 17                     <a href="#" aria-label="Next" v-show="total != current && total != 0 " @click="current++ && jumpcurrent ++ && goto(current)">
 18                         <span aria-hidden="true">下一页</span>
 19                     </a>
 20                 </li>
 21                 <li>
 22                     <a href="#" style="margin-left:10px;border:none;padding:2px 0;">第</a>
 23                     <a href="#" style="padding:0;">
 24                         <input class="jumpPage" type="text" v-model="jumpcurrent" />
 25                     </a>
 26                     <a href="#" style="border:none;padding:2px 0;">页</a>
 27                 </li>
 28                 <li>
 29                     <a href="#" style="margin-left:10px;background:#337AB7;color:#fff;border-color:#337AB7;" @click="goto(jumpcurrent)">跳转</a>
 30                 </li>
 31             </ul>
 32         </nav>
 33     </div>
 34 </template>
 35 <script>
 36 export default {
 37     name: 'pager',
 38     props: ['total', 'allPage'],
 39     data() {
 40         return {
 41             jumpcurrent: 1,//跳转页计数
 42             current: 1,//显示页计数
 43             currentnum: 5,//导航总显示个数
 44         }
 45     },
 46     watch: {
 47         current: function (old, newVal) {
 48         }
 49     },
 50     computed: {
 51         pages: function () {
 52             var pag = [];
 53             if (this.current < this.currentnum) { //如果当前的激活的项 小于要显示的条数
 54                 //总页数和要显示的条数那个大就显示多少条
 55                 var i = Math.min(this.currentnum, this.total);
 56                 while (i) {
 57                     pag.unshift(i--);
 58                 }
 59             } else { //当前页数大于显示页数了
 60                 var middle = this.current - Math.floor(this.currentnum / 2),//从哪里开始
 61                     i = this.currentnum;
 62                 if (middle > (this.total - this.currentnum)) {
 63                     middle = (this.total - this.currentnum) + 1
 64                 }
 65                 while (i--) {
 66                     pag.push(middle++);
 67                 }
 68             }
 69             return pag
 70         }
 71     },
 72     methods: {
 73         goto: function (index) {
 74             if (this.jumpcurrent > this.total) {
 75                 this.jumpcurrent = this.current;
 76                 Message({
 77                     title: "错误",
 78                     message: '超出最大页码',
 79                     type: 'error',
 80                     duration: 5 * 1000
 81                 })
 82                 return;
 83             } else {
 84                 this.jumpcurrent = index;
 85                 this.current = index;
 86             }
 87             this.$emit("change", index);
 88         }
 89     }
 90 }
 91 </script>
 92 <style scoped>
 93 .pagination {
 94     margin: 0;
 95 }
 96 .pagination > li > a {
 97     background: none;
 98     /*background:rgba(211,220,230,.5);*/
 99     color: #555;
100     padding: 2px 10px;
101     margin: 0 2px;
102     border-color: #99a0a8;
103     border-radius: 0;
104     -webkit-border-radius: 0;
105     -moz-border-radius: 0;
106 }
107 /*.active {
108 background-color: #337AB7;
109 color:#fff;
110 }*/
111 .pagination > .active > a,
112 .pagination > .active > a:focus,
113 .pagination > .active > a:hover,
114 .pagination > .active > span,
115 .pagination > .active > span:focus,
116 .pagination > .active > span:hover {
117     background-color: #337ab7;
118     color: #f8f8f8;
119     border-color: #337ab7;
120 }
121 .jumpPage {
122      25px;
123     text-align: center;
124     background: none;
125     border: none;
126     padding: 2px 0;
127 }
128 .pageInfo {
129     padding: 2px 10px;
130     background: none;
131     border: none;
132     color: #444;
133 }
134 .pageInfo:hover {
135     background: none;
136     border: none;
137     color: #444;
138 }
139 </style>

使用

  1 <template>
  2   <div class="user">
  3     <div class="main BR">
  4       <div class="main-header"><img class="main-angle" src="../../assets/images/angle.png" alt="">用户管理</div>
  5       <div class="mainTitle"><button type="button" class="btn btn-primary addbtn" data-toggle="modal" data-target="#addModal">新增用户</button></div>
  6       <div class="tableWrap">
  7         <div class="table-responsive">
  8           <table class="table BR">
  9             <thead>
 10               <tr>
 11                 <th style="60px;">序号</th>
 12                 <th>用户昵称</th>
 13                 <th>手机号</th>
 14                 <th>用户角色</th>
 15                 <th>用户状态</th>
 16                 <th style="200px;">操作</th>
 17               </tr>
 18             </thead>
 19             <tbody>
 20               <tr v-for="(item,index) in userList">
 21                 <td scope="row">{{index+1}}</td>
 22                 <td>{{item.loginname}}</td>
 23                 <td>{{item.phone}}</td>
 24                 <td>{{item.name}}</td>
 25                 <td>{{item.name}}</td>
 26                 <td>
 27                   <button type="button" class="btn btn-info tabBtn" @click="lookMain(item)" data-toggle="modal" data-target="#lookModal">详情</button>
 28                   <button type="button" class="btn btn-success tabBtn">编辑</button>
 29                   <button type="button" class="btn btn-danger tabBtn" @click="deleteInfo(item)">删除</button>
 30                 </td>
 31               </tr>
 32             </tbody>
 33           </table>
 34         </div>
 35       </div>
 36       <div class="mainPage">
 37         <Paper :total="total" :allPage="allpage" v-on:change="changePage"></Paper>
 38       </div>
 39     </div>
 40    </div>
 41 </template>
 42  
 43 <script>
 44 import Pager from "@/components/publicComponent/pager"
 45 export default {
 46   name: 'user',
 47   components:{
 48     Pager
 49   },
 50   data () {
 51     return {
 52       loginData:"",
 53       userList:[],
 54       addForm:[],
 55       lookForm:[],
 56       editForm:[],
 57       allpage:0,//总记录数
 58       size:10,//每页显示个数
 59       current:1,//当前显示页
 60       total:0//总数
 61     }
 62   },
 63   created:function (){//钩子函数，在页面加载完毕前执行
 64     this.jumpLogin();
 65     this.loginData = JSON.parse(sessionStorage.loginData);
 66     this.getList();
 67   },
 68   methods:{
 69     //初始判断有没有token，没有的话跳转登录页
 70     jumpLogin:function(){
 71       if(!sessionStorage.loginData){this.$router.push({ path: '/' });}
 72     },
 73     //获取用户列表
 74     getList:function(){
 75       this.$http({
 76             url: global.url+'/robomb/user/getUserList',
 77             method: 'POST',
 78             emulateJSON:true,
 79             body: {
 80               token:this.loginData.token,
 81               pageSize:this.current,
 82               recordSize:this.size
 83             },
 84             headers: {"Content-Type": "application/x-www-form-urlencoded;charset=UTF-8"}
 85         }).then(function(response) {
 86             var data = response.body;
 87             if(data.returncode == 0){
 88               swal({ 
 89                   title:"数据加载错误", 
 90                   text: "2秒后自动关闭。", 
 91                   icon:"error",
 92                   timer: 2000, 
 93                   buttons:false
 94                 });
 95             }else if(data.returncode == 1){
 96                 this.userList = data.data.userList;
 97                 this.allpage = data.size;
 98                 //总页数
 99                 this.total = Math.floor((data.size + this.size) / 10);
100             }else{
101               swal({ 
102                   title:"数据加载错误", 
103                   text: "2秒后自动关闭。", 
104                   icon:"error",
105                   timer: 2000, 
106                   buttons:false
107                 });
108             };
109         }, function(response) {
110               
111         });
112     },
113     changePage:function(index){
114       this.current = index;
115       this.getList();
116     }
117   }
118 }
119 </script>
120  
121 <style scoped>
122 .form-group {
123   overflow: hidden;
124 }
125 .control-label {
126   padding-left: 0;
127   padding-right: 0;
128 }
129 </style>