通过分页在 b-table 上显示剩余的 API 数据

Question

我正在尝试使用 Nuxt 中的 axios 从 API 中获取所有数据，但似乎每页仅显示 10 个数据，因此如果我希望访问实际有 15 个数据，它必须显示 2 页（第 1 页有 10 个数据，第 2 页有剩余的 5 个数据）。我不知道为什么它只想显示每 10 个数据 每页。

如何在下一页显示剩余数据？到目前为止，这是我一直在做的事情

<script>
// eslint-disable-next-line no-unused-vars
import { getAllProvinces } from '~/api/delivery'
export default {
  data() {
    return {
      filter: null,
      filterOn: [],
      perPage: 10,
      currentPage: 1,
      rows: 0,
      items: [],
      fields: [
        {
          key: 'id',
          sortable: true,
          label: 'ID',
          class: 'truncate',
        },
        {
          key: 'uploadReference',
          sortable: true,
          label: 'Upload Reference',
          class: 'truncate',
        },
        {
          key: 'requestId',
          sortable: true,
          label: 'Request ID',
          class: 'truncate',
        },
        {
          key: 'storeCode',
          sortable: true,
          label: 'Store Code',
          class: 'truncate',
        },
        {
          key: 'branchCode',
          sortable: true,
          label: 'Branch Code',
          class: 'truncate',
        },
        {
          key: 'b2bId',
          sortable: true,
          label: 'B2B ID',
          class: 'truncate',
        },
        {
          key: 'request',
          sortable: true,
          label: 'Request',
          class: 'truncate',
        },
        {
          key: 'response',
          sortable: true,
          label: 'Response',
          class: 'truncate',
        },
        {
          key: 'createDate',
          sortable: true,
          label: 'Create Date',
          class: 'truncate',
        },
        {
          key: 'errorClassification',
          sortable: true,
          label: 'Error Classification',
          class: 'truncate',
        },
      ],
    }
  },
  watch: {
    currentPage: {
      handler(value) {
        this.getAllStock()
      },
    },
  },
  created() {
    this.getAllStock()
  },
  methods: {
    getAllStock() {
      this.$axios
        .get(
          'axioslink' +
            this.currentPage +
            '&status=1'
        )
        .then((res) => {
          // eslint-disable-next-line no-console
          console.log(res.data)
          this.items = res.data.stocks
          this.allStock = res.data
          this.rows = res.data.totalDocuments
          // eslint-disable-next-line no-console
        })
      this.rows = this.items.length
    },
    onFiltered(filteredItems) {
      this.rows = filteredItems.length
      this.currentPage = 1
    },
  },
}
</script>

<div class="text-center">
              <b-table
                id="my-table"
                :per-page="perPage"
                :current-page="currentPage"
                striped
                small
                hover
                dark
                responsive
                show-empty
                :items="items"
                :fields="fields"
                :filter="filter"
                :filter-included-fields="filterOn"
                @filtered="onFiltered"
              >
                <template v-slot:cell()="data">
                  <span v-b-tooltip.hover :title="data.value">{{
                    data.value
                  }}</span>
                </template>
              </b-table>
            </div>
          </template>
          <div class="overflow-auto">
            <b-card-footer class="py-4 d-flex justify-content-end">
              <b-pagination
                :total-rows="rows"
                :per-page="perPage"
                aria-controls="my-table"
                @change="currentPage = $event"
              ></b-pagination>
            </b-card-footer>
          </div>

谢谢，祝你有美好的一天

Answer 1

new Vue({
  el: "#menu",
  data: () => ({
    filter: null,
            filterOn: [],
            perPage: 10,
            currentPage: 1,
            rows: 0,
            items: [],
            fields: [{
                    key: 'id',
                    sortable: true,
                    label: 'ID',
                    class: 'truncate',
                },
                {
                    key: 'uploadReference',
                    sortable: true,
                    label: 'Upload Reference',
                    class: 'truncate',
                },
                {
                    key: 'requestId',
                    sortable: true,
                    label: 'Request ID',
                    class: 'truncate',
                },
                {
                    key: 'storeCode',
                    sortable: true,
                    label: 'Store Code',
                    class: 'truncate',
                },
                {
                    key: 'branchCode',
                    sortable: true,
                    label: 'Branch Code',
                    class: 'truncate',
                },
                {
                    key: 'b2bId',
                    sortable: true,
                    label: 'B2B ID',
                    class: 'truncate',
                },
                {
                    key: 'request',
                    sortable: true,
                    label: 'Request',
                    class: 'truncate',
                },
                {
                    key: 'response',
                    sortable: true,
                    label: 'Response',
                    class: 'truncate',
                },
                {
                    key: 'createDate',
                    sortable: true,
                    label: 'Create Date',
                    class: 'truncate',
                },
                {
                    key: 'errorClassification',
                    sortable: true,
                    label: 'Error Classification',
                    class: 'truncate',
                },
            ],
  }),
  methods: {
  getAllStock() {
    this.items = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }, { id: 5 }, { id: 6 }, { id: 7 }, { id: 8 }, { id: 8 }, { id: 10 }, { id: 11 }, { id: 12 }, ]
            // this.allStock = res.data
            this.rows = this.items.length
  },
   onFiltered(filteredItems) {
            this.rows = filteredItems.length
            this.currentPage = 1
        },
  },
   created() {
      this.getAllStock()
  },
});

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.css" />
<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-vue/2.18.1/bootstrap-vue.min.js"></script>

<div id="menu">
 <b-table id="my-table" :per-page="perPage" :current-page="currentPage" striped small hover dark responsive show-empty :items="items" :fields="fields" :filter="filter" :filter-included-fields="filterOn" @filtered="onFiltered">



  </b-table>
    <b-pagination v-model="currentPage" :total-rows="rows" :per-page="perPage" aria-controls="my-table"></b-pagination>
</div>