如何使用 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.

我的数组名称是客户.

<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>

推荐答案

EDIT 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.

这里以代码笔为例.我正在将数据表的第一列更改为索引位置.

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屋！