vue实现表格页面分页

实现表格分页的基本思路

在Vue中实现表格分页通常需要结合前端分页逻辑和后端API支持。前端分页适用于数据量较小的情况，直接截取数组展示；后端分页则需要通过API接口按需请求数据。

前端分页实现方法

创建计算属性处理分页数据：

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

配置分页参数：

data() {
  return {
    currentPage: 1,
    pageSize: 10,
    tableData: [] // 原始数据
  }
}

模板中使用分页控件：

<el-table :data="paginatedData">
  <!-- 表格列定义 -->
</el-table>

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

后端分页实现方法

请求数据时携带分页参数：

methods: {
  fetchData() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    api.getTableData(params).then(res => {
      this.tableData = res.data.list
      this.total = res.data.total
    })
  }
}

分页事件处理方法：

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

使用第三方组件库

Element UI分页组件示例：

<template>
  <div>
    <el-table :data="tableData">
      <!-- 表格内容 -->
    </el-table>

    <el-pagination
      background
      layout="prev, pager, next"
      :total="1000">
    </el-pagination>
  </div>
</template>

Ant Design Vue分页组件示例：

<a-table
  :columns="columns"
  :data-source="data"
  :pagination="{ pageSize: 10 }"
/>

自定义分页组件实现

创建可复用的分页组件：

// Pagination.vue
props: {
  total: Number,
  current: Number,
  pageSize: Number
},
methods: {
  changePage(page) {
    this.$emit('change', page)
  }
}

在父组件中使用：

<custom-pagination
  :total="total"
  :current="currentPage"
  :page-size="pageSize"
  @change="handlePageChange"
/>

性能优化建议

大数据量时采用虚拟滚动代替分页 缓存已请求的分页数据减少重复请求 添加加载状态提升用户体验 分页器显示总数和页码跳转功能

常见问题处理

页码超出范围时重置到第一页 数据为空时显示友好提示 分页参数与筛选条件联动 URL中保持分页状态便于分享链接