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 &lt;v-data-table&gt;。 如何在表头&lt;th&gt;添加按钮?

这段代码是我迄今为止尝试过的。

<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.&lt;fieldname&gt; 插槽模板。

例如,要定位第一列,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 自定义标头类样式

Vuetify 删除 v-data-table 上的分页

如何清除 v-data-table 中的选定行,Vuetify

在 vuetify 中为 v-data-table 的第一行添加样式

有条件地隐藏 v-data-table 中的列(Vuetify)

使 v-data-table 行在新选项卡中打开(vuetify)