当前位置：首页 > VUE

vue手动实现分页表格

2026-02-20 18:01:40VUE

手动实现分页表格的核心逻辑

分页功能需要结合前端分页逻辑与表格渲染，通过计算当前页数据范围实现。Vue中可通过计算属性动态分割数据。

基础数据结构

定义表格数据源和分页参数：

data() {
  return {
    tableData: [],      // 全部数据
    currentPage: 1,     // 当前页码
    pageSize: 10,       // 每页条数
    total: 0            // 总数据量
  }
}

计算当前页数据

使用计算属性筛选当前页数据：

vue手动实现分页表格

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

模板渲染部分

表格与分页器组合：

<template>
  <div>
    <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(total / pageSize)">
        下一页
      </button>
    </div>
  </div>
</template>

分页逻辑优化

添加总页数计算和页码跳转：

vue手动实现分页表格

methods: {
  goToPage(page) {
    if (page >= 1 && page <= this.totalPages) {
      this.currentPage = page
    }
  }
},
computed: {
  totalPages() {
    return Math.ceil(this.total / this.pageSize)
  }
}

样式增强示例

基础分页样式：

.pagination {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  align-items: center;
}
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

完整组件示例

组合所有功能：

export default {
  data() {
    return {
      tableData: Array.from({length: 100}, (_,i) => ({ id: i+1 })),
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    total() {
      return this.tableData.length
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.tableData.slice(start, start + this.pageSize)
    }
  }
}