SOURCE

console 命令行工具 X clear

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

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