当前位置：首页 > VUE

vue 实现页面表格分页

2026-02-22 05:48:25VUE

Vue 实现表格分页的方法

基础实现

安装依赖（如使用第三方分页组件）：

npm install element-ui  # 以Element UI为例

在Vue文件中引入表格和分页组件：

<template>
  <div>
    <el-table :data="currentTableData" border>
      <!-- 表格列定义 -->
      <el-table-column prop="id" label="ID"></el-table-column>
      <el-table-column prop="name" label="姓名"></el-table-column>
    </el-table>

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

<script>
export default {
  data() {
    return {
      tableData: [],     // 全部数据
      currentTableData: [], // 当前页数据
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 模拟API请求
      this.tableData = Array.from({length: 100}, (_,i) => ({id: i+1, name: `用户${i+1}`}))
      this.total = this.tableData.length
      this.updateCurrentData()
    },
    updateCurrentData() {
      const start = (this.currentPage - 1) * this.pageSize
      this.currentTableData = this.tableData.slice(start, start + this.pageSize)
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.updateCurrentData()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.updateCurrentData()
    }
  },
  created() {
    this.fetchData()
  }
}
</script>

服务端分页实现

当数据量较大时，建议采用服务端分页：

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

自定义分页组件

如需自定义分页UI：

<template>
  <div class="pagination">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in visiblePages" :key="page">
      <button @click="goToPage(page)" :class="{active: currentPage === page}">
        {{ page }}
      </button>
    </span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  props: ['currentPage', 'total', 'pageSize'],
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    visiblePages() {
      // 返回当前可见的页码数组
      const range = 2
      let start = Math.max(1, this.currentPage - range)
      let end = Math.min(this.totalPages, this.currentPage + range)
      return Array.from({length: end-start+1}, (_,i) => start+i)
    }
  },
  methods: {
    prevPage() {
      this.$emit('page-change', this.currentPage - 1)
    },
    nextPage() {
      this.$emit('page-change', this.currentPage + 1)
    },
    goToPage(page) {
      this.$emit('page-change', page)
    }
  }
}
</script>

<style>
.pagination button.active {
  background-color: #409EFF;
  color: white;
}
</style>

性能优化技巧

对于大数据量的前端分页，可使用虚拟滚动技术：

// 使用vue-virtual-scroller插件
npm install vue-virtual-scroller

// 组件中使用
<template>
  <RecycleScroller
    class="scroller"
    :items="currentTableData"
    :item-size="50"
    key-field="id"
    v-slot="{ item }">
    <div class="item">
      {{ item.id }} - {{ item.name }}
    </div>
  </RecycleScroller>
</template>