如何在 BootstrapVue 中使用分页

Question

我创建了一个 b-table 来存储来自 API 的所有数据，这些数据已经从 Swagger UI 命中，但是由于数据在字符串中有很多字符，我的问题是如何使每行中的数据在单击时悬停以显示来自 API 的未被截断的真实数据？我试过使用 v-b-tooltip 但它似乎不起作用。如果可以的话，我还想知道更多关于如何让 b-pagination 在我进一步浏览页面时加载另一个数据的信息。

这是我当前的代码：

<template>
  <base-header>
    <template>
      <b-card body>
        <b-card-header class="border-0">
          <h3 class="mb-0">Stock List</h3>
        </b-card-header>
        <template>
          <div class="text-center">
            <b-table responsive dark striped hover:true :items="items" :fields="fields">
              <template #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
              v-model="currentPage"
              :total-rows="rows"
              :per-page="perPage"
              aria-controls="my-table"
            ></b-pagination>
          </b-card-footer>
        </div>
      </b-card>
    </template>
  </base-header>
</template>

然后是脚本

<script>
// eslint-disable-next-line no-unused-vars
import { getAllProvinces } from '~/api/delivery'
export default {
  // components: {
  // },
  data() {
    return {
      perPage: 10,
      currentPage: 1,
      allStock: 0,
      text: '',
      rows: 100,
      // ubah rows dan perPage biar paginationnya ada value
      items: [],

      fields: [
        {
          key: 'id',
          sortable: true,
          label: 'ID',
          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',
        },
      ],
    }
  },

  mounted() {
    this.getAllStock()
  },
  methods: {
    getAllStock() {
      this.$axios
        .get(
          'API Link'
        )
        .then((res) => {
          // eslint-disable-next-line no-console
          console.log(res.data)
          this.items = res.data.stocks
          this.allStock = res.data
          // eslint-disable-next-line no-console
          // console.log('cek res stock:', JSON.stringify(res.data))
        })
    },
    computed: {
      rows() {
        return this.items.length
      },
    },
  },
}
</script>

<style>
.truncate {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>

Answer 1

文档很漂亮self-explanatory：https://bootstrap-vue.org/docs/components/pagination
但是我在下面的代码中添加了一些注释（模板因此无效！）

<template>
  <div class="overflow-auto">
    <b-pagination
      v-model="currentPage" // this is the most important, bind the currentPage state to the pagination component, two-way data binding
      :total-rows="rows" // display how much total data there is
      :per-page="perPage" // this one will tell how much data per page you want to display
      aria-controls="my-table" // this is for a11y
    ></b-pagination>

    <p class="mt-3">Current Page: {{ currentPage }}</p>

    <b-table
      id="my-table"
      :items="items" // where to look for the data
      :per-page="perPage"
      :current-page="currentPage" // re-use the current value of the pagination component
      small
    ></b-table>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        perPage: 3,
        currentPage: 1,
        items: [ // your items, that you may replace with a new array if fetching an API in between each pagination page change
          { id: 1, first_name: 'Fred', last_name: 'Flintstone' },
          { id: 2, first_name: 'Wilma', last_name: 'Flintstone' },
          { id: 3, first_name: 'Barney', last_name: 'Rubble' },
          { id: 4, first_name: 'Betty', last_name: 'Rubble' },
          { id: 5, first_name: 'Pebbles', last_name: 'Flintstone' },
          { id: 6, first_name: 'Bamm Bamm', last_name: 'Rubble' },
          { id: 7, first_name: 'The Great', last_name: 'Gazzoo' },
          { id: 8, first_name: 'Rockhead', last_name: 'Slate' },
          { id: 9, first_name: 'Pearl', last_name: 'Slaghoople' }
        ]
      }
    },
    computed: {
      rows() {
        return this.items.length
      }
    }
  }
</script>

当然，根据数据量，您可能希望观察 currentPage 值并进行新的 API 调用，获取下一个元素。
这完全取决于 API 的实现，但它本质上是在 URL 的查询参数或 headers.[=18 的某个地方传递 2 而不是 1 =]

正如您在 Github 的 API 中看到的那样：https://docs.github.com/en/rest/reference/repos#list-repositories-for-the-authenticated-user--parameters
他们正在等待 page 和 per_page 参数，因此我们的 VueJS 状态的值表明我们将发送一个新的 API 调用。

如何在 BootstrapVue 中使用分页

How to use pagination in BootstrapVue

vue.js

nuxt.js

bootstrap-vue