@click:在v-data-table中未触发行(Vuetify)
@click:在v-data-table中未触发行(Vuetify)
提问于 2021-12-02 16:41:42
我有一个vuetify的v数据表，在那里我有两个点击事件。一个是触发(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);
},回答 1
Stack Overflow用户
回答已采纳
发布于 2021-12-02 17:04:50
尝试设置行，单击如下所示：
@click:row="(item) => booking_clicked(item)"更新
检查我制作的代码框：https://codesandbox.io/s/stack-70203336-32vby?file=/src/components/DataTableActions.vue
如果要向v-data-table添加额外的列，则不需要使用主ìtem插槽，除非要修改整行。如果你想要做的只是添加一个删除按钮。您只需先将其添加到headers数组中即可。在我的示例中，我为actions添加了一个额外的列。
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中的actions列的插槽。此外，要避免在单击“删除”按钮时出现@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>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/70203336
复制相关文章
相似问题
腾讯云开发者
