图例
组件
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>