当前位置：首页 > VUE

分页实现vue

2026-02-10 03:22:48VUE

分页实现的基本思路

在Vue中实现分页功能通常需要结合后端API返回的数据和前端的分页组件。分页的核心是将大量数据分割成多个页面，用户可以通过页码或导航按钮切换不同页面的数据。

后端API设计

后端API需要支持分页参数，通常包括page（当前页码）和pageSize（每页显示的数据条数）。API返回的数据结构应包含当前页的数据列表和总数据量（用于计算总页数）。例如：

{
  "data": [...], // 当前页的数据
  "total": 100   // 总数据量
}

前端分页组件

可以使用现成的分页组件库（如element-ui的el-pagination），也可以手动实现一个简单的分页组件。以下是手动实现分页的核心逻辑：

<template>
  <div>
    <ul>
      <li v-for="item in currentPageData" :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>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [],      // 所有数据（如果前端分页）
      currentPageData: [], // 当前页数据
      currentPage: 1,    // 当前页码
      pageSize: 10,      // 每页条数
      total: 0           // 总数据量
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize);
    }
  },
  methods: {
    fetchData() {
      // 模拟API请求
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.dataList.slice(start, end);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchData();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchData();
      }
    }
  },
  created() {
    // 模拟获取数据
    this.dataList = Array.from({ length: 100 }, (_, i) => ({ id: i, name: `Item ${i}` }));
    this.total = this.dataList.length;
    this.fetchData();
  }
};
</script>

使用Element UI的分页组件

如果使用element-ui，可以更简单地实现分页功能：

<template>
  <div>
    <el-table :data="currentPageData">
      <el-table-column prop="name" label="Name"></el-table-column>
    </el-table>
    <el-pagination
      @current-change="handlePageChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPageData: [],
      currentPage: 1,
      pageSize: 10,
      total: 100
    };
  },
  methods: {
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    },
    fetchData() {
      // 实际项目中调用API
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.dataList.slice(start, end);
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

分页与路由结合

在某些场景下，可能需要将当前页码同步到URL中，以便用户刷新页面时保持当前分页状态。可以通过Vue Router实现：

<script>
export default {
  watch: {
    '$route.query.page'(newPage) {
      this.currentPage = parseInt(newPage) || 1;
      this.fetchData();
    }
  },
  methods: {
    handlePageChange(page) {
      this.$router.push({ query: { ...this.$route.query, page } });
    }
  }
};
</script>