You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
109 lines
3.8 KiB
109 lines
3.8 KiB
<template>
|
|
<div class="row">
|
|
<div class="col-sm-12 col-md-5">
|
|
<div class="dataTables_info">共{{total}}条 当前页{{index}}/{{getPageCount()}}</div>
|
|
</div>
|
|
<div class="col-sm-12 col-md-7">
|
|
<div class="dataTables_paginate paging_simple_numbers">
|
|
<ul class="pagination pagination-sm m-0 float-right">
|
|
<li :class="'page-item previous'+(hasPrev()?'':' disabled')">
|
|
<a href="javascript:;" class="page-link" @click="nav(index-1)">上一页</a>
|
|
</li>
|
|
<li v-for="item in getPageList()" :class="'page-item' + (item===index?' active':'')">
|
|
<a href="javascript:;" class="page-link" @click="nav(item)">{{item}}</a>
|
|
</li>
|
|
<li :class="'page-item next'+(hasNext()?'':' disabled')">
|
|
<a href="javascript:;" class="page-link" @click="nav(index+1)">下一页</a>
|
|
</li>
|
|
<li class="page-item">
|
|
<select class="page-link" v-model="currentSize">
|
|
<option v-for="item in sizeList" :value="item">
|
|
{{ item }}
|
|
</option>
|
|
</select>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
export default {
|
|
props: {
|
|
index: {
|
|
type: Number,
|
|
default: 1
|
|
},
|
|
size: {
|
|
type: Number,
|
|
default: 20
|
|
},
|
|
total: {
|
|
type: Number,
|
|
default: 0
|
|
},
|
|
sizeList: {
|
|
type: Array,
|
|
default: () => [20, 50, 100]
|
|
},
|
|
callback: {
|
|
type: Function
|
|
}
|
|
},
|
|
data: function () {
|
|
return {
|
|
currentIndex: this.index,
|
|
currentSize: this.size
|
|
};
|
|
},
|
|
watch: {
|
|
currentIndex: function (val) {
|
|
this.$emit('update:index', val);
|
|
this.callback();
|
|
},
|
|
currentSize: function (val) {
|
|
this.currentIndex = 1;
|
|
this.$emit('update:size', val);
|
|
this.callback();
|
|
}
|
|
},
|
|
methods: {
|
|
nav: function (index) {
|
|
this.currentIndex = index;
|
|
},
|
|
getPageCount: function () {
|
|
return Math.ceil(this.total / this.size);
|
|
},
|
|
hasPrev: function () {
|
|
return this.index > 1;
|
|
},
|
|
hasNext: function () {
|
|
return this.index < this.getPageCount();
|
|
},
|
|
getPageList: function () {
|
|
var pageCount = this.getPageCount();
|
|
var maxLinks = 10;
|
|
var left = maxLinks / 2;
|
|
var start = this.index - left;
|
|
start = start > 1 ? start : 1;
|
|
var end = this.index + (maxLinks - left - 1);
|
|
end = end > pageCount ? pageCount : end;
|
|
if (start == 1 && end < pageCount) {
|
|
while (end - start + 1 < maxLinks && end < pageCount) {
|
|
end++;
|
|
}
|
|
}
|
|
if (end == pageCount && start > 1) {
|
|
while (end - start + 1 < maxLinks && start > 1) {
|
|
start--;
|
|
}
|
|
}
|
|
var list = [];
|
|
for (var i = start; i <= end; i++) {
|
|
list.push(i);
|
|
}
|
|
return list;
|
|
}
|
|
}
|
|
};
|
|
</script> |