Как отобразить индекс массива с помощью таблицы данных 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>