如何在Vue.js中实现HTML分页并按页码设置对应Offset？

我来帮你搞定这个分页需求～你的核心需求是点击第n页时，offset等于(n-1)*100，结合Vue的响应式特性，我们可以这么实现：

第一步：定义核心数据与计算逻辑 #

首先在Vue组件里初始化分页相关的状态，比如当前页码、每页条数，然后通过计算属性直接得到对应offset：

<script>
export default {
  data() {
    return {
      currentPage: 1, // 默认显示第1页
      pageSize: 100, // 每页固定100条数据
      totalItems: 0, // 总数据条数，后续从接口获取
    };
  },
  computed: {
    // 自动计算当前页对应的offset
    currentOffset() {
      return (this.currentPage - 1) * this.pageSize;
    },
    // 计算总页数（用于控制页码生成和按钮状态）
    totalPages() {
      return Math.ceil(this.totalItems / this.pageSize);
    },
  },
  methods: {
    // 切换页码的核心方法
    handlePageChange(pageNum) {
      // 边界校验：不能小于1，也不能超过总页数
      if (pageNum < 1 || pageNum > this.totalPages) return;
      this.currentPage = pageNum;
      // 调用数据接口，把计算好的offset传进去
      this.fetchData(this.currentOffset);
    },
    // 上一页逻辑
    handlePrev() {
      this.handlePageChange(this.currentPage - 1);
    },
    // 下一页逻辑
    handleNext() {
      this.handlePageChange(this.currentPage + 1);
    },
    // 模拟数据请求（实际项目替换成你的接口请求）
    fetchData(offset) {
      console.log(`当前请求offset: ${offset}`);
      // 示例：axios.get(`/api/your-data?offset=${offset}&limit=${this.pageSize}`)
      //   .then(res => {
      //     this.totalItems = res.data.totalCount;
      //     this.dataList = res.data.items;
      //   })
    },
  },
  mounted() {
    // 页面加载时自动请求第一页数据
    this.fetchData(this.currentOffset);
  },
};
</script>

第二步：修改分页HTML模板 #

把你原来的静态分页改成Vue动态渲染版本，用v-for生成页码，绑定点击事件，同时高亮当前页：

<template>
  <div class="col-md-12">
    <div class="pull-right">
      <div class="pagination">
        <ul>
          <!-- 上一页按钮 -->
          <li :class="{ disabled: currentPage === 1 }">
            <a href="#" @click.prevent="handlePrev">Prev</a>
          </li>
          <!-- 动态生成页码项 -->
          <li 
            v-for="page in totalPages" 
            :key="page" 
            :class="{ active: currentPage === page }"
          >
            <a href="#" @click.prevent="handlePageChange(page)">{{ page }}</a>
          </li>
          <!-- 下一页按钮 -->
          <li :class="{ disabled: currentPage === totalPages }">
            <a href="#" @click.prevent="handleNext">Next</a>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

第三步：添加基础样式（可选） #

为了让当前页和禁用状态更直观，补充一点样式：

<style scoped>
.pagination .disabled a {
  color: #ccc;
  cursor: not-allowed;
}
.pagination .active a {
  font-weight: bold;
  color: #409eff;
}
</style>

关键逻辑说明 #

• currentOffset计算属性：完全贴合你的需求，第1页自动算0，第2页算100，后续页码以此类推；
• handlePageChange统一处理所有页码切换，做了边界校验避免无效操作；
• @click.prevent阻止a标签默认跳转行为，用Vue方法接管逻辑；
• 动态生成页码：基于总数据条数自动计算总页数，比静态写死更灵活。

这样整个分页逻辑就完整了，每次点击页码，Vue会自动更新offset，你只需要在fetchData里把这个值传给后端接口即可～

内容的提问来源于stack exchange，提问作者Wanderer