仿百度分頁，自定義分頁（Element + Vue）可用於card模式分頁

 HTML

<el-row>
  <el-col :span="24">
    <el-row>
      <el-button @click='changePage(page.currentPage - 1)' size="mini">上一頁</el-button>
      <span  v-if="pageGroupList[0] > 2">...</span>
      <span v-for="(item ,i) in pageGroupList" :key="i" @click="changePage(item)">
        {{item}}
      </span>
      <el-button @click='changePage(Number(page.currentPage) + 1)' size="mini">下一頁</el-button>
      {{page.currentPage}}/{{totalPage}}頁
        前往：<el-input style="width: 50px" v-model="goto" size="mini"></el-input>
        <el-button @click="define(goto)" size="mini">確定</el-button>
      </el-row>
  </el-col>
</el-row>

JS :  可以把page.pageSize 和 pageGroup 設置成同一個參數，適用於展示card模式的分頁

<script>
  export default {
    data() {
      return {
        page: {
          pageSize: 3,
          currentPage: 1,
          total: 0
        },
        pageGroup: 6,
        pageGroupList: [],
        goto:'',
      }
    },
    created() {
      //初始化分頁
      this.changeList();
    },
    computed: {
      totalPage: function() {
        return Math.ceil(this.page.total / this.page.pageSize)
      }
    },
    methods: {
      changePage(idx) {
        if (idx !== this.page.currentPage && idx > 0 && idx <= this.totalPage) {
          this.page.currentPage = idx
          this.changeList() // 更新頁標
          this.onload()  //加載
        }
      },
      define(goTo){
        this.changePage(goTo);
      },
      changeList() { // 更新頁標
        //中間頁數
        let center = Math.floor(this.pageGroup/2) < this.page.currentPage?Math.floor(this.pageGroup/2) : this.page.currentPage;
        //開始頁 - 頭
        let start = this.page.currentPage - center > 1 ? this.page.currentPage - center : 1;
        //開始頁 - 尾
        let startend = this.totalPage > this.pageGroup ? this.totalPage - this.pageGroup : 0;
        start = start > this.totalPage - this.pageGroup + 1 ? startend + 1 : start;
        //結束頁
        let end = start + this.pageGroup - 1 > this.totalPage ? this.totalPage : start + this.pageGroup - 1;
        end = end === 0 ? start + this.pageGroup - 1 : end;
        //頁數數組
        let pageGroupList = []
        for (let i = start; i <= end; i++) {
          pageGroupList.push(i)
        }
        this.pageGroupList = pageGroupList;
      },
    }
  }
</script>