当前位置：首页 > VUE

vue项目怎么实现分页

2026-01-20 21:06:38VUE

实现分页的基本思路

在Vue项目中实现分页功能，通常需要结合后端API返回的分页数据（如当前页码、每页条数、总条数等）和前端组件展示。以下是常见的实现方式：

使用Element UI的分页组件

Element UI提供了现成的分页组件el-pagination，适合快速集成：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 50]"
    :page-size="pageSize"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      total: 0,
      listData: []
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 调用API，传递currentPage和pageSize参数
      api.getList({
        page: this.currentPage,
        size: this.pageSize
      }).then(res => {
        this.listData = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  mounted() {
    this.fetchData();
  }
}
</script>

自定义分页组件

如果需要完全自定义分页逻辑，可以手动实现：

<template>
  <div class="pagination">
    <button 
      @click="prevPage" 
      :disabled="currentPage === 1">
      上一页
    </button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button 
      @click="nextPage" 
      :disabled="currentPage === totalPages">
      下一页
    </button>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    totalPages() {
      return Math.ceil(this.totalItems / this.itemsPerPage);
    }
  },
  methods: {
    prevPage() {
      if (this.currentPage > 1) {
        this.$emit('page-changed', this.currentPage - 1);
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.$emit('page-changed', this.currentPage + 1);
      }
    }
  }
}
</script>

后端API交互要点

请求参数：通常需要传递page（当前页码）和size（每页条数）。
响应数据：后端应返回list（当前页数据）、total（总条数）等字段。

// 示例API调用
axios.get('/api/data', {
  params: {
    page: this.currentPage,
    size: this.pageSize
  }
}).then(response => {
  this.listData = response.data.list;
  this.total = response.data.total;
});

分页样式优化

通过CSS调整分页组件的样式，例如间距、按钮状态等：

vue项目怎么实现分页

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 10px;
}
.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}