分页对我不起作用 b-table

Question

我正在使用 VueJS 构建一个应用程序，bootstrapVue 用于前端，Django 用于后端。我正在使用 b-table 并且我想使用 b-pagination.

的分页

在我的 itemsProvider 函数中，我像这样 ctx.currentPage 获取 b-pagination 的当前页面并向后端发送请求。问题是当我点击 b-pagination 的按钮时 itemsProvider 功能没有被调用，我不知道为什么。

下面是部分代码：

<template>
  <div class="container">
    <b-pagination v-model="currentPage" :totalRows="totalRows" :per-page="perPage"></b-pagination>
    <p>Current page {{currentPage}}</p>
    <b-table
      current-page="currentPage"
      per-page="perPage"
      :items="itemsProvider"
      :fields="fields"
    >
    </b-table>

  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Archive",
  data() {
    return {
      perPage: 10,
      totalRows: 200,
      pageOptions: [5, 10, 22],
      currentPage: 1,
      bookInfo: {},
      fields: [...]
    };
  },
  computed: {
    books() {
      return this.$store.getters["books/books"].filter(item => {
        return item.status == "AR";
      });
    }
  },
  methods: {
    ...mapActions({
      getArchivedBooks: "books/getArchivedBooks"
    }),
    itemsProvider(ctx, callback) {
      console.log(ctx.currentPage)
      let page = ctx.currentPage;
      return this.getArchivedBooks(page).then(() => {
        const items = this.books;
        return items || [];
      });
    },
  }
};
</script>

Answer 1

我应该将 perPage 和 currentPage 值绑定到 b-table 的属性 current-page 和 per-page，如下所示：

<b-table
      :current-page="currentPage"
      :per-page="perPage"
      :items="itemsProvider"
      :fields="fields"
    >
    </b-table>

分页对我不起作用 b-table

Pagination doesn't work for me with b-table

vue.js

bootstrap-vue