如何使用vuetify数据表显示数组的索引？

Question

我有一个来自服务器的响应，其中有数据传递给我的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> 

Answer 1

你的道具中的每一个对象包含两个键：item和index。您可以通过做props.index访问每个项目的索引。添加一个新的标题就像向你的标题数组添加一个新的项目一样简单。

这是一个codepen作为例子。我正在将数据表的第一列更改为索引位置。

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