bootstrap和vue实现分页

Bootstrap 与 Vue 实现分页的方法

使用 Bootstrap 分页组件

Bootstrap 提供了现成的分页组件，可以通过 ul 标签和 page-item、page-link 类快速实现分页样式。

<nav aria-label="Page navigation">
  <ul class="pagination">
    <li class="page-item"><a class="page-link" href="#">Previous</a></li>
    <li class="page-item"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">Next</a></li>
  </ul>
</nav>

结合 Vue 动态生成分页

在 Vue 中，可以通过计算属性动态生成分页按钮，并根据当前页高亮显示。

<template>
  <nav aria-label="Page navigation">
    <ul class="pagination">
      <li class="page-item" :class="{ disabled: currentPage === 1 }">
        <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">Previous</a>
      </li>
      <li 
        v-for="page in totalPages" 
        :key="page" 
        class="page-item" 
        :class="{ active: currentPage === page }"
      >
        <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
      </li>
      <li class="page-item" :class="{ disabled: currentPage === totalPages }">
        <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">Next</a>
      </li>
    </ul>
  </nav>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      totalPages: 10
    };
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.currentPage = page;
        // 触发数据加载逻辑
      }
    }
  }
};
</script>

分页数据绑定

通常分页需要与后端 API 交互，通过 currentPage 和 pageSize 控制数据加载。

methods: {
  async fetchData() {
    const response = await axios.get('/api/data', {
      params: {
        page: this.currentPage,
        pageSize: 10
      }
    });
    this.data = response.data.items;
    this.totalPages = Math.ceil(response.data.total / 10);
  },
  changePage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page;
      this.fetchData();
    }
  }
}

分页样式优化

Bootstrap 分页默认样式可以通过自定义 CSS 调整，例如修改激活状态颜色。

.pagination .page-item.active .page-link {
  background-color: #007bff;
  border-color: #007bff;
}

响应式分页

对于移动端，可以隐藏部分页码按钮，仅显示前后导航和当前页。

computed: {
  displayedPages() {
    const range = 2; // 显示当前页前后的页数
    const start = Math.max(1, this.currentPage - range);
    const end = Math.min(this.totalPages, this.currentPage + range);
    return Array.from({ length: end - start + 1 }, (_, i) => start + i);
  }
}

在模板中使用 displayedPages 替代 totalPages，以减少按钮数量。