Vuetify <v-data-table> 自定义 <th> 标头
Posted
技术标签:
【中文标题】Vuetify <v-data-table> 自定义 <th> 标头【英文标题】:Vuetify <v-data-table> custom <th> header 【发布时间】:2021-06-07 22:04:41 【问题描述】:我正在使用 Vuetify <v-data-table>
。
如何在表头<th>
添加按钮?
这段代码是我迄今为止尝试过的。
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template slot="items" slot-scope="row">
<th><button>button</button></th>
</template>
</v-data-table>
<script>
export default
data:() =>(
headers: [
text: 'Dessert (100g serving)',
align: 'start',
sortable: true,
value: 'name',
,
text: 'Calories', value: 'calories' ,
text: 'Fat (g)', value: 'fat' ,
text: 'Carbs (g)', value: 'carbs' ,
text: 'Protein (g)', value: 'protein' ,
text: 'Iron (%)', value: 'iron' ,
],
);
</script>
请帮忙。
【问题讨论】:
【参考方案1】:您可以使用header.<fieldname>
插槽模板。
例如,要定位第一列,name
:
<v-data-table v-model="selected" :headers="headers" :items="desserts">
<template v-slot:header.name=" header ">
header.text
<v-btn>Button</v-btn>
</template>
</v-data-table>
【讨论】:
以上是关于Vuetify <v-data-table> 自定义 <th> 标头的主要内容,如果未能解决你的问题,请参考以下文章
未应用 Vuetify v-data-table 自定义标头类样式
如何清除 v-data-table 中的选定行,Vuetify
在 vuetify 中为 v-data-table 的第一行添加样式