当前位置：首页 > VUE

vue项目实现分页功能

2026-02-22 00:24:42VUE

实现分页功能的基本思路

在Vue项目中实现分页功能通常需要前后端协作。前端负责展示分页控件和处理用户交互，后端负责根据分页参数返回对应的数据。以下是常见的实现方式。

前端分页实现

安装必要的依赖（如使用Element UI）：

npm install element-ui

在Vue组件中引入分页组件：

<template>
  <div>
    <el-table :data="currentPageData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentPageData: [], // 当前页数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val
      this.getData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.getData()
    },
    getData() {
      // 模拟前端分页
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      this.currentPageData = this.tableData.slice(start, end)
    }
  },
  created() {
    // 获取所有数据
    fetch('/api/data').then(res => {
      this.tableData = res.data
      this.total = res.data.length
      this.getData()
    })
  }
}
</script>

后端API配合实现

前端请求应包含分页参数：

fetch(`/api/data?page=${this.currentPage}&size=${this.pageSize}`)

后端示例（Node.js Express）：

app.get('/api/data', (req, res) => {
  const page = parseInt(req.query.page) || 1
  const size = parseInt(req.query.size) || 10
  const start = (page - 1) * size
  const end = start + size

  // 从数据库获取数据
  db.query('SELECT * FROM table LIMIT ?, ?', [start, size], (err, results) => {
    if (err) throw err
    db.query('SELECT COUNT(*) as total FROM table', (err, count) => {
      res.json({
        data: results,
        total: count[0].total,
        page,
        size
      })
    })
  })
})

纯前端分页实现

如果数据量不大，可以在前端完成全部数据的分页处理：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    return this.tableData.slice(start, start + this.pageSize)
  }
}

使用第三方库

对于复杂场景，可以考虑使用专门的分页库：

npm install vue-paginate

基本用法：

vue项目实现分页功能

import VuePaginate from 'vue-paginate'
Vue.use(VuePaginate)

<template>
  <paginate
    :page-count="totalPages"
    :click-handler="changePage"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'">
  </paginate>
</template>