Vue组件分页后行号重置为1，该如何解决？

问题根源在于你使用的是v-for的局部index——这个索引仅针对当前页的数组元素，从0开始计数，切换分页后新页面的数组重新遍历，index自然会从0开始，导致行号重置为1。

下面提供两种实用的解决办法：

方法一：结合分页参数计算全局行号 #

在父组件中利用分页的当前页和每页条数，计算出每条数据的全局行号，再传递给子组件。

修改父组件代码 #

假设你的分页组件绑定了currentPage（当前页码，从1开始）和pageSize（每页显示条数）这两个变量，调整list-item的传参：

<b-colxx xxs="12" class="mb-3" v-for="(item, index) in items" :key="item.id" :id="item.id">
  <list-item
    :key="item.id"
    :data="item"
    :row-number="index + 1 + (currentPage - 1) * pageSize"
  />
</b-colxx>

修改子组件代码 #

替换原有的index prop为row-number，直接渲染全局行号：

<template>
<b-card no-body>
    <div class="pl-2 d-flex">
        <div class="card-body">
            <p class="mb-0 text-muted w-5">{{ rowNumber }}</p>
            <p class="mb-0 text-muted w-30">{{ data.description }}</p>
            <p class="mb-0 text-muted w-20">{{ data.date }}</p>
            <p class="mb-0 text-muted w-10">{{ data.created_by }}</p>
        </div>
    </div>
</b-card>
</template>

<script>
export default {
    props: ['data', 'rowNumber'],
}
</script>

方法二：直接使用后端返回的全局序号 #

如果后端接口在返回分页数据时，能为每条数据带上全局的序号字段（比如serial_number），直接使用该字段是最可靠的方案——尤其适合存在筛选、排序的场景，避免前端计算出现偏差。

修改子组件代码 #

直接渲染后端返回的序号字段：

<p class="mb-0 text-muted w-5">{{ data.serial_number }}</p>

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