@click:v-data-table(Vuetify)中未触发行

Question

我有一个来自vuetify的v-data表，其中有两个点击事件。一个被触发(deleteBooking(，另一个没有(booking_clicked(？！该按钮用于删除项目。行单击事件用于向用户显示所单击行的附加信息。

<v-data-table
item-key="id"
v-model="selected_bookings"
:loading="isLoading"
:items="tmp_bookings"
:headers="headers"
:single-select="single_select"
:hide-default-footer="true"
@click:row="booking_clicked"
:footer-props="{
'items-per-page-options': [-1]
}"
class="elevation-1">
<template slot="item" slot-scope="row">
<tr>
<td>{{row.item.booking_text}}</td>
<td>
<v-btn class="mx-2" dark small color="red" @click="deleteBooking(row.item)">
<v-icon dark>mdi-delete-forever</v-icon>
</v-btn>
</td>
</tr>
</template>
</v-data-table>
booking_clicked(item){
console.log(item);
}
deleteBooking(booking_item) {
console.log(booking_item);
},

Answer 1

尝试设置行点击如下：

@click:row="(item) => booking_clicked(item)"

更新

选中我制作的此代码复选框：https://codesandbox.io/s/stack-70203336-32vby?file=/src/components/DataTableActions.vue

如果您想在v-data-table中添加一个额外的列，则无需使用主ìtem插槽，除非您想修改整行。如果你想做的只是像示例一样添加一个删除按钮。您只需要先将其添加到headers数组中即可。在我的示例中，我为操作添加了一个额外的列。

headers: [
{
text: 'Dessert (100g serving)',
align: 'start',
sortable: false,
value: 'name',
},
{ text: 'Calories', value: 'calories' },
{ text: 'Fat (g)', value: 'fat' },
{ text: 'Carbs (g)', value: 'carbs' },
{ text: 'Protein (g)', value: 'protein' },
{ text: 'Iron (%)', value: 'iron' },
{ text: 'Actions', value: 'actions'}
],

之后，您所需要做的就是在v-data-table中为操作列自定义插槽。此外，为了避免单击删除按钮时出现@click:row效应，您需要在删除按钮上使用@click.stop。

<v-data-table
:headers="headers"
:items="desserts"
:items-per-page="5"
class="elevation-1"
@click:row="(item) => dessertRowlicked(item)"
>
<template  #item.actions="{ item }">
<v-icon color="primary" @click.stop="deleteDessert(item)">mdi-delete</v-icon>
</template>
</v-data-table>