当前位置：首页 > VUE

vue表格如何实现分页

2026-01-21 14:32:48VUE

Vue 表格分页实现方法

在 Vue 中实现表格分页通常需要结合前端分页逻辑和后端 API 支持。以下是两种常见实现方式：

前端分页实现（适合数据量较小的情况）

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

npm install element-ui

代码示例：

<template>
  <div>
    <el-table :data="currentPageData" border>
      <el-table-column prop="name" label="姓名"></el-table-column>
      <el-table-column prop="age" label="年龄"></el-table-column>
    </el-table>

    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableData: [], // 所有数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  computed: {
    currentPageData() {
      const start = (this.currentPage - 1) * this.pageSize
      const end = start + this.pageSize
      return this.tableData.slice(start, end)
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.currentPage = val
    }
  }
}
</script>

后端分页实现（推荐大数据量场景）

API 请求示例：

methods: {
  fetchData() {
    const params = {
      page: this.currentPage,
      size: this.pageSize
    }
    axios.get('/api/data', { params })
      .then(res => {
        this.tableData = res.data.list
        this.total = res.data.total
      })
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

自定义分页组件实现

核心逻辑：

function paginate(array, pageSize, pageNumber) {
  return array.slice((pageNumber - 1) * pageSize, pageNumber * pageSize)
}

模板部分：

<div v-for="item in paginatedData">{{ item.name }}</div>
<button @click="prevPage">上一页</button>
<span>第{{ currentPage }}页</span>
<button @click="nextPage">下一页</button>