当前位置：首页 > VUE

vue和bootstrap实现分页

2026-02-23 15:42:22VUE

使用 Vue 和 Bootstrap 实现分页

安装依赖

确保项目中已安装 Vue 和 Bootstrap。通过 npm 或 yarn 安装 Bootstrap 及其 Vue 适配组件：

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

引入 Bootstrap 样式和组件

在项目的入口文件（如 main.js）中引入 Bootstrap 样式和 BootstrapVue：

vue和bootstrap实现分页

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import BootstrapVue from 'bootstrap-vue'

Vue.use(BootstrapVue)

分页组件实现

在 Vue 组件中使用 BootstrapVue 的 <b-pagination> 组件实现分页功能。以下是一个完整示例：

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

    <b-table
      id="my-table"
      :items="items"
      :per-page="perPage"
      :current-page="currentPage"
      small
    ></b-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      items: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        // 更多数据...
      ],
      perPage: 5,
      currentPage: 1
    }
  },
  computed: {
    totalRows() {
      return this.items.length
    }
  }
}
</script>

自定义分页行为

通过监听 currentPage 的变化或调用 API 实现动态数据加载：

vue和bootstrap实现分页

watch: {
  currentPage(newVal) {
    this.fetchData(newVal)
  }
},
methods: {
  fetchData(page) {
    // 调用 API 获取分页数据
    axios.get(`/api/items?page=${page}`)
      .then(response => {
        this.items = response.data.items
        this.totalRows = response.data.total
      })
  }
}

分页样式调整

BootstrapVue 的分页组件支持多种样式配置，例如对齐方式、大小等：

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

服务器端分页

对于大数据量场景，建议结合后端分页接口。每次翻页时重新请求数据：

fetchData(page) {
  axios.get(`/api/items?page=${page}&limit=${this.perPage}`)
    .then(response => {
      this.items = response.data.items
      this.totalRows = response.data.total
    })
}

通过以上步骤，可以快速实现基于 Vue 和 Bootstrap 的分页功能，同时支持客户端和服务器端分页模式。