验证v-data-table自定义标头类样式未应用
验证v-data-table自定义标头类样式未应用
提问于 2021-01-13 01:31:49
我正尝试在Vuetify中自定义属于v-data-table标头的类，但没有应用类样式。我的组件如下所示：
<template>
<v-data-table :headers="headers" :items="myitems"></v-data-table>
<template v-slot:item.thing="{ item }">
<span class="some-other-style">{{ item.thing }}</span>
</template>
</template>
<script>
export default {
name: 'MyComponent',
data: () => ({
headers: [
{ text: 'First Header', value: 'first', class: 'my-header-style' },
{ text: 'Second Header', value: 'thing', class: 'my-header-style' },
...
</script>
<style scoped>
.some-other-style {
background: blue;
}
.my-header-style {
color: #6f8fb9;
}
</style>我不愿意说这是Vuetify (或我的Vuetify代码)的问题，因为它实际上是针对正确的DOM元素设置类。Firefox/Chrome dev工具在元素上显示类名，例如<th class="text-start my-header-style sortable"...，但是没有应用该类的样式。火狐/Chrome开发工具也不会在该元素的styles (Chrome)或Filter Styles (火狐)部分显示任何名为my-header-style的类，但当我在开发工具中搜索我的类名时，它确实会显示出来：
.my-header-style[data-v-2c00ba1e] {
color: #6f8fb9;
} 我还尝试从<script>元素中删除scoped，但结果是相同的。我在Ubuntu 18上的Chrome87.0.4280.88和Firefox 84.0.2上进行了测试。我和webpack一起使用了vue-cli，我尝试了重启开发服务器，刷新页面等，以防出现热重载问题。
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-01-14 19:30:29
您可以隐藏默认标题，并使用v-slot创建自定义：
<template>
<v-data-table
:headers="headers"
:items="myitems"
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>
</template>
<script>
export default {
name: 'MyComponent',
data () {
return {
headers:[
{ text: 'First Header', value: 'first', class: 'my-header-style' },
{ text: 'Second Header', value: 'thing', class: 'my-header-style' },
],
myitems : []
}
}
}
</script>
<style scoped>
.some-other-style {
background: blue;
}
.my-header-style {
color: #6f8fb9 !important;
}
</style>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65688987
复制相关文章
相似问题
腾讯云开发者
