当前位置：首页 > VUE

vue实现分页表

2026-03-30 05:54:15VUE

实现分页表格的基本思路

Vue中实现分页表格通常需要结合以下核心功能：数据分片（当前页数据）、页码控制（上一页/下一页/跳转）、表格渲染。通过计算属性动态截取数据，配合分页组件完成交互。

基础实现步骤

数据准备

data() {
  return {
    tableData: [],      // 全部数据（可通过接口获取）
    currentPage: 1,     // 当前页码
    pageSize: 10        // 每页条数
  }
}

计算当前页数据

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

模板结构示例

<template>
  <table>
    <tr v-for="(item, index) in paginatedData" :key="index">
      <!-- 表格内容渲染 -->
    </tr>
  </table>

  <div class="pagination">
    <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页</span>
    <button 
      @click="currentPage++" 
      :disabled="currentPage >= Math.ceil(tableData.length / pageSize)">
      下一页
    </button>
  </div>
</template>

高级功能扩展

动态页码选择器

methods: {
  setPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page
    }
  }
},
computed: {
  totalPages() {
    return Math.ceil(this.tableData.length / this.pageSize)
  },
  pageNumbers() {
    return Array.from({ length: this.totalPages }, (_, i) => i + 1)
  }
}

模板添加页码按钮

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

结合Element UI等组件库

对于快速开发，可以使用现成的分页组件：

vue实现分页表

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

<el-pagination
  @current-change="setPage"
  :current-page="currentPage"
  :page-size="pageSize"
  :total="tableData.length">
</el-pagination>

性能优化建议

大数据量时采用虚拟滚动替代分页
分页请求后端数据时使用loading状态
添加本地缓存减少重复请求
分页器显示页码范围时限制最大显示按钮数

完整示例代码

export default {
  data() {
    return {
      tableData: Array(100).fill().map((_, i) => ({ id: i, name: `Item ${i}` })),
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.tableData.length / this.pageSize)
    }
  },
  methods: {
    setPage(page) {
      this.currentPage = page
    }
  }
}

<template>
  <table>
    <tr v-for="item in paginatedData" :key="item.id">
      <td>{{ item.id }}</td>
      <td>{{ item.name }}</td>
    </tr>
  </table>

  <div class="pagination">
    <button @click="setPage(currentPage - 1)" :disabled="currentPage === 1">
      Prev
    </button>

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

    <button 
      @click="setPage(currentPage + 1)" 
      :disabled="currentPage >= totalPages">
      Next
    </button>
  </div>
</template>