Vuetify <v-data-table> 自定义 <th> header

Question

我正在使用 Vuetify <v-data-table>。如何在 table header <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>

请帮忙。

Answer 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> header

Vuetify <v-data-table> custom <th> header

html

vue.js

vuejs2

vuetify.js

v-data-table