@click:row 未在 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

尝试像这样设置行点击：

@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 中自定义操作列的插槽。此外，为避免单击删除按钮时出现@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>