console
var app = new Vue({
el: '#app',
data() {
return {
myArray: [{id:1, name: 'aa'}],
myArray2: [],
testArr:[1,2,3,4,5,6,7,8,9,10],
shouldSelectIndex: 0,
totalCount: 151,
pageCount:1,
currentPage:1
}
},
methods: {
handlePrevChange: function() {
this.currentPage--
this.test(this.currentPage)
},
pageClick: function(page){
this.currentPage = page
this.testArr = []
if(page < 6){
this.shouldSelectIndex = page - 1
if(this.pageCount < 10){
for(let i = 1; i <= this.pageCount; i++){
this.testArr.push(i)
}
}else {
for(let i = 1; i <= 10; i++){
this.testArr.push(i)
}
}
}else{
if(this.pageCount < 10) {
this.shouldSelectIndex = page-1
for(let i = 1; i <= this.pageCount; i++){
this.testArr.push(i)
}
}else{
if((page + 4) <= this.pageCount){
this.shouldSelectIndex = 5
this.testArr = []
for(let i = page - 5; i< page + 5; i++){
this.testArr.push(i)
}
console.log(this.testArr)
}
if(page>(this.pageCount-4)&&page<=this.pageCount){
this.shouldSelectIndex = page-(this.pageCount-9)
this.testArr = []
for(let i=this.pageCount-9;i<=this.pageCount;i++){
this.testArr.push(i)
}
console.log(this.testArr)
}
}
}
},
initPage: function(){
this.pageCount = this.totalCount%10 ==0?this.totalCount/10: parseInt(this.totalCount/10) + 1
this.testArr = []
if(this.pageCount <= 10){
for(let i = 1; i <= this.pageCount; i++){
this.testArr.push(i)
}
}else{
for(let i = 1; i <= 10; i++){
this.testArr.push(i)
}
}
}
}
});
<script src="//unpkg.com/vue/dist/vue.js">
</script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js">
</script>
<div id="app">
<el-pagination :page-size="10" layout="total, prev, slot, next" :total="totalCount" :current-page="currentPage" @prev-click="handlePrevChange">
<span class="pageSizeInput">
<el-button v-for="(i,index) in testArr" @click="pageClick(i)" :style="{'color': (index==shouldSelectIndex ? '#3d8cff':'#BBBBBB')}">{{i}}</el-button>
</span>
</el-pagination>
<el-button @click="initPage">测试今日的没表达清楚的事情</el-button>
</div>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");