当前位置：首页 > VUE

vue分页前台实现

2026-01-19 12:35:02VUE

Vue 分页前台实现

在 Vue 中实现分页功能，通常需要结合后端 API 返回的数据和前端分页组件。以下是几种常见的实现方式：

使用 Element UI 分页组件

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

<template>
  <div>
    <el-table :data="currentPageData">
      <!-- 表格列定义 -->
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-size="pageSize"
      :total="totalItems">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentPage: 1,
      pageSize: 10,
      totalItems: 0,
      allData: [],
      currentPageData: []
    };
  },
  methods: {
    handleCurrentChange(page) {
      this.currentPage = page;
      this.updateCurrentPageData();
    },
    updateCurrentPageData() {
      const start = (this.currentPage - 1) * this.pageSize;
      const end = start + this.pageSize;
      this.currentPageData = this.allData.slice(start, end);
    },
    fetchData() {
      // 模拟 API 调用
      this.allData = Array.from({ length: 100 }, (_, i) => ({ id: i + 1 }));
      this.totalItems = this.allData.length;
      this.updateCurrentPageData();
    }
  },
  created() {
    this.fetchData();
  }
};
</script>

自定义分页组件

如果需要更灵活的控制，可以自定义分页组件：

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <div class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">Previous</button>
      <span>Page {{ currentPage }} of {{ totalPages }}</span>
      <button @click="nextPage" :disabled="currentPage === totalPages">Next</button>
    </div>
  </div>
</template>

<script>
export default {
  props: ['items', 'perPage'],
  data() {
    return {
      currentPage: 1
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.items.length / this.perPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.perPage;
      const end = start + this.perPage;
      return this.items.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    }
  }
};
</script>

结合 Vuex 的状态管理

在大型应用中，分页状态可以存储在 Vuex 中：

// store.js
export default new Vuex.Store({
  state: {
    currentPage: 1,
    pageSize: 10,
    totalItems: 0,
    items: []
  },
  mutations: {
    SET_ITEMS(state, payload) {
      state.items = payload.items;
      state.totalItems = payload.total;
    },
    SET_PAGE(state, page) {
      state.currentPage = page;
    }
  },
  getters: {
    paginatedItems: (state) => {
      const start = (state.currentPage - 1) * state.pageSize;
      const end = start + state.pageSize;
      return state.items.slice(start, end);
    }
  }
});

无限滚动分页

对于移动端或需要流畅滚动体验的场景，可以使用无限滚动：

vue分页前台实现

<template>
  <div class="infinite-list" v-infinite-scroll="loadMore" infinite-scroll-disabled="busy">
    <div v-for="item in items" :key="item.id" class="list-item">
      {{ item.content }}
    </div>
  </div>
</template>

<script>
import infiniteScroll from 'vue-infinite-scroll';

export default {
  directives: { infiniteScroll },
  data() {
    return {
      items: [],
      page: 1,
      busy: false
    };
  },
  methods: {
    loadMore() {
      this.busy = true;
      // 模拟异步加载
      setTimeout(() => {
        const newItems = Array.from({ length: 10 }, (_, i) => ({
          id: this.items.length + i + 1,
          content: `Item ${this.items.length + i + 1}`
        }));
        this.items = [...this.items, ...newItems];
        this.page++;
        this.busy = false;
      }, 1000);
    }
  },
  created() {
    this.loadMore();
  }
};
</script>