Vue.js分页时索引与总数据计数重置问题求助

嘿，这问题我之前做后台管理系统的时候也碰到过，核心原因很简单：你现在用的items是当前页的局部数据，所以index只是当前页内的索引，items.length自然只能显示当前页的条数。咱们一步步来解决：

1. 显示正确的总数据量 #

你已经在接口请求里把总数据量存在this.pagination.total里了呀！直接把统计部分的代码改成用这个值就行，不用再依赖items.length：

<div class="form-group">
  Total data: {{ pagination.total }}
</div>

这样不管切换到哪一页，都会显示接口返回的真实总数据量（比如你的300条）。

2. 实现连续的序号索引 #

不能直接用index + 1，因为那是当前页的局部序号。咱们可以利用接口返回的pagination.from（当前页第一条数据的全局序号），再加上当前页内的索引index（从0开始），就能得到连续的全局序号了：

<tr v-for="(item, index) in items" :key="item.id">
  <td>{{ pagination.from + index }}</td>
  <td>{{ item.name }}</td>
</tr>

举个例子：第二页的from是16，index从0开始，第一条就是16+0=16，第二条16+1=17，完全符合你想要的连续效果。

如果你的接口没有返回from字段，也可以用分页公式手动计算：

<td>{{ (pagination.current_page - 1) * 每页条数 + index + 1 }}</td>

比如每页15条，第二页就是(2-1)*15 + index +1 =16+index，和用from的效果一样，但用接口返回的from更稳妥，毕竟最后一页可能不足每页条数。

小提醒：初始化pagination对象 #

记得在组件的data里初始化pagination的相关字段，避免出现未定义的问题：

data() {
  return {
    items: [],
    filters: [],
    pagination: {
      current_page: 1,
      total: 0,
      from: 1,
      last_page: 1,
      to: 0,
      next_page_url: null,
      prev_page_url: null
    }
  }
}

这样修改之后，切换分页时，pagination.total和pagination.from会随着接口请求自动更新，你的序号和总数据统计就都正常啦！

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