Bootstrap vue表的动态分页

Question

我需要使用分页动态填充引导 vue 表。 API 每次调用仅返回 10 个对象，并且对于每个后续页面，必须将最后一个对象的 id 作为查询参数传递以获取接下来的 10 条记录。

例如：如果对https://www.example.com/ 的第一次 GET 调用中的最后一个 id 是“10”，那么在单击“第 2 页”时，GET 调用应该是 https://www.example.com/?page_id=10，依此类推，直到api 不返回任何记录。

我曾尝试使用提供程序功能，但 api 不接受页码作为参数，所以这对我没有帮助。

这是我的 b 表和分页的外观：

<template>
    <b-table
          striped
          hover
          :items="reports"
          :fields="fields"
          :current-page="currentPage"
          :per-page="perPage"
          :busy.sync="isBusy"
        ></b-table>

    <b-pagination
          v-model="currentPage"
          :total-rows="totalRows"
          :per-page="perPage"
        ></b-pagination>       
</template>

<script>
      export default {
      name: "tutorials-list",
      data() {
        return {
          reports: [],
          currentReport: null,
          currentIndex: -1,
          title: "",
          fields: [
            { key: "id", label: "ID", sortable: true, sortDirection: "desc" },
            { key: "type", label: "Type", sortable: true, class: "text-center" },
            {
              key: "reported by",
              label: "Reported By",
              sortable: true,
              class: "text-center",
            },
            { key: "actions", label: "Actions" },
          ],
          perPage: 5,
          totalRows: 1,
          currentPage: 1,
          isBusy: false,
          primary_user_id: 1,
          page_id: null
        };
      },
      methods: {
        async retrieveReports() {
          this.isBusy = true
          return await ReportsDataService.getAll(this.primary_user_id, this.page_id ? this.page_id : '')
            .then((response) => {
              const result = response.data["votes"];
              this.reports = result.map((report) => ({
                id: report.id,
                type: report.report_type,
                "reported by": report.reported_by,
              }));
              this.isBusy = false
              this.totalRows = this.reports.length
              this.page_id = this.reports[this.reports.length-1].id
              console.log();
              return this.reports
            })
            .catch((e) => {
              this.isBusy = false
              console.log(e);
            });
        },
</script>

我是前端框架的完全新手，因此非常感谢这里的任何帮助，谢谢！

Answer 1

您需要在b-table 组件上将per-page 属性设置为0 以禁用本地分页并允许b-pagination 处理数据。

第 1 步：创建一个html 模板

<template>
  <div id="app">
    <div>
      <b-table
        striped
        hover
        :items="listItems"
        :fields="fields"
        :current-page="currentPage"
        :per-page="0">
        <template v-slot:cell(action)="data">
          <b-button size="sm" class="mr-1" @click="edit(data)"> Edit </b-button>
          <b-button size="sm" @click="deleteRecord(data)"> Delete </b-button>
        </template>
      </b-table>
      <b-pagination
        v-model="currentPage"
        :total-rows="totalPages"
        :per-page="recordsPerPage">
      </b-pagination>
    </div>
  </div>
</template>

第 2 步： 添加model 初始化，操作method 和watcher 为currentPage

<script>
import { passengerService } from "./services/passengerService";
export default {
  name: "App",
  data() {
    return {
      listItems: [],
      currentPage: 1,
      totalPages: 0,
      recordsPerPage: 10,
      isLoading: false,
      fields: [
        {
          key: "_id",
          label: "ID",
          sortable: true,
          sortDirection: "desc",
        },
        {
          key: "name",
          label: "Passenger Name",
          sortable: true,
          class: "text-center",
        },
        {
          key: "airline[0].name",
          label: "Aireline Name",
          sortable: true,
          image: true,
        },
        {
          key: "airline[0].country",
          label: "Country",
          sortable: true,
        },
        {
          key: "action",
          label: "Actions",
        },
      ],
      params: "",
    };
  },
  created() {
    this.loadPassengers();
  },
  watch: {
    currentPage: {
      handler: function (value) {
        this.params = `page=${value}&size=${this.recordsPerPage}`;
        this.loadPassengers();
      },
    },
  },
  methods: {
    loadPassengers() {
      this.isLoading = true;
      this.params = `page=${this.currentPage}&size=${this.recordsPerPage}`;
      passengerService.getListPassengers(this.params).then((response) => {
        if (response.data) {
          this.listItems = response.data;
          this.totalPages = response.totalPassengers;
          this.isLoading = false;
        }
      });
    },
    deleteRecord(data) {
      this.$bvModal
        .msgBoxConfirm("Are you sure wants to delete?", {
          title: "Please Confirm",
          size: "mm",
          buttonSize: "sm",
          okVariant: "danger",
          okTitle: "YES",
          cancelTitle: "NO",
          footerClass: "p-2",
          hideHeaderClose: false,
          centered: true,
        })
        .then((value) => {
          if (value) {
            this.listItems.splice(data.index, 1);
          }
        });
    },
    edit(data) {
      alert(JSON.stringify(data));
    },
  },
};
</script>

第三步：在services文件夹下创建一个REST API调用

import axios from "axios";

export const passengerService = {
  getListPassengers
};

function getListPassengers(params) {
  return axios
    .get(`https://api.instantwebtools.net/v1/passenger?${params}`, {})
    .then((response) => Promise.resolve(response.data))
    .catch((error) => Promise.reject(error.response));
}

DEMO