Vuetify表 - 自定义css不会应用于页面重新加载后的第一行

Question

表:

<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>

页面重新加载之前的Css,在Webstorm中编辑代码并自动编译之后:

重装后:

如果我只删除第一行,无论哪一个是第一行,都会发生同样的情况.

Answer 1

我有同样的问题.

他们在这里的问题是你覆盖包括<tr>标签的项目槽.没有它,一切都会好起来的.但对我来说,这不是一个解决方案,所以如果你想要覆盖<tr>标签,也可以添加:key,如下所示:<tr :key="props.index">.在这里查看 v-data-table的来源.说实话,我不知道为什么会作出这样大的差异,但在我的情况下解决了这个问题(我怀疑它是与VUE列表呈递连接).

希望能帮助到你!