vue实现列表分页

Vue实现列表分页的方法

使用计算属性实现分页

通过计算属性对原始数据进行切片处理，结合v-for渲染分页后的数据片段。需定义currentPage和pageSize两个响应式变量。

data() {
  return {
    items: [], // 原始数据
    currentPage: 1,
    pageSize: 10
  }
},
computed: {
  paginatedItems() {
    const start = (this.currentPage - 1) * this.pageSize
    const end = start + this.pageSize
    return this.items.slice(start, end)
  }
}

添加分页导航控件

在模板中添加页码切换按钮，通过方法修改currentPage值。可结合v-for动态生成页码按钮。

<button 
  v-for="page in totalPages" 
  @click="currentPage = page"
  :class="{ active: currentPage === page }"
>
  {{ page }}
</button>

computed: {
  totalPages() {
    return Math.ceil(this.items.length / this.pageSize)
  }
}

使用第三方库（推荐）

对于复杂场景，可使用专门的分页组件库：

1. Element UI：<el-pagination>组件

   <el-pagination
   :current-page="currentPage"
   :page-size="pageSize"
   :total="totalItems"
   @current-change="handlePageChange"
   />

2. Vuetify：<v-pagination>组件
3. Bootstrap-Vue：<b-pagination>组件

服务器端分页处理

当数据量极大时，应结合API实现服务端分页：

async fetchData() {
  const res = await axios.get('/api/items', {
    params: {
      page: this.currentPage,
      size: this.pageSize
    }
  })
  this.items = res.data.items
  this.totalItems = res.data.totalCount
}

分页样式优化

1. 添加过渡动画增强用户体验

   <transition-group name="fade">
   <div v-for="item in paginatedItems" :key="item.id">
    {{ item.name }}
   </div>
   </transition-group>

2. 实现页码跳转输入框
3. 添加每页条数选择器

注意事项

• 分页组件应始终显示在列表下方或固定位置
• 当数据为空时显示友好提示
• 在切换页码时考虑加载状态的显示
• 移动端需优化分页控件的触摸区域