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

阵列 Vue.js

宝儿Sam

2020-03-19

我收到服务器的响应,该服务器将数据数组传递给我的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>

第2407篇《如何使用vuetify数据表显示数组的索引?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

2个回答
梅泡芙 2020.03.19

超级简单,使用indexOf {{items.indexOf(props)}}

斯丁JinJin 2020.03.19

编辑19/7/30 正如@ titou10所述,Vuetify 2.0中没有索引字段

环顾了一会儿之后,我可以通过利用item.<name> 插槽来实现这个目标这个插槽会给我一个回报item我基于对象创建了一个ID数组,id并调用它indexOf(item.id)来获取索引位置。

编码笔在这里


Vuetify 1.x

每个props对象包含两个键:itemindex您可以通过执行访问每个项目的索引props.index添加新标题就像将新项目添加到headers数组一样容易。

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

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

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android