当前位置：首页 > VUE

vue表格如何实现分页

2026-02-22 05:54:40VUE

实现Vue表格分页的方法

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

前端分页实现

安装必要的依赖（如element-ui或其他UI库）：

npm install element-ui

引入分页组件和表格组件：

import { ElTable, ElPagination } from 'element-ui'

模板部分：

vue表格如何实现分页

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

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

脚本部分：

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: {
  handleSizeChange(val) {
    this.pageSize = val
  },
  handleCurrentChange(val) {
    this.currentPage = val
  }
}

后端分页实现

模板部分与前端分页类似，主要区别在数据获取逻辑：

vue表格如何实现分页

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

    axios.get('/api/data', { params })
      .then(response => {
        this.tableData = response.data.list
        this.total = response.data.total
      })
  },
  handleSizeChange(val) {
    this.pageSize = val
    this.fetchData()
  },
  handleCurrentChange(val) {
    this.currentPage = val
    this.fetchData()
  }
}

自定义分页组件实现

如果需要完全自定义分页逻辑，可以创建自己的分页组件：

分页组件模板：

<div class="pagination">
  <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
  <span>第 {{ currentPage }} 页</span>
  <button @click="nextPage" :disabled="currentPage >= totalPages">下一页</button>
</div>

分页逻辑：

props: {
  totalItems: Number,
  itemsPerPage: Number,
  currentPage: Number
},
computed: {
  totalPages() {
    return Math.ceil(this.totalItems / this.itemsPerPage)
  }
},
methods: {
  prevPage() {
    this.$emit('page-change', this.currentPage - 1)
  },
  nextPage() {
    this.$emit('page-change', this.currentPage + 1)
  }
}

以上方法可以根据项目需求选择适合的实现方式，Element UI等组件库提供了开箱即用的分页解决方案，而自定义实现则提供了更大的灵活性。