时间戳

首页 > 解决方案 > 在 Vuetify 中单击“全选”按钮时的事件

javascript - 在 Vuetify 中单击“全选”按钮时的事件

问题描述

我目前正在使用 Vuetify 实现一个数据表，但是在尝试对单击数据表中的“全选”按钮做出反应时遇到了一个问题。现在，当单击全选按钮时，会选择当前可见的行（这正是我想要的）。但是，我希望收到用户单击此全选按钮的通知。

我的计划是为用户提供一个“全选”按钮，一旦用户单击此“全选”复选框，但我似乎无法找到一种方法（无需驻留黑客）来获得通知单击“全选”按钮。

标签： javascriptvue.jsvuetify.js

解决方案

有一个切换全选方法。

<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']
    }
  }
})

推荐阅读