Question

默认情况下，在v数据表的每个非最后一个子行之间打印一行。我想修改css以更改该行，例如去掉它。最初，在开发人员控制台中，关于边框底部的css如下所示。

.theme--light.v-table tbody tr:not(:last-child) {
    border-bottom: 1px solid rgba(0,0,0,0.12);
}

我为数据表分配了一个额外的类“ mytable”：

<v-data-table
        :headers="headers"
        :items="desserts"
        hide-actions
        class="elevation-1 mytable">
    <template slot="items" slot-scope="props">
        <td>{{ props.item.name }}</td>
        <td class="text-xs-right">{{ props.item.calories }}</td>
        <td class="text-xs-right">{{ props.item.fat }}</td>
        <td class="text-xs-right">{{ props.item.carbs }}</td>
        <td class="text-xs-right">{{ props.item.protein }}</td>
        <td class="text-xs-right">{{ props.item.iron }}</td>
    </template>
</v-data-table>

使用CSS尝试修改表格

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none;
}

尽管背景色已更改为浅金黄色，但仍然打印了边框底部。在开发人员控制台中，触摸了删除边框底部的指令。不是背景色。我还必须使用哪个选择器来更改边框底部？使用与主题原来使用的CSS相同的方法也不起作用。

Answer 1

我必须使用哪个选择器来更改边框底部？

使用您的自定义类和vuetify使用的类

.mytable .v-table tbody tr:not(:last-child) {
    border-bottom: none;
}

此外，如果您要专门设置浅色主题，还可以添加.theme--light。

codepen

有关样式化vuetify组件的更多信息：

CSS not working (taking effect) inside component
Styling Vuetify selectors

Answer 2

我正在使用VueJS 2.x。以下选择方式对我很有效。

<style lang="scss" scoped>
.table-header /deep/ {
  thead {
    background-color: black;
  }
}
</style>

Answer 3

您可以使用！important，它可以解决您的问题。如果不起作用，请尝试重新启动服务器。

.mytable table tr {
    background-color: lightgoldenrodyellow;
    border-bottom: none !important;
 }

我希望它将对您有所帮助。祝你有美好的一天！：-）

Answer 4

我使用的是 Vuetify 2.3.21 版。在尝试了很多事情之后，我设法通过更改 td 来删除这些行。例如，更改 tr 不会删除这些行，但您可以将其更改为为行着色。

我还必须使用 !important。我将此添加到我页面的 CSS 中：

.v-data-table td {
    border-bottom: none !important;
}

此修改也适用于 <v-simple-table>。

Answer 5

试试这个。

.v-data-table tbody tr:not(:last-child) {
  border-bottom: 1px solid rgba(0,0,0,0.12) !important; }

设置vuetify v-data-table的样式

5 个答案: