pagination.vue
<!-- 表格分页组件 -->
<template>
<nav class="boot-nav">
<ul class="pagination boot-page">
<li>
<a href="javascript:void(0)" @click="wholePrevClick()">
<span aria-hidden="true">第一页</span>
</a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Previous" @click="onPrevClick()">
<span aria-hidden="true">«</span>
</a>
</li>
<li v-for="(page, index) in pages" :class="activeNum === index ? 'active' : ''">
<a href="javascript:void(0)" v-text="page" @click="onPageClick(index)"></a>
</li>
<li>
<a href="javascript:void(0)" aria-label="Next" @click="onNextClick()">
<span aria-hidden="true">»</span>
</a>
</li>
<li>
<a href="javascript:void(0)" @click="wholeNextClick()">
<span aria-hidden="true">最后一页</span>
</a>
</li>
</ul>
<div class="page-total">
共 <span v-text="pageTotal"></span> 页
</div>
</nav>
</template>
<script>
export default {
props: {
// 每页显示个数
len: {
type: Number,
default: 2
},
// 表格数据（数组）
data: {
type: Array,
default: function () {
return []
}
},
// AJAX地址
url: {
type: String,
default: ''
},
//当前页的字段
currentPage: {
type: String,
default: ''
},
totalPages: {
type: String,
default: ''
},
totalName: {
type: String,
default: ''
},
// 显示页数
pageLen: {
type: Number,
default: 10
},
// 参数内容
param: {
type: Object,
default: function () {
return {}
}
},
//method
method:{
type:String,
default:'get'
}
},
data () {
return {
// 页码
pages: {
type: Array,
default: function () {
return [1]
}
},
// 总页数
pageTotal: {
type: Number,
default: 1
},
activeNum: 0,
first: -1,
last: -1
}
},
methods: {
// 第一页
wholePrevClick: function() {
this.first = 1;
var newPages = [];
for (let i = 0; i < this.pages.length; i++) {
newPages[i] = i +1;
}
this.pages = newPages;
this.activeNum = 0;
this.getData();
},
// 最后一页
wholeNextClick: function() {
this.last = this.pageTotal;
var newPages = [];
for (let i = 0; i < this.pages.length; i++) {
newPages[this.pages.length-i-1] = this.pageTotal-i;
}
this.pages = newPages;
this.activeNum = this.pages.length-1;
this.getData();
},
pageMake: function(index) {
let newPages = [];
let len2 = parseInt(this.pages.length/2);
if(this.pages[index] <= len2 || this.pageTotal <= this.pageLen || this.pages[index] > this.pageTotal-len2) {
for (let i = 0; i < this.pages.length; i++) {
newPages[i] = this.pages[i];
}
this.activeNum = index;
}else if( this.pages[index] <= this.pageTotal-len2) {
for (let i = 0; i < this.pages.length; i++) {
newPages[i] = this.pages[index]-len2+i;
}
this.activeNum = len2;
}
this.pages = newPages;
this.getData();
},
// 点击页码刷新数据
onPageClick (index) {
this.pageMake(index);
},
// 上一页
onPrevClick () {
// 当前页是否为当前最小页码
if (this.activeNum > 0) {
// this.activeNum = this.activeNum - 1;
let index = this.activeNum -1;
this.pageMake(index);
} else {
if (this.pages[0] !== 1) {
let newPages = []
for (let i = 0; i < this.pages.length; i++) {
newPages[i] = this.pages[i] - 1
}
this.pages = newPages
this.getData()
}
}
},
// 下一页
onNextClick () {
// 当前页是否为当前最大页码
if (this.activeNum < this.pages.length - 1) {
// this.activeNum = this.activeNum + 1
let index = this.activeNum + 1;
this.pageMake(index);
} else {
if (this.pages[this.pages.length - 1] < this.pageTotal) {
let newPages = []
for (let i = 0; i < this.pages.length; i++) {
newPages[i] = this.pages[i] + 1
}
this.pages = newPages
this.getData()
}
}
},
// 获取页码
getPages () {
this.pages = []
// 比较总页码和显示页数
if (this.pageTotal <= this.pageLen) {
//console.log(this.pageTotal+"....."+this.pageLen)
for (let i = 1; i <= this.pageTotal; i++) {
this.pages.push(i)
}
} else {
for (let i = 1; i <= this.pageLen; i++) {
this.pages.push(i)
}
}
},
// 页码变化获取数据
getData () {
var _self = this;
this.param[_self.currentPage] = this.pages[_self.activeNum];
if( this.first!= -1) {
this.param[_self.currentPage] = this.first;
this.first = -1;
}else if (this.last != -1) {
this.param[_self.currentPage] = this.last;
this.last = -1;
}
this.$nextTick(function(){
var _self = this;
var param = _self.param;
this.$http.get( _self.url, {params: param},
).then(function(data) {
var data = data.body.data;
_self.pageTotal = data.totalPage;
data = data.data;
if (_self.pages.length !== _self.pageLen || _self.pageTotal < _self.pageLen) {
_self.getPages();
}
_self.$store.commit('changeRenderData',{data})
})
});
},
refresh () {
this.pages = [1]
this.activeNum = 0
this.getData()
}
},
created() {
this.refresh();
this.getData();
this.getPages();
}
}
</script>
<style scoped>
.boot-select {
float: left;
80px;
}
.boot-nav {
float: right;
}
.boot-page {
display: inline-block;
margin: 2px 10px 0 20px;
vertical-align: middle;
}
.page-total {
display: inline-block;
vertical-align: middle;
}
</style>
store.js
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex) const store = new Vuex.Store({ state: { renderData: {}, //数据 }, mutations: { /* * 及时保存后台数据 */ changeRenderData: (state, data) => { state.renderData = data.data; } } }); export default store;
调用：
table.vue
<template>
<div class="body-box container">
<table class="table table-hover table-bordered">
<thead>
<tr>
<th class="text-center"></th>
<th class="text-center">操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(list,index) in count">
{{list.id}}
{{index}}
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="6" >
<div class="col-sm-12 text-center">
//组件调用 传参
<pagination :url="url" :param="param" :current-page="currentPage" :total-pages="totalPages"></pagination>
</div>
</td>
</tr>
</tfoot>
</table>
</div>
</template>
<script>
import pagination from '../components/pagination.vue'
export default {
data() {
return {
url: 'http://******/bike/bikeList', // 请求路径
param: {}, // 向服务器传递参数,
currentPage: 'pageNum',//对应接口中的当前页
totalPages: 'totalPage',//对应接口中的总数字段
}
},
created() {
},
components: {
pagination
},
methods: {
},
computed: {
//通过store拿到data
count() {
return this.$store.state.renderData;
// console.log(this.tableList);
}
}
}
</script>
<style scoped lang='scss'></style>