rightPage = rightPage + (pageNum - curPageNum);
rightPage = rightPage > totalPage ? totalPage : rightPage;
}
var arr = [];
for (var i = leftPage; i <= rightPage; i++) {
arr.push(i);
}
return arr;
}
},
computed: {
pages: function () {
return this.getPage(this.cur, this.totalPage, this.perSize);
}
}
}
</script>
<style>
ul, li {
margin: 0px;
padding: 0px;
}
li {
list-style: none;
display: inline;
}
.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;
}
.page-bar .page-con, .page-size {
width: 50%;
display: block;
height: 30px;
float: left;
line-height: 30px;
}
.page-bar .page-con ul {
float: right;
padding-left: 15px;
padding-right: 15px;
display: inline-block;
padding-left: 0;
}
.page-bar .page-size div {
padding-left: 15px;
padding-right: 15px;
font-size: 14px;
}
a.disabled {
color: #777;
background-color: #fff;
border-color: #ddd;
cursor: not-allowed;
}
a.disabled:hover {
background-color: #fff;
}
.clear-both {
clear: both;
}
select {
border: solid 1px #ddd;
appearance: none;
-moz-appearance: none;
-webkit-appearance: none;
background: url("../assets/images/arrow.png") no-repeat scroll right center transparent;
padding-right: 15px;
padding-left: 15px;
padding-top: 2px;
padding-bottom: 2px;
}
select::-ms-expand {
display: none;
}
</style>
组建模块使用，
<template>
<Navbar></Navbar>
<div class="row">
<table class="table">
<thead>
<tr>
<th>标题</th>
<th width="20%">发布时间</th>
<th width="10%">作者</th>
<th width="10%">回复数</th>
<th width="10%">访问数</th>
</tr>
</thead>
<tbody>
<tr v-show="!tabelEmpty" v-for="item in dataList">
<td>{{item.title}}</td>
<td>{{item.create_at}}</td>
<td>{{item.author.loginname}}</td>
