Vuetify的v-data-table组件@click:row事件无法触发问题求助

问题根因 #

你自定义了v-data-table的item全量插槽，并手动编写了<tr>行元素，覆盖了Vuetify默认生成的行结构，而@click:row原生事件是绑定在Vuetify内部生成的<tr>元素上的，你自定义的<tr>没有承接对应的点击事件逻辑，因此行点击事件无法触发。
删除按钮事件正常是因为你直接在自定义插槽内的按钮上绑定了点击事件，不受默认结构影响。

解决方案 #

方案1：拆分自定义插槽，保留默认行结构（推荐） #

不自定义全量item插槽，改为按需自定义单列插槽，保留Vuetify默认生成的<tr>结构，原生的@click:row事件即可正常触发：

<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.booking_text" slot-scope="{ item }">
            {{ item.booking_text }}
        </template>
        <!-- 自定义操作列，需和你headers配置里操作列的value值对应 -->
        <template slot="item.actions" slot-scope="{ item }">
            <v-btn class="mx-2" dark small color="red" @click.stop="deleteBooking(item)">
               <v-icon dark>mdi-delete-forever</v-icon>
            </v-btn>
        </template>
</v-data-table>

注意：给删除按钮的点击事件添加.stop修饰符，避免点击删除按钮时同时触发行点击事件。

方案2：手动给自定义行绑定点击事件 #

如果你确实需要自定义全量item插槽的行结构，直接在你编写的<tr>上绑定点击事件即可：

<template slot="item" slot-scope="row">
    <tr @click="booking_clicked(row.item)">
        <td>{{row.item.booking_text}}</td>
        <td>
            <v-btn class="mx-2" dark small color="red" @click.stop="deleteBooking(row.item)">
               <v-icon dark>mdi-delete-forever</v-icon>
            </v-btn>
        </td>
    </tr>
</template>

内容的提问来源于stack exchange，提问作者MichaB