从 Vuetify 中的可扩展数据表中删除框阴影

Posted 2023-02-22

【中文标题】从 Vuetify 中的可扩展数据表中删除框阴影

【英文标题】：Remove Box Shadow from Expandable Data Table in Vuetify

【发布时间】：2021-04-18 08:07:40

【问题描述】：

我似乎无法删除 Vuetify 中可扩展数据表中的框阴影。我尝试通过添加box-shadow: none 甚至

来使用内联css

<style scope>
.v-data-table__expanded .v-data-table__expanded__content 
  box-shadow: none;

我还尝试在数据表中使用elevation="0"，希望它能起作用，但无济于事，它仍然不起作用。谁能帮帮我？

这是它目前的样子：

我只是在 vuetify 中使用了代码，但为方便起见，这是代码：

    <div class="my-6">
      <v-text-field
        v-model="search"
        label="Search"
        class="mx-4"
        prepend-inner-icon="mdi-magnify"
        outlined
        dense
        hide-details
      ></v-text-field>
    </div>
    <template>
      <v-data-table
        :headers="dessertHeaders"
        :items="desserts"
        :single-expand="true"
        :expanded.sync="expanded"
        item-key="name"
        dense
        show-expand
        :search="search"
        :custom-filter="filter"
        elevation="0"
      >
        <template v-slot:expanded-item=" headers, item " elevation="0">
          <td :colspan="headers.length" elevation="0">More info about  item.name </td>
        </template>
      </v-data-table>
    </template>

【参考方案1】：

使用以下 CSS：

.v-data-table__expanded.v-data-table__expanded__content 
  box-shadow: none !important;

由于类位于同一元素上，因此您不希望它们之间有空格，这表示父/（大）子关系。

这是另一个不需要!important 修饰符的选项：

.v-data-table > .v-data-table__wrapper tbody tr.v-data-table__expanded__content 
  box-shadow: none;

【讨论】：

我尝试了这两个版本，但由于某种原因它仍然无法正常工作:(不过谢谢你，这很有用

给你，证明：codepen.io/sh0ber/pen/gOwBZdN 这是使用文档中的 Vuetify 示例并应用了该样式。

另外，您的<style> 标记具有错误的属性scope。应该是scoped。尝试将其删除。

不客气，我很高兴它有帮助:) 如果您需要保留 scoped 属性，您也可以尝试 >>> 语法，如 this answer。

哦，这是我第一次听说。会做！非常感谢：D

【参考方案2】：

以防万一有人对上述解决方案有疑问，作者：Dan。正如他在评论部分提到的那样，这对我有用。查看他的评论或前往this link了解更多信息。

.v-data-table >>> .v-data-table__wrapper tbody tr.v-data-table__expanded__content 
  box-shadow: none;

【讨论】：

这对我有用！谢谢