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

Question

我有一个来自 vuetify 的 v-data-table，其中有两个点击事件。一个被触发了（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

尝试像这样设置行单击：

\n

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

\n

更新

\n

检查我制作的codesanbox：https://codesandbox.io/s/stack-70203336-32vby ?file=/src/components/DataTableActions.vue

\n

如果您想添加额外的列，则v-data-table无需使用主\xc3\xactem插槽，除非您想修改整行。如果您只想添加一个删除按钮（例如）。您只需先将其添加到headers数组中即可。在我的示例中，我添加了一个额外的actions列。

\n

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

\n

之后，您需要做的就是在您的v-data-table. 另外，为了避免@click:row单击删除按钮时产生的影响，您需要@click.stop在删除按钮上使用。

\n

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

\n