Vuetify <v-data-table> 自定义 <th> 标头

如何解决Vuetify <v-data-table> 自定义 <th> 标头

我正在使用 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>