在 Vuetify 中单击“全选”按钮时的事件答案

【问题标题】：Event when "select-all" button clicked in Vuetify在 Vuetify 中单击“全选”按钮时的事件
【发布时间】：2019-08-13 11:49:18
【问题描述】：

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

我的计划是为用户提供一个“全选”按钮，一旦用户单击此“全选”复选框，但我似乎无法找到一种方法（无需居住在黑客身上）通知点击“全选”按钮。

【问题讨论】：

没有内置事件（至少在 v1.5.16 中），因此您必须自己实现复选框而不依赖 select-all 属性或尝试观看 @987654322数据表的@，并检测该数组的长度是否等于数据表中的项目总数。

标签： javascript vue.js vuetify.js

【解决方案1】：

有一个toggle-select-all方法。

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

【讨论】：

这很好用。谢谢！我是 Vue 的新手，我们的编码标准强制我们不使用“@”，即：@toggle-select-all="selectAll" 我尝试了很多东西，比如 v:on:click/change 等，但我无法得到任何速记符号工作。有什么建议吗？
抱歉，我不知道如何解决这个问题。你弄明白了吗？
是的，v-on:toggle-select-all 效果很好。在发布我的问题之前我已经尝试过，但是在其中添加了一个额外的“：”（v：on：toggle-select-all），所以它不起作用。谢谢！

【解决方案2】：

您可以通过在 Vuetify 表而不是 v-model 上使用 :value 和 @input 来做到这一点。当用户选择某些东西时，检查选定的数组是否等于每页的项目数。

<div id="app">
  <v-app id="inspire">
    <v-data-table
      :value="selected"
      @input="enterSelect($event)"
      :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: {
    enterSelect(values) {
      if (values.length == this.itemsPerPage) {
        alert('selected all')
      }
    }
  },
  data () {
    return {
      selected: [],
      itemsPerPage: 10,
      headers: ['headers', 'data'],
      desserts: ['your', 'data']
    }
  }
})

这里的工作示例：https://codepen.io/CodingDeer/pen/QWLyaog?editors=1010

【讨论】：