使用BootstrapVue的b-pagination配合自定义组件分页时全量展示问题求解

核心原因 #

b-pagination 组件仅负责同步当前页码 currentPage 的值，没有内置自动切割源数据的逻辑，该逻辑是 b-table 组件内部封装的，你使用自定义组件渲染数据需要自己实现数据分页切割。

具体实现步骤 #

1. 新增计算属性返回当前页对应的数据切片
2. 把模板中 v-for 遍历的源数组替换为该计算属性即可

完整代码示例 #

模板部分

<!-- 遍历分页后的切片数据，而非完整源数据 -->
<Appobject
  v-for="obj in paginatedObjects"
  :key="obj.id"
  :obj="obj"
/>

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

脚本部分（选项式API示例）

export default {
  data() {
    return {
      currentPage: 1, // 默认第一页
      perPage: 10, // 每页展示条数，可按需调整
      objects: [], // 完整的源数据数组
      rows: 0 // 总数据条数，等于objects.length
    }
  },
  computed: {
    paginatedObjects() {
      // 计算当前页数据的起始、结束索引
      const startIndex = (this.currentPage - 1) * this.perPage
      const endIndex = startIndex + this.perPage
      // 切割数组返回当前页数据，slice不会修改原数组
      return this.objects.slice(startIndex, endIndex)
    }
  },
  watch: {
    // 监听源数据变化，更新总条数
    objects: {
      handler(val) {
        this.rows = val.length
      },
      immediate: true
    }
  }
}

注意事项 #

• 如果你的数据是后端接口分页返回，不需要做前端切片，只需监听 currentPage 变化，调用接口传入当前页码和每页条数，将接口返回的当前页数据直接渲染即可
• 确保 b-pagination 绑定的 total-rows 是完整源数据的总条数，不要传分页后切片的长度，否则会导致分页器页数计算错误
• 不需要给 Appobject 传递 per-page 和 current-page 属性，除非组件内部有特殊业务逻辑需要用到

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