vue如何实现翻页

Vue 实现翻页的方法

在 Vue 中实现翻页功能通常可以通过以下方法完成：

使用计算属性分页

通过计算属性对数据进行分页处理，结合页码和每页显示数量动态计算当前页数据。

data() {
  return {
    items: [], // 数据列表
    currentPage: 1, // 当前页码
    itemsPerPage: 10 // 每页显示数量
  }
},
computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.itemsPerPage
    const end = start + this.itemsPerPage
    return this.items.slice(start, end)
  },
  totalPages() {
    return Math.ceil(this.items.length / this.itemsPerPage)
  }
}

添加翻页控件

在模板中添加翻页按钮，绑定点击事件来改变当前页码。

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

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

使用第三方库

对于更复杂的分页需求，可以使用专门的 Vue 分页组件库：

1. vue-paginate：轻量级分页组件

   

   npm install vue-paginate

2. element-ui 分页：如果使用 Element UI 框架

   <el-pagination
     :current-page="currentPage"
     :page-size="itemsPerPage"
     :total="items.length"
     @current-change="handleCurrentChange"
   />

服务器端分页

对于大数据量情况，建议实现服务器端分页，通过 API 传递页码和每页数量参数。

async fetchData(page) {
  const response = await axios.get('/api/items', {
    params: {
      page,
      limit: this.itemsPerPage
    }
  })
  this.items = response.data.items
  this.totalItems = response.data.total
}

分页样式优化

可以为当前页码添加高亮样式，增强用户体验。

.active-page {
  background-color: #42b983;
  color: white;
}

以上方法可以根据具体项目需求选择使用，计算属性分页适合客户端分页，而服务器端分页更适合大数据量场景。