我想更改 v-data-table 中標題的顏色，但在 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 != ''"
:href="item.video"
>
<v-btn dark icon>
<v-icon >mdi-movie</v-icon>
</v-btn>
</a>
</template>
<template #item.title2="{ item }">
<!-- NEWS column -->
<a
target="_blank"
v-if="item.file != ''"
:href="item.file"
>
<span style="color:white"> {{ item.title }} </span>
</a>
</template>
</v-data-table>
</v-card-text>
uj5u.com熱心網友回復：
hide-default-header您可以通過在元素中添加屬性來隱藏默認標題<v-data-table>，然后使用創建自定義標題來實作此目的v-slot。
<template v-slot:header="{ props: { headers } }">
<thead>
<tr>
<th v-for="h in headers" :>
<span>{{h.text}}</span>
</th>
</tr>
</thead>
</template>
在headers陣列中，class在每個將包含類名的物件中添加屬性。
headers 陣列的示例結構：
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/[email protected]/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/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>uj5u.com熱心網友回復：
修改默認 Vuetify CSS 的一種選擇是使用deep selectors定位內部元素/子組件。以組件的根節點為目標，這種情況下可以選擇v-data-table類名，然后在頭部子組件上深度選擇類名：
.v-data-table >>> .v-data-table-header {
background-color: red;
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/507925.html