javascript - 将自定义表绑定到数组时如何生成行号（1、2、3，...）？

Question

我们有自定义表绑定到数组的 Vue.js 项目。它看起来如下：

HTML 代码的关键部分如下所示：

<InfiniteScroll ref="scroller" :disable="finished" @load="onLoad">
  <swipeable-table
    v-if="waitingList.length"
    :headers="headers"
    :items="waitingList"
    :loading="loading"
    custom-width
    outerBorder
  >
    <template slot="rows" slot-scope="{ item: booking }">
      <tr>
        <td>{{ 0 }}</td>
        <td></td>
        <td></td>
        <td>{{ fullName(booking.user) }}</td>
        <td>{{ unitName(booking.search_by) }}</td>
        ...
      </tr>
    </template>
  </swipeable-table>
  ...
</InfiniteScroll>

是waitingList一个对象数组。

JavaScript 代码部分如下所示：

methods: {
  fullName(user) {
    return fullName.by(user, null, true)
  },
  unitName(unit) {
    return unit?.name ?? ''
  },
  ...

该表是可滚动的，即它在开始时显示 30 个项目，在您滚动接下来的 30 个项目（30+30=60）之后，依此类推。

对象数组如下所示：

有什么办法可以使用一些 JavaScript 方法来实现吗？如果没有，我该怎么做？

标签： javascriptarraysvue.js

Answer 1

您可以使用与模板中的项目相同的方式添加索引。

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