laravel 如何使用 vuetify 数据表显示数组的索引？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46380574/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to display the index of an array using the vuetify data table?
提问by Sakil
I have a response from server which has the array of data passing to my vue instance. I have completed the data table using that array.But all i need to know how can I display the index of my array for serial no.
我有来自服务器的响应，其中包含传递给我的 vue 实例的数据数组。我已经使用该数组完成了数据表。但是我只需要知道如何显示序列号的数组索引。
here i am attaching my component code My response is ok and table is ok too.I just need to increase a column more and display the index value there.
在这里我附上我的组件代码我的反应没问题，表格也没问题。我只需要增加一列并在那里显示索引值。
Tnks in advance My array name is customers.
提前tnks 我的数组名是customers。
<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>
回答by Nick Rucci
EDIT 7/30/19As @titou10 mentioned, there is no index field within Vuetify 2.0.
编辑 7/30/19正如@titou10 所提到的，Vuetify 2.0 中没有索引字段。
After looking around for a bit I was able to achieve this by utilizing the item.<name>slot. This slot will return me an item. I created an array of IDs based on the object idand called indexOf(item.id)to get the index position.
环顾四周后，我能够通过利用item.<name>slot来实现这一点。这个插槽会给我一个item. 我根据对象创建了一个 ID 数组，id并调用indexOf(item.id)以获取索引位置。
Code pen HERE.
代码笔在这里。
Vuetify 1.x
Vuetify 1.x
Each one of your props object contains two keys: itemand index. You can access the index for each item by doing props.index. Adding a new header is as easy as adding a new item to your headers array.
每个 props 对象都包含两个键：item和index。您可以通过执行访问每个项目的索引props.index。添加新标题就像向标题数组添加新项目一样简单。
Here is a codepen as an example. I am changing the first column of the data-table to the index position.
这里以 codepen 为例。我正在将数据表的第一列更改为索引位置。
回答by FRR
Another approach that can be used is using computed properties to insert the index to each element in the data. This can be useful if you need to update the table later on as computed properties are updated automatically.
另一种可以使用的方法是使用计算属性将索引插入数据中的每个元素。如果您稍后需要更新表，因为计算属性会自动更新，这会很有用。
For example, say the item data is stored in items.
例如，假设项目数据存储在items.
data() {
return {
items: [{
fruit_name: 'Banana',
calories: 30
}, {
fruit_name: 'Apples',
calories: 40
}]
}
}
Here, every element to be itself plus additional attribute, i.e. index. Element addition is achieved using spread operator. All mapped elements are combined into single array using functional-programming style of mapfunction.
在这里，每个元素都是自身加上附加属性，即index. 元素添加是使用扩展运算符实现的。所有映射的元素使用的功能的程序设计风格组合成单一阵列map功能。
computed: {
itemsWithIndex: () {
return this.items.map(
(items, index) => ({
...items,
index: index + 1
}))
}
}
Note: index: index+1will make the numbering start from 1.
注意：index: index+1将使编号从 1 开始。
Then, inside headers data needed for v-data-table, you can make reference to indexitem data for numbering.
然后，在所需的标题数据中v-data-table，您可以参考index项目数据进行编号。
data() {
return {
items: {
...
},
headers: [{
text: 'Num',
value: 'index',
},
{
text: 'Fruit Name',
value: 'fruit_name',
},
{
text: 'Calories',
value: 'calories',
}
]
}
}
Codepen example: https://codepen.io/72ridwan/pen/NWPMxXp
Codepen 示例：https://codepen.io/72ridwan/pen/NWPMxXp
回答by JPilson
Super simple , Use indexOf {{items.indexOf(props)}}
超级简单，使用 indexOf {{items.indexOf(props)}}
