console
var app = new Vue({
el: '#app',
data() {
return {
pageIndex: 1,
pageSize: 10,
totalCount : 1000,
pageIndexArr:[1,2,3,4,5,6,7,8,9,10],
selectedIndex: 0
}
},
methods: {
handleCurrentChange: function(){
this.selectedIndex=this.pageIndex
},
changeColor: function(index){
this.selectedIndex = index;
},
prevClick: function(){
this.pageIndex -= 1
console.log(this.pageIndex)
},
nextClick: function(){
this.pageIndex += 1
console.log(this.pageIndex)
},
pageIndexClick: function(page){
this.pageIndex = page
console.log(this.pageIndex)
},
getDataList: function(){
this.totalCount = 900
if(this.totalCount/this.pageSize < 10){
let indexes = this.totalCount/this.pageSize
this.pageIndexArr.length = 0;
for(var i=1;i<=indexes;i++){
this.pageIndexArr.push(i)
}
}else{
this.pageIndexArr = [1,2,3,4,5,6,7,8,9,10]
}
}
}
});
<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="20" layout="total, sizes, prev, slot,next"
:total="totalCount"
:page-sizes="[10, 20, 50, 100]"
:page-size="pageSize"
:current-page="pageIndex"
@current-change="handleCurrentChange"
@prev-click="prevClick"
@next-click="nextClick"
>
<span class="pageSizeInput">
<el-button v-for="i in pageIndexArr"
:class="{activeColor:selectedIndex===i}"
@click="pageIndexClick(i),changeColor(i)">{{i}}
</el-button>
</span>
</el-pagination>
<el-button type="primary" @click="getDataList()">查询</el-button>
</div>
<style scoped>
.activeColor {
color: yellow;
ba
}
</style>
@import url("//unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css");