如何用vue实现分页

实现分页的基本思路

在Vue中实现分页功能通常需要结合后端API返回的数据和前端的分页逻辑。分页的核心是计算当前页的数据范围，并根据总数据量生成分页按钮。

后端API分页参数

大多数后端API会接受分页参数，例如page（当前页码）和pageSize（每页条数）。API返回的数据通常包含items（当前页数据）和total（总数据量）。

// 示例API请求参数
const params = {
  page: 1,
  pageSize: 10
}

前端分页组件

使用Vue实现分页时，可以创建一个分页组件，接收currentPage、totalItems和itemsPerPage作为props，并发出page-changed事件。

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)"
      :disabled="currentPage === 1"
    >
      上一页
    </button>

    <button
      v-for="page in pages"
      :key="page"
      @click="changePage(page)"
      :class="{ active: page === currentPage }"
    >
      {{ page }}
    </button>

    <button
      @click="changePage(currentPage + 1)"
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    totalItems: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page)
      }
    }
  }
}
</script>

<style>
.pagination button {
  margin: 0 5px;
}
.pagination button.active {
  font-weight: bold;
  color: blue;
}
</style>

在父组件中使用分页

父组件需要管理当前页码，并在页码变化时重新获取数据。

<template>
  <div>
    <table>
      <!-- 显示当前页数据 -->
      <tr v-for="item in currentItems" :key="item.id">
        <td>{{ item.name }}</td>
      </tr>
    </table>

    <pagination
      :current-page="currentPage"
      :total-items="totalItems"
      :items-per-page="itemsPerPage"
      @page-changed="handlePageChange"
    />
  </div>
</template>

<script>
import Pagination from './Pagination.vue'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0,
      currentItems: []
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      // 模拟API调用
      const params = {
        page: this.currentPage,
        pageSize: this.itemsPerPage
      }

      // 实际项目中这里应该是axios调用
      mockApi(params).then(response => {
        this.currentItems = response.items
        this.totalItems = response.total
      })
    },
    handlePageChange(page) {
      this.currentPage = page
      this.fetchData()
    }
  }
}

// 模拟API函数
function mockApi(params) {
  const allItems = Array.from({length: 100}, (_, i) => ({id: i+1, name: `Item ${i+1}`}))
  const start = (params.page - 1) * params.pageSize
  const end = start + params.pageSize
  return Promise.resolve({
    items: allItems.slice(start, end),
    total: allItems.length
  })
}
</script>

前端分页实现

如果数据量不大，也可以在前端实现完整分页：

computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.allItems.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.allItems.length / this.itemsPerPage)
  }
}

分页优化技巧

对于大量数据的分页，可以限制显示的页码按钮数量，只显示当前页附近的几个页码：

pages() {
  const range = []
  const maxVisible = 5 // 最多显示5个页码
  let start = Math.max(1, this.currentPage - Math.floor(maxVisible / 2))
  let end = Math.min(this.totalPages, start + maxVisible - 1)

  if (end - start + 1 < maxVisible) {
    start = Math.max(1, end - maxVisible + 1)
  }

  for (let i = start; i <= end; i++) {
    range.push(i)
  }

  return range
}

分页样式美化

可以使用CSS美化分页组件，添加过渡效果：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  padding: 5px 10px;
  margin: 0 2px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
  transition: all 0.3s;
}

.pagination button:hover {
  background: #eee;
}

.pagination button.active {
  background: #4285f4;
  color: white;
  border-color: #4285f4;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}