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

Posted 2023-02-22

【中文标题】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>