用vue实现前端分页

实现前端分页的基本思路

在Vue中实现前端分页通常涉及以下核心逻辑：将总数据分割为多个页面，根据当前页码动态显示对应数据，并提供分页控件供用户切换页面。以下是一个清晰的实现方案。

准备分页数据

假设已有从API或本地获取的完整数据列表totalData，需定义分页相关变量：

data() {
  return {
    totalData: [],      // 所有数据
    currentPage: 1,     // 当前页码
    pageSize: 10,       // 每页显示条数
    paginatedData: []   // 当前页数据
  }
}

计算分页数据

使用计算属性动态筛选当前页数据，避免直接操作原始数据：

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

渲染分页内容

在模板中遍历displayedData显示当前页数据：

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

添加分页控件

创建分页按钮组，允许用户切换页面：

<div class="pagination">
  <button 
    @click="currentPage = 1" 
    :disabled="currentPage === 1">
    首页
  </button>
  <button 
    @click="currentPage--" 
    :disabled="currentPage === 1">
    上一页
  </button>

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

  <button 
    @click="currentPage++" 
    :disabled="currentPage === totalPages">
    下一页
  </button>
  <button 
    @click="currentPage = totalPages" 
    :disabled="currentPage === totalPages">
    末页
  </button>
</div>

样式优化

为分页按钮添加基础样式提升用户体验：

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  border: 1px solid #ddd;
}
.pagination button.active {
  background-color: #42b983;
  color: white;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

动态调整页码

监听页码变化，确保其在有效范围内：

watch: {
  currentPage(newVal) {
    if (newVal < 1) this.currentPage = 1;
    if (newVal > this.totalPages) this.currentPage = this.totalPages;
  }
}

使用第三方库（可选）

如需快速实现复杂分页，可考虑使用现成组件库：

npm install element-plus

示例代码：

<template>
  <el-pagination
    v-model:current-page="currentPage"
    :page-size="pageSize"
    :total="totalData.length"
    layout="prev, pager, next"
  />
</template>

完整组件示例

整合上述代码的完整单文件组件：

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

    <div class="pagination">
      <button @click="currentPage = 1" :disabled="currentPage === 1">首页</button>
      <button @click="currentPage--" :disabled="currentPage === 1">上一页</button>

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

      <button @click="currentPage++" :disabled="currentPage === totalPages">下一页</button>
      <button @click="currentPage = totalPages" :disabled="currentPage === totalPages">末页</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      totalData: Array.from({ length: 50 }, (_, i) => ({ id: i, name: `项目 ${i}` })),
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalData.length / this.pageSize);
    },
    displayedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.totalData.slice(start, end);
    }
  },
  watch: {
    currentPage(newVal) {
      if (newVal < 1) this.currentPage = 1;
      if (newVal > this.totalPages) this.currentPage = this.totalPages;
    }
  }
}
</script>