当前位置：首页 > VUE

vue实现分页多元

2026-01-17 18:14:03VUE

Vue 实现分页的多种方法

在 Vue 中实现分页功能有多种方式，可以根据项目需求选择合适的方法。以下是几种常见的实现方式：

使用 Element UI 的分页组件

Element UI 提供了现成的分页组件 el-pagination，可以快速实现分页功能。需要先安装 Element UI 库。

<template>
  <el-pagination
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
    :current-page="currentPage"
    :page-sizes="[10, 20, 30, 40]"
    :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 v-for="page in pages" :key="page" @click="goToPage(page)" :class="{ active: page === currentPage }">
      {{ page }}
    </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);
    },
    pages() {
      const pages = [];
      for (let i = 1; i <= this.totalPages; i++) {
        pages.push(i);
      }
      return pages;
    }
  },
  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);
      }
    },
    goToPage(page) {
      this.$emit('page-changed', page);
    }
  }
}
</script>

使用 Vuex 管理分页状态

在大型应用中，可以使用 Vuex 来管理分页状态，使分页逻辑更加清晰。

// store.js
export default new Vuex.Store({
  state: {
    currentPage: 1,
    pageSize: 10,
    totalItems: 100
  },
  mutations: {
    setCurrentPage(state, page) {
      state.currentPage = page;
    },
    setPageSize(state, size) {
      state.pageSize = size;
    }
  },
  actions: {
    fetchData({ state }) {
      // 根据 state.currentPage 和 state.pageSize 获取数据
    }
  }
});

使用第三方库

除了 Element UI，还可以使用其他第三方库如 v-pagination 或 vuejs-paginate 来实现分页功能。

// 安装 vuejs-paginate
npm install vuejs-paginate

// 使用示例
<template>
  <paginate
    :page-count="totalPages"
    :click-handler="goToPage"
    :prev-text="'Prev'"
    :next-text="'Next'"
    :container-class="'pagination'">
  </paginate>
</template>

<script>
import Paginate from 'vuejs-paginate';
export default {
  components: {
    Paginate
  },
  data() {
    return {
      totalPages: 10
    }
  },
  methods: {
    goToPage(pageNum) {
      console.log(pageNum);
    }
  }
}
</script>

后端分页与前端分页

分页可以在后端或前端实现。后端分页通常适用于大数据量，前端分页适用于小数据量。

后端分页示例：

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

前端分页示例：

computed: {
  paginatedData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    return this.data.slice(start, end);
  }
}