如何使用vuetify数据表显示数组的索引? [英] How to display the index of an array using the vuetify data table?
问题描述
我从服务器收到响应,该响应将数据数组传递给我的vue实例.我已经使用该数组完成了数据表.但是我只需要知道如何显示序列号的数组索引即可.
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.
我在这里附加我的组件代码 我的响应还可以,表格也可以.我只需要再增加一列并在其中显示索引值即可.
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.
<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>
推荐答案
编辑7/30/19 如@ titou10所述, Vuetify 2.0 中没有索引字段.
EDIT 7/30/19 As @titou10 mentioned, there is no index field within Vuetify 2.0.
四处逛逛后,我能够通过使用item.<name>
插槽.该插槽将为我返回item
.我基于对象id
创建了一个ID数组,并调用了indexOf(item.id)
来获取索引位置.
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 id
and called indexOf(item.id)
to get the index position.
电笔此处.
Vuetify 1.x
每个props对象之一包含两个键:item
和index
.您可以通过执行props.index
来访问每个项目的索引.添加新标头就像将新项目添加到标头数组一样容易.
Each one of your props object contains two keys: item
and 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.
这里是一个Codepen的例子.我将数据表的第一列更改为索引位置.
Here is a codepen as an example. I am changing the first column of the data-table to the index position.
https://codepen.io/potatogopher/pen/eGBpVp
这篇关于如何使用vuetify数据表显示数组的索引?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!