Bootstrap-vue-3分页组件异常：切换页码时数据项丢失

问题诊断 #

你遇到的是bootstrap-vue-3 v0.5.1版本的已知bug，该版本中b-table的内置分页逻辑与b-pagination组件配合时，会出现页码切换后数据渲染异常的问题。

解决方案 #

方案1：升级组件版本 #

直接将bootstrap-vue-3升级到v0.6.x及以上的稳定版本，新版本已经修复了这个分页渲染的兼容性问题。执行以下命令升级：

npm update bootstrap-vue-3

方案2：手动处理分页逻辑（无需升级） #

如果暂时无法升级组件，可以绕过b-table的内置分页，手动计算分页后的数据：

修改后的完整代码如下：

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

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

    <b-table
      id="my-table"
      :items="paginatedItems"
      small
    ></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      perPage: 3,
      currentPage: 1,
      items: [
        { 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
    },
    paginatedItems() {
      // 手动计算当前页的数据切片
      const start = (this.currentPage - 1) * this.perPage
      const end = start + this.perPage
      return this.items.slice(start, end)
    }
  }
}
</script>

说明：通过新增paginatedItems计算属性，手动对原始数据进行切片处理，同时移除b-table上的:per-page和:current-page属性，完全绕过组件内置的分页逻辑，避免版本bug导致的异常。

内容的提问来源于stack exchange，提问作者Kali