SOURCE

console 命令行工具 X clear

                    
>
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");

本项目引用的自定义外部资源