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

Question

我收到来自服务器的响应，其中包含传递到我的 vue 实例的数据数组。我已经使用该数组完成了数据表。但我只需要知道如何显示序列号的数组索引。

这里附上我的组件代码 我的 react 没问题，表格也没有问题。我只需要再增加一列并在那里显示索引值即可。

我的数组名称是客户。

<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

编辑 2019 年 7 月 30 日 正如@titou10 提到的，Vuetify 2.0 中没有索引字段。

在四处寻找之后，我能够通过利用 item.<name> 来实现这一点。 slot .这个插槽将返回一个 item .我根据对象 id 创建了一个 ID 数组并调用indexOf(item.id)获取索引位置。

打码笔HERE .

---

验证 1.x

您的每个 Prop 对象都包含两个键:item和 index .您可以通过执行 props.index 访问每个项目的索引.添加新 header 就像向 header 数组添加新项一样简单。

这里以codepen为例。我正在将数据表的第一列更改为索引位置。

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