如何在Bootstrap-Vue中实现分页按钮的分段显示？

b-pagination-nav的limit属性确实只能控制连续显示的页码数量，没法直接实现你要的分段效果。要做到1-3、4-6的分组显示，你得用组件的自定义页码插槽来完全接管页码按钮的渲染逻辑，复用组件自带的交互方法就行。

具体实现代码 #

<template>
  <b-pagination-nav
    :total-rows="33"
    :per-page="5"
    v-model="currentPage"
    :number-of-pages="totalPages"
  >
    <!-- 自定义页码区域 -->
    <template #pages="{ activePage, isDisabled, clickHandler }">
      <!-- 第一组：1-3页 -->
      <b-pagination-nav-button
        v-for="page in firstGroup"
        :key="page"
        :active="page === activePage"
        :disabled="isDisabled(page)"
        @click="clickHandler(page)"
      >
        {{ page }}
      </b-pagination-nav-button>

      <!-- 分段分隔符 -->
      <span class="mx-2 text-muted">|</span>

      <!-- 第二组：4-6页 -->
      <b-pagination-nav-button
        v-for="page in secondGroup"
        :key="page"
        :active="page === activePage"
        :disabled="isDisabled(page)"
        @click="clickHandler(page)"
      >
        {{ page }}
      </b-pagination-nav-button>

      <!-- 第7页 -->
      <b-pagination-nav-button
        :active="7 === activePage"
        :disabled="isDisabled(7)"
        @click="clickHandler(7)"
      >
        7
      </b-pagination-nav-button>
    </template>
  </b-pagination-nav>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalRows: 33,
      perPage: 5
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalRows / this.perPage)
    },
    firstGroup() {
      // 生成1-3的页码数组
      return Array.from({ length: 3 }, (_, i) => i + 1)
    },
    secondGroup() {
      // 生成4-6的页码数组
      return Array.from({ length: 3 }, (_, i) => i + 4)
    }
  }
}
</script>

关键说明 #

• 用#pages插槽完全自定义页码布局，组件会把activePage（当前页）、isDisabled（判断页码是否禁用）、clickHandler（页码点击事件）这些核心方法传给插槽，直接复用就行，不用自己写分页切换逻辑。
• 计算属性totalPages动态计算总页数，避免硬写死7，后续数据量变化时自动适配。
• 分段分隔符可以换成你喜欢的样式，比如省略号...或者其他符号，调整<span>里的内容就行。

如果后续需要更灵活的分组逻辑（比如根据总页数自动调整分组数量），只需要修改firstGroup和secondGroup的生成规则即可。

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