vue 简单分页
样式:
.page-bar {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
text-align: right;
}
.page-button-disabled {
color:#ddd !important;
}
.page-bar li {
list-style: none;
display: inline-block;
}
.page-bar li:first-child > a {
margin-left: 0px;
}
.page-bar a {
border: 1px solid #ddd;
text-decoration: none;
position: relative;
float: left;
padding: 6px 12px;
margin-left: -1px;
line-height: 1.42857143;
color: #337ab7;
cursor: pointer;
}
.page-bar a:hover {
background-color: #eee;
}
.page-bar .active a {
color: #fff;
cursor: default;
background-color: #337ab7;
border-color: #337ab7;
}
.page-bar i {
font-style: normal;
color: #d44950;
margin: 0px 4px;
font-size: 12px;
}
vue-nav.js的代码
/**
* pageNum 注意大小写。
*/
(function(){
var tm = '<div >'+
'<div class="page-bar" v-if="pages">'+
'<ul>'+
'<li v-if="pagenum!=1"><a @click="btnClick(pagenum-1)">上一页</a></li>'+
'<li v-for="index in indexs" v-bind:class="{ active: pagenum == index}" v-bind:data-id="index">'+
'<a v-on:click="btnClick(index)">{{ index }}</a>'+
'</li>'+
'<li v-if="pagenum!=pages"><a @click="btnClick(pagenum+1)">下一页</a></li>'+
'<li><a>共<i>{{pages}}</i>页</a></li>'+
'</ul>'+
'</div>'+
'<div style="text-align: center;font-size: 20px;" v-if="pages==0">无记录</div>'+
'</div>';
var navBar = Vue.extend({
template: tm,
props: {
pagenum: {
type: [String, Number],
required: true
},
pages: {
type: [String, Number],
required: true
},
callback: {
default: function() {
return function callback() {
// todo
}
}
}
},
computed: {
indexs: function() {
var left = 1;
var right = this.pages;
var ar = [];
if (this.pages >= 11) {
if (this.pagenum > 5 && this.pagenum < this.pages - 4) {
left = this.pagenum - 5;
right = this.pagenum + 4
} else {
if (this.pagenum <= 5) {
left = 1;
right = 10
} else {
right = this.pages;
left = this.pages -9
}
}
}
while (left <= right) {
ar.push(left);
left ++
}
return ar
}
},
methods: {
btnClick:function(page) {
if (page != this.pagenum) {
this.callback(page)
}
}
}
})
window.vuePage = navBar
})();
在页面中引入vue-nav.js文件
页面中的代码如下,在表格table下引入此模块
<vue-page :pageNum="pageNum" :pages="pages" :callback="callback"></vue-page>
然后在脚本上写:
var vue = new Vue({
el:"#app",
data:{
rsList:[],
pageNum: 1,//当前页
pages: 0, //总页数
pageSize:8//每页显示条数
},
created: function () {
this.callback(1);
},
components:{
'vue-page': vuePage
},
methods:{
callback: function(page){
this.pageNum = page;
var params = {};
params.pageNum = page;
params.pageSize = this.pageSize;
params.receiveStatus = this.receiveStatus;
sysUserController.getMessageList(params,function (data) {
if(data.status==200){
var resultObject = data.resultObject;
vue.rsList = resultObject.list;
vue.pages = resultObject.pages;
}
});
}
}
});
完成!
效果如下: