How to generate row numbers (1, 2, 3, ...) when bind the custom table to array?-CodePudding

We have Vue.js project with custom table bound to array. It looks as following:

The key part of HTML code looks as following:

<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>

The waitingList is an array of objects.

The part of JavaScript code looks as following:

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

The table is scrollable that is it shows 30 items at the beginning and after you scroll next 30 items (30 30=60) and so on.

The array of objects looks as following:

Is there any way to use some JavaScript method to achieve it? If not how can I do it?

CodePudding user response：

you can add index in the same way as item in template.

<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>