当前位置：首页 > VUE

vue分页实现

2026-03-28 00:52:39VUE

Vue 分页实现方法

基于 Element UI 的分页组件

Element UI 提供了现成的分页组件 el-pagination，适合快速集成到 Vue 项目中。以下是一个完整的示例：

vue分页实现

<template>
  <div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 50, 100]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</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() {
      // 调用 API 获取数据，传递 currentPage 和 pageSize 参数
      console.log(`当前页码: ${this.currentPage}, 每页条数: ${this.pageSize}`);
    }
  }
}
</script>

自定义分页组件

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

vue分页实现

<template>
  <div>
    <ul class="pagination">
      <li v-for="page in pages" :key="page">
        <button @click="goToPage(page)">{{ page }}</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    totalItems: Number,
    itemsPerPage: Number,
    currentPage: Number
  },
  computed: {
    pages() {
      const pageCount = Math.ceil(this.totalItems / this.itemsPerPage);
      return Array.from({ length: pageCount }, (_, i) => i + 1);
    }
  },
  methods: {
    goToPage(page) {
      this.$emit('page-changed', page);
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  list-style: none;
}
.pagination li {
  margin: 0 5px;
}
</style>

后端分页实现

与后端 API 配合实现分页时，通常需要传递页码和每页条数参数：

async fetchPaginatedData() {
  const response = await axios.get('/api/items', {
    params: {
      page: this.currentPage,
      limit: this.pageSize
    }
  });
  this.items = response.data.items;
  this.total = response.data.total;
}

分页性能优化

对于大数据量分页，可以考虑以下优化措施：

使用虚拟滚动技术替代传统分页
实现无限滚动加载更多内容
添加防抖处理快速翻页请求
缓存已加载的页面数据

// 防抖示例
debouncedFetchData: _.debounce(function() {
  this.fetchData();
}, 300)

以上方法可以根据项目需求选择或组合使用，Element UI 的分页组件适合大多数场景，自定义分页组件则提供了更高的灵活性。

标签: 分页 vue

分享给朋友：

vue 实现tabs

Vue 实现 Tabs 组件的方法使用动态组件和 v-for 在 Vue 中实现 Tabs 可以通过动态组件和 v-for 指令结合完成。定义一个 tabs 数组，包含每个标签的标题和对应的组件。…

vue实现定时

Vue 实现定时功能的方法使用 setInterval 和 clearInterval 在 Vue 中可以通过 setInterval 和 clearInterval 实现定时功能。在组件的 mou…

vue实现快手

Vue 实现类似快手的功能 Vue.js 是一个渐进式 JavaScript 框架，适合构建复杂的单页应用。要实现类似快手的功能，可以结合 Vue 和相关技术栈进行开发。核心功能模块视频流展示…

vue实现阻塞

Vue 实现阻塞的方法在 Vue 中实现阻塞操作通常涉及异步控制、状态管理或生命周期钩子的使用。以下是几种常见方法：使用 async/await 处理异步阻塞通过 async/await 可…

vue实现爬虫

Vue 实现爬虫的基本思路 Vue.js 本身是一个前端框架，主要用于构建用户界面。要实现爬虫功能，通常需要结合后端技术或浏览器自动化工具。以下是几种常见的方法：方法一：Vue + Node.js…

vue列表查询实现

实现 Vue 列表查询功能基础列表渲染在 Vue 中可以通过 v-for 指令实现列表渲染，结合计算属性动态过滤数据： <template> <div> &l…

vue分页实现