vue.js - 如何将点击事件添加到v-data-table？

我想在单击表行时调用editItem函数。当前发生的事情是我单击表格行，但它不显示详细信息页面。但是，当我将此click事件放在特定的表数据上时，将调用editItem函数。如何在表行本身上调用相同的函数？

在我的代码中，我尝试使用v-data-table模板和插槽，并在该行中包含click事件，但它也不起作用

<template slot="items" slot-scope="props">
   <tr @click="editItem(item), selected = item.id">
      <td>{{ props.item.member }}</td>
      <td>{{ props.item[1] }}</td>
      <td>{{ props.item[2] }}</td>
      <td>{{ props.item[3] }}</td>
      <td>{{ props.item[4] }}</td>
      <td>{{ props.item[5] }}</td>
      <td>{{ props.item[6] }}</td>
      <td>{{ props.item[7] }}</td>
      <td>{{ props.item[8] }}</td>
      <td>{{ props.item[9] }}</td>
      <td>{{ props.item[10] }}</td>
      <td>{{ props.item[11] }}</td>
      <td>{{ props.item[12] }}</td>
      <td>{{ props.item[13] }}</td>
    </tr>
</template>

我希望单击该行时，将调用editItem函数

最佳答案

我使用@click:row找到了解决方法

<v-data-table :headers="headers" :items="desserts" :items-per-page="5"
    class="elevation-1" @click:row="handleClick">
</v-data-table>

handleClick函数返回被单击项的值，因此我调用要对它起作用的方法，该方法是handleClick方法中的值。由于没有找到Vuetify的方式，因此我也手动突出显示了所单击的行。

下面是handleClick方法的示例:

handleClick(value) {
    this.highlightClickedRow(value);
    this.viewDetails(value);
},

您还可以使用event.target访问单击的行。例子在这里

highlightClickedRow(value) {
    const tr = value.target.parentNode;
    tr.classList.add('highlight');
},