vue实现简单分页

实现基础分页功能

在Vue中实现简单分页需要几个核心步骤：数据分片、页码计算、翻页逻辑。以下是一个基于Vue 3的示例实现方案：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>第 {{ currentPage }} 页 / 共 {{ totalPages }} 页</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage
      const end = start + this.itemsPerPage
      return this.data.slice(start, end)
    },
    totalPages() {
      return Math.ceil(this.data.length / this.itemsPerPage)
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--
      }
    }
  },
  async created() {
    // 模拟API获取数据
    this.data = Array.from({ length: 100 }, (_, i) => ({
      id: i + 1,
      name: `项目 ${i + 1}`
    }))
  }
}
</script>

添加页码选择器

扩展基础分页功能，添加页码跳转选择：

<template>
  <div>
    <!-- 数据列表同上 -->
    <div class="pagination">
      <button @click="goToPage(1)" :disabled="currentPage === 1">首页</button>
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>

      <span v-for="page in displayedPages" :key="page">
        <button 
          @click="goToPage(page)" 
          :class="{ active: currentPage === page }"
        >
          {{ page }}
        </button>
      </span>

      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
      <button @click="goToPage(totalPages)" :disabled="currentPage === totalPages">末页</button>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    displayedPages() {
      const range = 2 // 显示当前页前后的页数
      let start = Math.max(1, this.currentPage - range)
      let end = Math.min(this.totalPages, this.currentPage + range)

      if (this.currentPage - start < range) {
        end = Math.min(this.totalPages, end + (range - (this.currentPage - start)))
      }
      if (end - this.currentPage < range) {
        start = Math.max(1, start - (range - (end - this.currentPage)))
      }

      return Array.from({ length: end - start + 1 }, (_, i) => start + i)
    }
  },
  methods: {
    goToPage(page) {
      this.currentPage = page
    }
  }
}
</script>

<style>
.active {
  background-color: #42b983;
  color: white;
}
</style>

使用分页组件库

对于生产环境，推荐使用成熟的分页组件库：

1. 安装Element Plus分页组件：

   npm install element-plus

2. 使用示例：

   

   
   <template>
   <el-pagination
    v-model:currentPage="currentPage"
    :page-size="itemsPerPage"
    :total="data.length"
    layout="prev, pager, next, jumper"
    @current-change="handleCurrentChange"
   />
   </template>

import { ElPagination } from 'element-plus'

export default { components: { ElPagination }, methods: { handleCurrentChange(val) { this.currentPage = val } } }

```

分页与API结合

实际项目中通常需要与后端API配合实现分页：

methods: {
  async fetchData(page = 1) {
    try {
      const response = await axios.get('/api/items', {
        params: {
          page,
          per_page: this.itemsPerPage
        }
      })
      this.data = response.data.items
      this.totalItems = response.data.total
    } catch (error) {
      console.error('获取数据失败:', error)
    }
  }
},
created() {
  this.fetchData()
}

性能优化建议

对于大数据量分页，考虑以下优化方案：

• 使用虚拟滚动代替传统分页
• 实现前端缓存已加载的页码数据
• 添加加载状态指示器
• 实现防抖处理快速翻页操作

data() {
  return {
    isLoading: false,
    cachedPages: {}
  }
},
methods: {
  async loadPage(page) {
    if (this.cachedPages[page]) {
      this.paginatedData = this.cachedPages[page]
      return
    }

    this.isLoading = true
    try {
      const data = await fetchPageData(page)
      this.cachedPages[page] = data
      this.paginatedData = data
    } finally {
      this.isLoading = false
    }
  }
}