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，为当前页码。可以利用这个参数来进行列表内容的更新。