vue常用分頁器

vue-pagination-2使用，看代碼：

<template>
  <div class="news-content">
    <ul class="news-item">
      <!-- 數據便利 -->
      <li v-for="list in newsItem" :key="list.id">
        <span>{{ list.title }}</span>
      </li>
    </ul>
    <div class="pagination-box">
      <pagination
        v-model="page"
        :records="records"
        :per-page="1"
        @paginate="myCallback"
      ></pagination>
    </div>
  </div>
</template>

<script>
import http from '../../src/utils/http';
import Pagination from 'vue-pagination-2';
export default {
  name: 'News',
  data() {
    return {
      page: 1,
      page_size: 5,
      records: 1,
      newsItem: [],
    };
  },
  components: {
    Pagination,
  },
  mounted() {
    this.getNews();
  },
  methods: {
    // 調用接口獲取數據
    getNews() {
      http
        .get('接口地址', {
          page: this.page,
          page_size: this.page_size,
        })
        .then(data => {
          if (data.success) {
            this.newsItem = $data.list; //獲取數據
            this.records = Math.ceil($data.total / this.page_size); //總頁數
          }
        });
    },
    myCallback(page) {
      //點擊頁碼的時候獲取當前頁
      this.page = page;
      this.getNews();
    },
  },
};
</script>

分頁參數說明：

1. records 是總數，這個參數是必須的。
2. per-page 每頁顯示數目 ，這個可選，默認是25個
3. page 這個是初始頁面，默認是第一頁
4. options 這個是選項，裏面可以包含一些其他參數 chunk 最大頁數 也就是最多顯示多少頁 默認顯示10頁
   edgeNavigation 顯示第一頁和最後一頁的鏈接 默認false 不顯示 theme
   主題，用來支持一些css樣式，值可以是bootstrap3，bootstrap4等等，默認bootstrap3
5. paginate 可以調用自定義事件。可以在組件上收聽並運行您的回調。他會回傳一個參數page，爲當前頁碼。可以利用這個參數來進行列表內容的更新。