我正在使用 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>
请帮忙。
最佳答案
您可以使用 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>
关于html - Vuetify <v-data-table> 自定义 <th> header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66556681/