如何在Vuetify标头上添加click事件？

Question

我有超过5张桌子。 我想在“ v-data-table”标题上添加一个click事件，该事件将负责更新数据源。

<template>
      <v-data-table
        :headers="headers"
        :items="items['America']"
        :custom-sort="customSort"
        @click="registerPlace('America')"
      >
      <v-data-table
        :headers="headers"
        :items="items['Europe']"
        :custom-sort="customSort"
        @click="registerPlace('Europe')"
      >
</template>

export default {
  data() {
    return {
      current_place: null,

      headers: [...],
      items: [...]
    }
  },
  mounted() {
    this.getTablesData();
  },
  methods: {
    registerPlace(place) {
        this.current_place = place;
    },
    customSort(items, sortBy, desc) { ... }
  }
}

有没有一种方法可以通过单击表头来触发回调函数？ 上面的方法不起作用。

Answer 1

您可能需要使用header.<name>或header slot

前者用于编辑单个标题，其中<name>是该列的键。

这是一个示例，该示例用触发控制台日志功能的按钮替换了第二列（卡路里）。

 new Vue({ el: '#app', vuetify: new Vuetify(), data() { return { singleSelect: false, selected: [], headers: [ { text: 'Dessert (100g serving)', align: 'left', sortable: false, 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' }], desserts: [ { name: 'Frozen Yogurt', calories: 159, fat: 6.0, carbs: 24, protein: 4.0, iron: '1%' }, { name: 'Ice cream sandwich', calories: 237, fat: 9.0, carbs: 37, protein: 4.3, iron: '1%' }, { name: 'Eclair', calories: 262, fat: 16.0, carbs: 23, protein: 6.0, iron: '7%' }, { name: 'Cupcake', calories: 305, fat: 3.7, carbs: 67, protein: 4.3, iron: '8%' }, { name: 'Gingerbread', calories: 356, fat: 16.0, carbs: 49, protein: 3.9, iron: '16%' }, { name: 'Jelly bean', calories: 375, fat: 0.0, carbs: 94, protein: 0.0, iron: '0%' }, { name: 'Lollipop', calories: 392, fat: 0.2, carbs: 98, protein: 0, iron: '2%' }, { name: 'Honeycomb', calories: 408, fat: 3.2, carbs: 87, protein: 6.5, iron: '45%' }, { name: 'Donut', calories: 452, fat: 25.0, carbs: 51, protein: 4.9, iron: '22%' }, { name: 'KitKat', calories: 518, fat: 26.0, carbs: 65, protein: 7, iron: '6%' }] }; }, created() { this.console = console; } }); 

 <script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/vuetify@2.0.11/dist/vuetify.min.css" rel="stylesheet"/> <script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vuetify@2.0.11/dist/vuetify.min.js"></script> <div id="app"> <v-app id="inspire"> <v-data-table v-model="selected" :headers="headers" :items="desserts" :single-select="singleSelect" item-key="name" show-select class="elevation-1" > <template v-slot:header.calories > <button @click="console.log('you have clicked me')">Calories</button> </template> </v-data-table> </v-app> </div> 

另一个选择是使用header槽，但是您需要处理添加单个列的逻辑，因此对于每个列，呈现自定义的<th>标签。