当前位置：首页 > VUE

vue Bootstrap实现分页

2026-03-28 20:08:12VUE

Vue Bootstrap 分页实现方法

在 Vue 项目中使用 Bootstrap 实现分页功能，可以通过以下步骤完成：

安装 Bootstrap 和 Vue Bootstrap

确保项目中已安装 Bootstrap 和 Vue Bootstrap。如果没有安装，可以通过以下命令安装：

npm install bootstrap @popperjs/core
npm install bootstrap-vue

在 main.js 中引入 Bootstrap 和 Vue Bootstrap：

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import { BootstrapVue } from 'bootstrap-vue'
Vue.use(BootstrapVue)

使用 `b-pagination` 组件

Vue Bootstrap 提供了 b-pagination 组件，可以轻松实现分页功能。以下是一个基本示例：

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

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalRows: 100,
      perPage: 10
    }
  }
}
</script>

分页与表格数据绑定

通常分页需要与表格数据绑定，以下是一个完整示例：

<template>
  <div>
    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      :fields="fields"
    ></b-table>
    <b-pagination
      v-model="currentPage"
      :total-rows="totalRows"
      :per-page="perPage"
      aria-controls="my-table"
    ></b-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      perPage: 5,
      totalRows: 1,
      fields: ['id', 'name', 'age'],
      items: [
        { id: 1, name: 'John', age: 20 },
        { id: 2, name: 'Jane', age: 22 },
        { id: 3, name: 'Bob', age: 25 },
        { id: 4, name: 'Alice', age: 23 },
        { id: 5, name: 'Tom', age: 21 },
        { id: 6, name: 'Jerry', age: 24 }
      ]
    }
  },
  created() {
    this.totalRows = this.items.length
  }
}
</script>

自定义分页样式

可以通过 b-pagination 组件的属性自定义分页样式：

<b-pagination
  v-model="currentPage"
  :total-rows="totalRows"
  :per-page="perPage"
  size="sm"
  align="center"
  pills
></b-pagination>

分页事件处理

可以通过 @change 事件监听页码变化：

<b-pagination
  v-model="currentPage"
  :total-rows="totalRows"
  :per-page="perPage"
  @change="onPageChange"
></b-pagination>

methods: {
  onPageChange(page) {
    console.log('Current page is: ' + page)
    // 可以在这里处理数据加载逻辑
  }
}

分页与 API 数据加载

在实际项目中，分页通常与后端 API 结合使用：

vue Bootstrap实现分页

methods: {
  async fetchData(page) {
    const response = await axios.get(`/api/items?page=${page}&perPage=${this.perPage}`)
    this.items = response.data.items
    this.totalRows = response.data.total
  },
  onPageChange(page) {
    this.fetchData(page)
  }
},
created() {
  this.fetchData(1)
}

通过以上方法，可以在 Vue 项目中轻松实现 Bootstrap 分页功能，并根据需求进行定制和扩展。