テーブル:
<v-card :dark="true">
<v-card-title>
<v-btn color="Indigo" dark @click="initialize"><v-icon dark>refresh</v-icon></v-btn>
<v-spacer></v-spacer>
<v-text-field append-icon="search" label="Search" single-line hide-details></v-text-field>
</v-card-title>
<v-data-table :dark="true" :headers="headers" :items="expenses" hide-actions class="elevation-1">
<template slot="headers" slot-scope="props">
<tr>
<th v-for="header in props.headers">{{header.text}}</th>
</tr>
</template>
<template slot="items" slot-scope="props">
<tr v-bind:class="getClass(props.item)">
<td class="text-xs-center">{{ props.item.year }}</td>
<td class="text-xs-center">{{ props.item.month }}</td>
<td class="text-xs-center">{{ props.item.day }}</td>
<td class="text-xs-center">{{ props.item.description }}</td>
<td class="text-xs-center">{{ props.item.value }}</td>
<td class="text-xs-center">{{ props.item.category }}</td>
<td class="text-xs-center">{{ props.item.details }}</td>
<td class="justify-center layout px-0">
<v-btn icon class="mx-0" @click="deleteItem(props.item)">
<v-icon color="pink">delete</v-icon>
</v-btn>
</td>
</tr>
</template>
<template slot="no-data">
<v-btn color="primary" @click="initialize">Reset</v-btn>
</template>
</v-data-table>
</v-card>
コードがWebstormで編集されて自動的にコンパイルされた後の、ページの再読み込み前のCss:
そしてリロード後:
そして、最初の行を削除すると、どちらが最初であっても同じことが起こります。
私も同じ問題を抱えていました。
ここでの問題は、<tr>
タグを含むアイテムスロットを上書きすることです。それがなければすべてがうまくいきます。しかし、私にとってはそれは解決策ではなかったので、<tr>
タグもオーバーライドしたい場合は、次のようにadd:keyを追加します:<tr :key="props.index">
。 v-data-table here のソースを見てください。正直なところ、なぜそれが大きな違いを生むのかわかりませんが、私の場合は問題を解決しました(vueリストレンダリングに関連していると思います)。
それが役に立てば幸い!