如何在 BootstrapVue 中使用分页

Posted 2023-02-22

【中文标题】如何在 BootstrapVue 中使用分页

【英文标题】：How to use pagination in BootstrapVue

【发布时间】：2021-08-20 04:53:38

【问题描述】：

我创建了一个 b 表，用于存储来自 Swagger UI 的 API 中的所有数据，但由于数据在字符串中有很多字符， 我的问题是如何将数据放入每一行都悬停在点击以显示来自 API 的未被截断的真实数据？我试过使用 v-b-tooltip 但它似乎不起作用。如果可以的话，我还想了解更多关于如何使 b 分页在我进一步浏览页面时加载其他数据的信息。

这是我当前的代码：

<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>

【问题讨论】：

抱歉，我从 b 表中删除了 v-b-tooltip 代码，因为它什么也没显示

很抱歉给您带来不便，原来我把vb-tooltip放在了标签里面，应该在和之间> 所以现在悬停已解决。剩下的就是分页

【参考方案1】：

文档非常不言自明：https://bootstrap-vue.org/docs/components/pagination 但是我在下面的代码上加了几个cmet（因此模板无效！）

<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 的查询参数或标题中的某处传递 2 而不是 1。

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