当前位置：首页 > VUE

vue实现分页

2026-02-25 14:00:20VUE

实现分页的基本思路

在Vue中实现分页功能通常需要结合后端API返回的数据和前端的分页组件。分页的核心逻辑包括计算总页数、当前页码、每页显示的数据量，并根据这些参数动态渲染数据和分页控件。

分页组件的基本结构

创建一个分页组件需要定义当前页码、每页数据量、总数据量等props，并触发页码变更事件。以下是一个基础的分页组件示例：

<template>
  <div class="pagination">
    <button 
      @click="changePage(currentPage - 1)" 
      :disabled="currentPage === 1"
    >
      上一页
    </button>
    <span 
      v-for="page in pages" 
      :key="page" 
      @click="changePage(page)"
      :class="{ active: currentPage === page }"
    >
      {{ page }}
    </span>
    <button 
      @click="changePage(currentPage + 1)" 
      :disabled="currentPage === totalPages"
    >
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    currentPage: {
      type: Number,
      required: true
    },
    itemsPerPage: {
      type: Number,
      default: 10
    },
    totalItems: {
      type: Number,
      required: true
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    },
    pages() {
      const range = [];
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i);
      }
      return range;
    }
  },
  methods: {
    changePage(page) {
      if (page >= 1 && page <= this.totalPages) {
        this.$emit('page-changed', page);
      }
    }
  }
};
</script>

在父组件中使用分页

父组件需要管理数据列表和分页状态，通常通过API获取数据并传递给分页组件：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">
        {{ item.name }}
      </li>
    </ul>
    <pagination
      :current-page="currentPage"
      :items-per-page="itemsPerPage"
      :total-items="totalItems"
      @page-changed="handlePageChange"
    />
  </div>
</template>

<script>
import Pagination from './Pagination.vue';

export default {
  components: { Pagination },
  data() {
    return {
      dataList: [],
      currentPage: 1,
      itemsPerPage: 10,
      totalItems: 0
    };
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.dataList.slice(start, end);
    }
  },
  methods: {
    fetchData() {
      // 模拟API调用
      const mockData = Array.from({ length: 100 }, (_, i) => ({
        id: i + 1,
        name: `Item ${i + 1}`
      }));
      this.dataList = mockData;
      this.totalItems = mockData.length;
    },
    handlePageChange(page) {
      this.currentPage = page;
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

结合后端API的分页实现

实际项目中，分页通常由后端处理。前端只需传递当前页码和每页数据量，后端返回对应的数据片段和总数：

methods: {
  async fetchData() {
    try {
      const response = await axios.get('/api/items', {
        params: {
          page: this.currentPage,
          limit: this.itemsPerPage
        }
      });
      this.dataList = response.data.items;
      this.totalItems = response.data.total;
    } catch (error) {
      console.error(error);
    }
  },
  handlePageChange(page) {
    this.currentPage = page;
    this.fetchData();
  }
}

分页样式优化

为分页组件添加基础CSS样式，提升用户体验：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.pagination span {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}

.pagination span.active {
  font-weight: bold;
  color: #42b983;
}