当前位置：首页 > VUE

vue的分页怎么实现

2026-01-20 16:53:45VUE

实现 Vue 分页的常见方法

使用第三方库（如 element-ui 或 vant）

安装 element-ui 分页组件：

npm install element-ui

在组件中引入并使用：

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 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: 100
    }
  },
  methods: {
    handleSizeChange(val) {
      this.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.fetchData();
    },
    fetchData() {
      // 根据 currentPage 和 pageSize 请求数据
    }
  }
}
</script>

自定义分页组件

创建一个简单的分页组件：

<template>
  <div class="pagination">
    <button 
      @click="prevPage" 
      :disabled="currentPage === 1">
      上一页
    </button>
    <span>第 {{ currentPage }} 页</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() {
      this.$emit('page-change', this.currentPage - 1);
    },
    nextPage() {
      this.$emit('page-change', this.currentPage + 1);
    }
  }
}
</script>

结合后端 API 实现分页

在 Vue 组件中调用分页接口：

<script>
export default {
  data() {
    return {
      dataList: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  created() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const res = await axios.get('/api/data', {
        params: {
          page: this.currentPage,
          size: this.pageSize
        }
      });
      this.dataList = res.data.list;
      this.total = res.data.total;
    },
    handlePageChange(page) {
      this.currentPage = page;
      this.fetchData();
    }
  }
}
</script>

使用计算属性实现前端分页

适用于数据量较小的情况：

<script>
export default {
  data() {
    return {
      allData: [], // 所有数据
      currentPage: 1,
      pageSize: 10
    }
  },
  computed: {
    paginatedData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      return this.allData.slice(start, end);
    },
    totalPages() {
      return Math.ceil(this.allData.length / this.pageSize);
    }
  }
}
</script>

分页样式优化建议

添加 CSS 样式美化分页组件：

vue的分页怎么实现

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