当前位置：首页 > VUE

vue前端分页怎么实现

2026-01-07 04:19:18VUE

前端分页实现方法

在Vue中实现前端分页通常涉及数据分割和页面控制逻辑。以下是常见的实现方式：

使用计算属性分页

通过计算属性对数据进行切片处理：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.allData.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.allData.length / this.pageSize)
  }
}

结合v-for渲染分页数据

模板部分使用计算属性渲染：

vue前端分页怎么实现

<ul>
  <li v-for="item in paginatedData" :key="item.id">
    {{ item.name }}
  </li>
</ul>

添加分页控件

创建分页导航组件：

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

分页逻辑方法

实现页面切换方法：

vue前端分页怎么实现

methods: {
  nextPage() {
    if (this.currentPage < this.totalPages) {
      this.currentPage++
    }
  },
  prevPage() {
    if (this.currentPage > 1) {
      this.currentPage--
    }
  }
}

使用第三方库

对于复杂需求，可以使用现成的分页组件：

import { Pagination } from 'element-ui'

export default {
  components: {
    'el-pagination': Pagination
  }
}

样式优化

添加基础分页样式：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.pagination button {
  margin: 0 5px;
}

完整示例代码

组合以上实现：

export default {
  data() {
    return {
      allData: [], // 从API获取的全部数据
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize
      return this.allData.slice(start, start + this.pageSize)
    },
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize)
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page
    }
  }
}