Vue3(bootstrap-vue3)分页组件点击PRE时页数递减、表格为空求助

问题原因 #

问题出在b-pagination的aria-controls属性与手动绑定的分页状态冲突：aria-controls会让分页组件自动和指定的b-table同步分页状态（包括当前页、每页条数、总条数），但你同时给b-pagination绑定了v-model，给b-table绑定了current-page，同一个currentPage变量被两个组件双向修改，导致状态混乱，出现点击PRE按钮时分页总数异常减少、表格内容为空的情况。

解决方案 #

方案一：依赖aria-controls自动联动（推荐） #

移除手动绑定的v-model和current-page，让组件自动同步状态，仅监听表格的页码变化来更新显示用的变量：

<template>
  <div class="overflow-auto">
    <b-pagination
      :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="items"
      :per-page="perPage"
      small
      @current-page-change="currentPage = $event"
    ></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
    }
  }
}
</script>

方案二：手动维护分页状态 #

移除aria-controls属性，完全通过currentPage变量手动控制分页状态：

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

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

    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      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
    }
  }
}
</script>

说明 #

• 方案一利用组件内置的自动联动能力，减少手动状态维护的代码，更符合Bootstrap-Vue的设计逻辑。
• 方案二适合需要完全自定义分页逻辑的场景，避免自动联动带来的状态干扰。

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