更改v-数据表标题的颜色
更改v-数据表标题的颜色
提问于 2022-09-13 15:03:12
我想改变我的v数据表中标题的颜色，但是在Vuetify文档中没有找到任何方法。有人知道怎么做吗？我可以改变桌子上的其他颜色，但不能改变标题.
<v-card-text>
<v-data-table
dark
:footer-props="{ 'items-per-page-options': [10, 25, -1] }"
dense
calculate-widths
fixed-header
height="498"
:headers="headers"
:items="res"
sort-by="publicationDate"
:sortDesc="sortVal"
>
<template #item.video="{ item }">
<a
target="_blank"
v-if="item.video != ''"
class="links1 video-icon"
:href="item.video"
>
<v-btn dark icon>
<v-icon class="ic1">mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<!-- NEWS column -->
<a
target="_blank"
v-if="item.file != ''"
class="links1"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
</v-card-text>
回答 2
Stack Overflow用户
回答已采纳
发布于 2022-09-14 05:56:59
通过在hide-default-header元素中添加<v-data-table>属性，然后使用v-slot创建自定义标头，可以通过隐藏默认标头来实现这一点。
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :class="h.class">
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>在headers数组中，在将包含类名的每个对象中添加class属性。
标题数组的样例结构
headers: [
{ text: 'Title', value: 'title', class: 'my-header-style' }
...
...
]最后，在CSS中，您可以将样式添加到my-header-style类中。
.my-header-style {
background: #666fff;
}现场演示
new Vue({
el: '#app',
data: () => ({
headers: [
{ text: 'ID', value: 'id', class: 'my-header-style' },
{ text: 'Name', value: 'name', class: 'my-header-style' },
{ text: 'Age', value: 'age', class: 'my-header-style' }
],
movies: []
})
}).my-header-style {
background: #666fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.2.5/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.2.5/dist/vuetify.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons"/>
<div id="app">
<v-app id="inspire">
<v-data-table
:headers="headers"
:items="items"
hide-default-header>
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :class="h.class">
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>
</v-data-table>
</v-app>
</div>
Stack Overflow用户
发布于 2022-09-13 15:23:27
修改默认Vuetify CSS的一个选项是使用深度选择器针对内部元素/子组件。以组件的根节点为目标，在本例中可以选择v-data-table类名，然后深入选择标头子组件上的类名：
<style scoped>
.v-data-table >>> .v-data-table-header {
background-color: red !important;
}
</style>如果不使用作用域样式，则只需针对所需的类。
<style>
.v-data-table-header {
background-color: red !important;
}
</style>还请注意，如果您使用的是沙斯，您可能需要使用::v-deep或/deep/而不是>>>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/73705240
复制相关文章
相似问题
腾讯云开发者
