如何实现这个Vue分页库

Question

我不知道如何使用这个库和其他类似的库（也带有分页）。任何地方都没有关于如何在实际数据循环中应用此分页的示例。有人可以告诉我如何使用它吗？

库链接：https://github.com/matfish2/vue-pagination-2

Answer 1

嗯，这个特定的库看起来与您使用的数据完全无关。 它只是一个显示分页的可视组件，但它实际上不会处理您的数据。

因此，您只需提供数据的总长度、每页的项目数和当前页数即可。 每次用户单击其中一个按钮时，该组件都会更新当前页码并发出一个事件，您可以将回调函数挂接到该事件。

如果您将所有数据存储在客户端，则只需根据当前页面和每页的项目显示列表的一部分即可。 因此，如果您有 500 条记录并且您希望每 20 条显示它们：

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1,
    perPage: 20,
    records: []
  },
  methods: {
    callback: function(page) {
      // no need for callback here since you have all your data loaded already
    }
  },
  computed: {
    displayedRecords() {
      const startIndex = this.perPage * (this.page - 1);
      const endIndex = startIndex + this.perPage;
      return this.records.slice(startIndex, endIndex);
    }
  },
  created() {
    // here we simulate an api call that returns the complete list
    for (let i = 1; i <= 500; i++) {
      this.records.push(`Item ${i}`);
    }
  }
});

#app {
  text-align: center;
}

[v-cloak] {
  display: none;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/controlled-component/dist/vue-pagination-2.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <h2><a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">Vue Pagination 2</a></h2>
  <p>Selected page: {{page}}</p>
  <ul>
    <li v-for="(record, index) of displayedRecords" :key="index">{{record}}</li>
  </ul>
  <pagination :records="records.length" v-model="page" :per-page="perPage" @paginate="callback">
  </pagination>
</div>

如果您需要在后端对数据进行分页，您至少需要通过一些 api 调用来了解列表的长度，该调用会告诉您该信息。然后，导航需要依赖lib的paginate事件：

new Vue({
  el: "#app",
  components: {
    Pagination
  },
  data: {
    page: 1,
    perPage: 20,
    records: [],
    recordsLength: 0
  },
  methods: {
    getPage: function(page) {
      // we simulate an api call that fetch the records from a backend
      this.records = [];
      const startIndex = this.perPage * (page - 1) + 1;
      const endIndex = startIndex + this.perPage - 1;
      for (let i = startIndex; i <= endIndex; i++) {
        this.records.push(`Item ${i}`);
      }
    },
    getRecordsLength() {
      // here we simulate an api call that returns the records length
      this.recordsLength = 500;
    }
  },
  created() {
    this.getRecordsLength();
    this.getPage(this.page);
  }
});

#app {
  text-align: center;
}

[v-cloak] {
  display: none;
}

<script src="https://cdn.rawgit.com/matfish2/vue-pagination-2/controlled-component/dist/vue-pagination-2.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app" v-cloak>
  <h2><a target="_blank" href="https://www.npmjs.com/package/vue-pagination-2">Vue Pagination 2</a></h2>
  <p>Selected page: {{page}}</p>
  <ul>
    <li v-for="(record, index) of records" :key="index">{{record}}</li>
  </ul>
  <pagination :records="recordsLength" v-model="page" :per-page="perPage" @paginate="getPage">
  </pagination>
</div>

Answer 2

我研究了几个vuejs分页工具。似乎在 Vuejs 中，人们对于如何使用/实现此功能没有相同的想法。

1. https://github.com/lokyoung/vuejs-paginate
2. https://github.com/gilbitron/laravel-vue-pagination
3. Element UI分页：https://element.eleme.cn/#/zh-CN/component/pagination

在编写Rails时，通过

will-pagination

或

kaminari

使用分页非常容易。

编写 Vue 时，请记住 Vuejs 只是前端，您必须实现后端代码。

而且我在使用Element时更喜欢使用Element-UI，它比其他vue的分页组件更容易。

更多信息请参考官方文档。