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

Question

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

我的计划是为用户提供一个"选择所有内容"按钮，一旦用户单击此"全选"复选框，但我似乎找不到一种方法(不必驻留在黑客中)来获得单击"全选"按钮的通知。

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

Answer 2

你可以通过在 Vuetify 表上使用:value和@input而不是 v 模型来做到这一点。当用户选择某些内容时，检查所选数组是否等于每页的项目数。

<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