当我有一个插槽主体的自定义实现时，我不知道如何使用Vuetify v2为我的data-table实现select all选项.
下面是一个小例子:
<template>
<v-card
max-width="300"
class="pa-6"
>
<v-data-table
:items="tasks"
:headers="headers"
show-select
dense
>
<template v-slot:body="{ items }">
<tbody>
<tr
v-for="item in items"
:key="item.id"
>
<td>
<v-checkbox
v-model="selectedTasks"
:value="item.id"
style="margin:0px;padding:0px"
hide-details
/>
</td>
<td>{{ item.text }}</td>
<td>
<v-btn
text
icon
x-small
>
<v-icon>pageview</v-icon>
</v-btn>
</td>
</tr>
</tbody>
</template>
</v-data-table>
</v-card>
</template>
<script>
export default {
data() {
return {
headers: [
{ text: 'task', value: 'text' },
{ text: 'actions' }
],
selectedTasks: []
}
},
computed: {
tasks() {
return [
{ id: 1, text: 'Collect packets' },
{ id: 2, text: 'Buy bread' }
]
}
}
}
</script>
这将生成以下数据表:
现在我想实现的是，当选中复选框"all"(如上图所示)时，它会 Select 表中的所有行.
doc说要实现插槽header.data-table-select来定制select all按钮，我可以在下面关于slots的示例中找到数据表的示例.
<template v-slot:header.data-table-select="{ on , props }">
<v-simple-checkbox
color="purple"
v-bind="props"
v-on="on"
/>
</template>
但是，当我选中此框时，我无法 Select 所有行.我没有找到任何关于如何使用"自定义"表体实现全选的示例.希望有人能帮我.