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

Posted

技术标签:

【中文标题】Vuetify 表 - 页面重新加载后自定义 CSS 不会应用于第一行【英文标题】:Vuetify table - custom css isn't applied to first row after page reload 【发布时间】:2018-10-21 17:20:44 【问题描述】:

表:

<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中编辑代码并自动编译后:

并且在重新加载之后:

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

【问题讨论】:

【参考方案1】:

我遇到了同样的问题。

这里的问题是您覆盖了包含&lt;tr&gt; 标签的项目槽。没有它,一切都会正常工作。但对我来说,这不是一个解决方案,所以如果您还想覆盖 &lt;tr&gt; 标签,添加 :key 到它,像这样:&lt;tr :key="props.index"&gt;。 查看 v-data-table here 的来源。 老实说,我不知道为什么它会产生如此大的差异,但在我的情况下解决了问题(我怀疑它与 vue 列表渲染有关)。

希望对你有帮助!

【讨论】:

对我来说也是如此。谢谢! 同样的问题,谢谢 原来我差不多一年前赞成这个答案。这仍然是 Vuetify 2 中的一个问题。有趣的是,我如何在一年之内遇到完全相同的问题却没有意识到。

以上是关于Vuetify 表 - 页面重新加载后自定义 CSS 不会应用于第一行的主要内容,如果未能解决你的问题,请参考以下文章

坐标更改后自定义标记不重新渲染

断开/重新连接后自定义接收器不调用 onLoad

Vuejs & Vuetify - 在对话框中使用 Tinymce 作为组件需要重新加载

使用 UISearchbar 和过滤后自定义新表

通过 CDN 加载 Vuetify 时获取“未知自定义元素”

链接到表格 HTML / Vuetify.js 中的特定行