如何向 v-data-table 添加点击事件？

Question

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

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

<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 函数

原文由 Anjayluh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我找到了一种使用 @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');
},

原文由 Anjayluh 发布，翻译遵循 CC BY-SA 4.0 许可协议