当前位置：首页 > VUE

vue实现分页数据

2026-01-20 19:08:44VUE

实现分页数据的基本思路

在Vue中实现分页数据通常需要结合后端API和前端分页组件。后端负责处理数据分页逻辑，前端负责展示分页控件和当前页数据。

后端API要求

后端API需要支持分页参数，通常包括page（当前页码）和limit（每页条数）。API返回结构应包含：

当前页数据列表
总数据量（用于计算总页数）
其他分页相关信息

示例API响应：

{
  "data": [...],
  "total": 100,
  "page": 1,
  "limit": 10
}

前端实现步骤

定义分页状态

在Vue组件中定义分页相关数据：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: []
  }
}

获取分页数据方法

创建获取数据的方法，通常使用axios等HTTP客户端：

methods: {
  fetchData() {
    const params = {
      page: this.currentPage,
      limit: this.pageSize
    }

    axios.get('/api/items', { params })
      .then(response => {
        this.items = response.data.data
        this.totalItems = response.data.total
      })
  }
}

监听分页变化

在分页组件变化时重新获取数据：

watch: {
  currentPage() {
    this.fetchData()
  },
  pageSize() {
    this.currentPage = 1  // 重置页码
    this.fetchData()
  }
}

使用分页组件

Element UI分页组件示例

如果使用Element UI，可以这样实现：

<el-pagination
  @size-change="handleSizeChange"
  @current-change="handlePageChange"
  :current-page="currentPage"
  :page-sizes="[10, 20, 50, 100]"
  :page-size="pageSize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="totalItems">
</el-pagination>

对应方法：

methods: {
  handleSizeChange(val) {
    this.pageSize = val
  },
  handlePageChange(val) {
    this.currentPage = val
  }
}

纯前端分页实现

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

vue实现分页数据

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

最佳实践建议

对于大数据量，始终使用后端分页
添加加载状态指示器
考虑添加防抖处理频繁的页码切换
保留分页参数在URL中，支持页面刷新后恢复
处理API错误情况

完整组件示例

<template>
  <div>
    <table>
      <!-- 数据展示 -->
    </table>

    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      items: [],
      loading: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.loading = true
      const params = {
        page: this.currentPage,
        limit: this.pageSize
      }

      axios.get('/api/items', { params })
        .then(response => {
          this.items = response.data.data
          this.totalItems = response.data.total
        })
        .finally(() => {
          this.loading = false
        })
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handlePageChange(val) {
      this.currentPage = val
    }
  },
  watch: {
    currentPage() {
      this.fetchData()
    },
    pageSize() {
      this.currentPage = 1
      this.fetchData()
    }
  }
}
</script>