Vue.js中绑定数组的自定义表格如何生成连续行号(1、2、3...)？

完全可以通过JavaScript实现表格行号连续生成的需求，以下是三种可行的实现方案：

• 方案1：使用表格插槽暴露的索引（最推荐）
  常规自定义表格组件的行插槽默认会暴露当前行的索引参数，仅需修改插槽的slot-scope配置即可直接使用：

<template slot="rows" slot-scope="{ item: booking, index }">
  <tr>
    <td>{{ index + 1 }}</td>
    <td></td>
    <td></td>
    <td>{{ fullName(booking.user) }}</td>
    <td>{{ unitName(booking.search_by) }}</td>
    ...
  </tr>
</template>

无限滚动加载新数据时，新增数据默认push到waitingList数组尾部，索引会自动累加，无需额外处理即可保证行号连续。

• 方案2：手动计算数组下标
  如果所用的swipeable-table组件没有暴露索引参数，可以通过当前元素在绑定数组中的位置计算行号：

<td>{{ waitingList.indexOf(booking) + 1 }}</td>

该方案无需修改组件逻辑，适用于所有数组绑定的场景，仅需注意数组中不能存在重复的对象引用即可正常使用。

• 方案3：数据注入行号字段（性能最优）
  在无限滚动的onLoad请求回调中，给每一条返回的新数据注入专属行号字段：

// 示例：接口请求成功后的处理逻辑
onLoad() {
  fetchNextPage(params).then(res => {
    const newList = res.data.list
    // 为当前批次数据生成连续行号
    newList.forEach((item, idx) => {
      item.seq = this.waitingList.length + idx + 1
    })
    this.waitingList.push(...newList)
    // 后续其他逻辑处理
    ...
  })
}

渲染时直接调用注入的行号字段即可：

<td>{{ booking.seq }}</td>

该方案渲染时无需实时计算下标，性能最优，适合数据量较大的无限滚动场景。如果存在行删除、排序需求，只需要在操作完成后重新遍历数组赋值seq字段即可保持行号连续。

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