|
|
|
@ -1,22 +1,22 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="row">
|
|
|
|
|
<div class="col-sm-12 col-md-5">
|
|
|
|
|
<div class="dataTables_info">共{{total}}条 当前数据{{(index-1)*size+1}}-{{index*size>total?total:index*size}} 当前页{{index}}/{{getPageCount()}}</div>
|
|
|
|
|
<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" style="justify-content:flex-end;">
|
|
|
|
|
<li :class="'paginate_button page-item previous'+(hasPrev()?'':' disabled')">
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(index-1,size)">上一页</a>
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(index-1)">上一页</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li v-for="item in getPageList()" :class="'paginate_button page-item' + (item===index?' active':'')">
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(item,size)">{{item}}</a>
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(item)">{{item}}</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li :class="'paginate_button page-item next'+(hasNext()?'':' disabled')">
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(index+1,size)">下一页</a>
|
|
|
|
|
<a href="javascript:;" class="page-link" v-on:click="nav(index+1)">下一页</a>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="paginate_button page-item">
|
|
|
|
|
<select class="form-control" v-model="size" v-on:change="nav(1,size)">
|
|
|
|
|
<select class="form-control" v-model="currentSize">
|
|
|
|
|
<option v-for="item in sizeList" v-bind:value="item">
|
|
|
|
|
{{ item }}
|
|
|
|
|
</option>
|
|
|
|
@ -44,14 +44,27 @@
|
|
|
|
|
},
|
|
|
|
|
sizeList: {
|
|
|
|
|
type: Array,
|
|
|
|
|
default: ()=>[20, 50, 100]
|
|
|
|
|
default: () => [20, 50, 100]
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
data: function () {
|
|
|
|
|
return {
|
|
|
|
|
currentIndex: this.index,
|
|
|
|
|
currentSize: this.size
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
watch: {
|
|
|
|
|
currentIndex: function (val) {
|
|
|
|
|
this.$emit('update:index', val);
|
|
|
|
|
},
|
|
|
|
|
nav: {
|
|
|
|
|
type: Function,
|
|
|
|
|
default: null
|
|
|
|
|
currentSize: function (val) {
|
|
|
|
|
this.$emit('update:size', val);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
nav: function (index) {
|
|
|
|
|
this.currentIndex = index;
|
|
|
|
|
},
|
|
|
|
|
getPageCount: function () {
|
|
|
|
|
return Math.ceil(this.total / this.size);
|
|
|
|
|
},
|
|
|
|
|