vue.js - 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>