当前位置：首页 > VUE

vue实现页面段分页

2026-02-20 15:49:41VUE

Vue 实现页面分段分页

在 Vue 中实现分段分页（前端分页）通常需要结合数据截取和分页组件完成。以下是两种常见实现方式：

基于计算属性的前端分页

通过计算属性对数据进行分片处理，适用于数据量较小的情况。

vue实现页面段分页

<template>
  <div>
    <ul>
      <li v-for="item in paginatedData" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <span>{{ currentPage }} / {{ totalPages }}</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataList: [], // 原始数据
      currentPage: 1,
      itemsPerPage: 10
    };
  },
  computed: {
    totalPages() {
      return Math.ceil(this.dataList.length / this.itemsPerPage);
    },
    paginatedData() {
      const start = (this.currentPage - 1) * this.itemsPerPage;
      const end = start + this.itemsPerPage;
      return this.dataList.slice(start, end);
    }
  },
  methods: {
    nextPage() {
      if (this.currentPage < this.totalPages) this.currentPage++;
    },
    prevPage() {
      if (this.currentPage > 1) this.currentPage--;
    }
  }
};
</script>

使用第三方分页组件

对于复杂场景，推荐使用现成的分页组件库如 element-ui 或 v-pagination。

安装依赖

vue实现页面段分页

npm install element-plus

实现代码

<template>
  <el-pagination
    v-model:current-page="currentPage"
    :page-size="itemsPerPage"
    :total="totalItems"
    layout="prev, pager, next"
    @current-change="handlePageChange"
  />
</template>

<script setup>
import { ref } from 'vue';

const currentPage = ref(1);
const itemsPerPage = 10;
const totalItems = ref(100); // 总数据量

const handlePageChange = (page) => {
  // 这里可以触发API请求或更新数据
  fetchData(page);
};
</script>

结合后端API的分页

当数据量较大时，建议采用后端分页：

methods: {
  async fetchData(page) {
    const res = await axios.get('/api/data', {
      params: { page, size: this.itemsPerPage }
    });
    this.dataList = res.data.items;
    this.totalItems = res.data.total;
  }
}