Как отобразить индекс массива с помощью таблицы данных vuetify?

У меня есть ответ от сервера, который имеет массив данных, передаваемых в мой экземпляр VUE. Я заполнил таблицу данных, используя этот массив. Но все, что мне нужно знать, как я могу отобразить индекс моего массива для серийного номера.

здесь я прилагаю свой код компонента Мой ответ в порядке, и таблица тоже в порядке. Мне просто нужно увеличить столбец и отобразить там значение индекса.

Tnks заранее, мой массив имя клиентов.

<v-data-table
  v-bind:headers="headers"
  v-bind:items="customers"
  v-bind:search="search"
  v-cloak
  >
  <template slot="items" scope="props">
  <td class="text-xs-center">@{{ props.item.id }}</td>
  <td class="text-xs-center">
    <v-edit-dialog
      lazy
      @{{ props.item.name }}
      >
      <v-text-field
        slot="input"
        label="Edit"
        v-model="props.item.name"
        single-line
        counter
        :rules="[max25chars]"
        ></v-text-field>
    </v-edit-dialog>
  </td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.email }}</td>
  <td class="text-xs-center">@{{ props.item.created_at }}</td>
  <td class="text-xs-center">
    <v-btn small outline fab class="red--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-remove</v-icon>
    </v-btn>
    <v-btn small outline fab class="green--text" @click="showWarning(props.item.id)">
      <v-icon>mdi-account-off</v-icon>
    </v-btn>
  </td>
  </template>
  <template slot="pageText" scope="{ pageStart, pageStop }">
    From @{{ pageStart }} to @{{ pageStop }}
  </template>
</v-data-table>

Ответ 1

ОБНОВЛЕНИЕ 30.07.19 Как уже упоминалось @titou10, в Vuetify 2.0 нет поля индекса.

Посмотрев немного, я смог достичь этого, используя item.<name> слот. Этот слот вернет мне item. Я создал массив идентификаторов на основе объекта id и вызвал indexOf(item.id), чтобы получить позицию индекса.

Кодовое перо ЗДЕСЬ.

Vuetify 1.x

Каждый из ваших объектов реквизита содержит две клавиши: item и index. Вы можете получить доступ к индексу для каждого элемента, выполнив props.index. Добавить новый заголовок так же просто, как добавить новый элемент в массив заголовков.

Вот кодовая ручка в качестве примера. Я меняю первый столбец таблицы данных на позицию индекса.

https://codepen.io/potatogopher/pen/eGBpVp

Ответ 2

<v-data-table :headers="headers" :items="items" :search="search" :pagination.sync="pagination">
    <template v-slot:items="props">
        <tr>
            <td>{{ (pagination.page-1)*pagination.rowsPerPage + props.index + 1 }}</td>
        </tr>
    </template>
</v-data-table>