javascript - 在 Vuetify 中单击 "select-all"按钮时发生的事件

Question

我目前正在使用 Vuetify 实现数据表，但在尝试对数据表中的“全选”按钮使用react时遇到了问题。现在，当单击全选按钮时，将选择当前可见的行(这正是我想要的)。但是，我希望收到用户单击此全选按钮的通知。

我的计划是为用户提供一个“全选”按钮，一旦用户单击此“全选”复选框，但我似乎找不到一种方法(无需忍受黑客攻击)来获取单击“全选”按钮时收到通知。

Answer 1

有一个切换全选方法。

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :value="selected"
      @toggle-select-all="selectAll"
      :items-per-page="itemsPerPage"
      :headers="headers"
      :items="desserts"
      item-key="name"
      show-select
      class="elevation-1"
    >
    </v-data-table>
    <v-dialog>
      <v-card>
      </v-card>
    </v-dialog>
  </v-app>
</div>

Javascript如下:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  methods: {
    selectAll(event) {
      if (event.status) {
        alert('selected all')
      } else {
        alert('deselected all')
      }
    }
  },
  data () {
    return {
      selected: [],
      itemsPerPage: 10,
      headers: ['headers', 'data'],
      desserts: ['your', 'data']
    }
  }
})