web-dev-qa-db-fra.com

Comment afficher l'index d'un tableau à l'aide de la table de données vuetify?

J'ai une réponse du serveur qui a le tableau de données passant à mon vue instance. J'ai complété le tableau de données en utilisant ce tableau.Mais tout ce que j'ai besoin de savoir comment puis-je afficher l'index de mon tableau pour le numéro de série.

ici j'attache mon code de composant Ma réponse est ok et la table est ok aussi. J'ai juste besoin d'augmenter une colonne de plus et d'afficher la valeur d'index là.

Tnks à l'avance Mon nom de tableau est clients.

<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>
arrayslaravelvue.jsdatatablesvuetify.js
12
Sakil

EDIT 7/30/19 Comme @ titou10 l'a mentionné, il n'y a pas de champ d'index dans Vuetify 2.0 .

Après avoir cherché un peu, j'ai pu y parvenir en utilisant le item.<name>slot . Cet emplacement me renverra un item. J'ai créé un tableau d'ID basé sur l'objet id et appelé indexOf(item.id) pour obtenir la position de l'index.

Stylo à code ICI .

Vuetify 1.x

Chacun de vos objets props contient deux clés: item et index. Vous pouvez accéder à l'index de chaque élément en faisant props.index. L'ajout d'un nouvel en-tête est aussi simple que l'ajout d'un nouvel élément à votre tableau d'en-têtes.

Voici un codepen comme exemple. Je change la première colonne du tableau de données en position d'index.

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

28
Nick Rucci