web-dev-qa-db-ja.com

vuetifyデータテーブルを使用して配列のインデックスを表示する方法は？

私は私のvueインスタンスに渡すデータの配列を持っているサーバーからの応答を持っています。私はその配列を使用してデータテーブルを完成しました。シリアル番号用の私の配列。

ここでコンポーネントコードを添付しています応答は大丈夫で、テーブルも大丈夫です。列をさらに増やして、そこにインデックス値を表示するだけです。

事前にTnks私のアレイ名は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>
arrayslaravelvue.jsdatatablesvuetify.js
12
Sakil

EDIT 7/30/19@ titou10が述べたように、Vuetify 2.0内にインデックスフィールドはありません。

少し見て回った後、_item.<name>_ slot を使用してこれを達成できました。このスロットはitemを返します。オブジェクトidに基づいてIDの配列を作成し、indexOf(item.id)を呼び出してインデックス位置を取得しました。

コードペン [〜＃〜] here [〜＃〜] 。

1.xを検証する

Propsオブジェクトにはそれぞれ、itemとindexの2つのキーが含まれています。 _props.index_を実行すると、各アイテムのインデックスにアクセスできます。新しいヘッダーを追加するのは、ヘッダー配列に新しいアイテムを追加するのと同じくらい簡単です。

例としてコードペンを示します。データテーブルの最初の列をインデックス位置に変更しています。

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

28
Nick Rucci