当前位置：首页 > VUE

vue分页前台实现思路

2026-01-22 07:47:35VUE

vue分页前台实现思路

分页组件设计

分页组件通常包含页码按钮、上一页/下一页按钮、跳转输入框等元素。核心数据包括当前页码（currentPage）、每页条数（pageSize）、总条数（total）。

<template>
  <div class="pagination">
    <button @click="handlePrev" :disabled="currentPage === 1">上一页</button>
    <span v-for="page in pageList" :key="page">
      <button 
        @click="handlePageChange(page)"
        :class="{ active: currentPage === page }"
      >{{ page }}</button>
    </span>
    <button @click="handleNext" :disabled="currentPage === totalPage">下一页</button>
    <span>跳转到 <input v-model="jumpPage" @keyup.enter="handleJump"/> 页</span>
  </div>
</template>

计算属性处理

通过计算属性动态生成页码列表，并计算总页数。可添加逻辑控制显示的页码数量（如最多显示5个页码）。

computed: {
  totalPage() {
    return Math.ceil(this.total / this.pageSize);
  },
  pageList() {
    const range = 2; // 前后显示页码数
    let start = Math.max(1, this.currentPage - range);
    let end = Math.min(this.totalPage, this.currentPage + range);

    if (this.currentPage - 1 < range) {
      end = Math.min(2 * range + 1, this.totalPage);
    }
    if (this.totalPage - this.currentPage < range) {
      start = Math.max(1, this.totalPage - 2 * range);
    }

    return Array.from({length: end - start + 1}, (_, i) => start + i);
  }
}

事件处理

定义页码变更事件，通过$emit通知父组件当前页码变化。需处理边界情况（如第一页禁止上一页）。

methods: {
  handlePageChange(page) {
    if (page !== this.currentPage) {
      this.$emit('page-change', page);
    }
  },
  handlePrev() {
    if (this.currentPage > 1) {
      this.$emit('page-change', this.currentPage - 1);
    }
  },
  handleNext() {
    if (this.currentPage < this.totalPage) {
      this.$emit('page-change', this.currentPage + 1);
    }
  },
  handleJump() {
    const page = parseInt(this.jumpPage);
    if (page >= 1 && page <= this.totalPage) {
      this.$emit('page-change', page);
    }
  }
}

数据分页处理

在父组件中监听分页事件，重新获取数据或对现有数据进行分页切片。使用slice方法实现前端分页：

data() {
  return {
    allData: [], // 全部数据
    showData: [], // 当前页数据
    currentPage: 1,
    pageSize: 10
  };
},
methods: {
  updateShowData() {
    const start = (this.currentPage - 1) * this.pageSize;
    const end = start + this.pageSize;
    this.showData = this.allData.slice(start, end);
  },
  handlePageChange(page) {
    this.currentPage = page;
    this.updateShowData();
  }
}

样式优化

添加CSS样式增强交互体验，如激活状态高亮、禁用状态灰度等：

.pagination button {
  margin: 0 5px;
  padding: 5px 10px;
  cursor: pointer;
}
.pagination button.active {
  background: #409eff;
  color: white;
}
.pagination button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

与后端配合

若数据量较大，建议后端分页。前端只需传递分页参数，后端返回对应数据：

async fetchData() {
  const res = await api.getList({
    page: this.currentPage,
    size: this.pageSize
  });
  this.showData = res.data.list;
  this.total = res.data.total;
}

vue分页前台实现思路