如何向 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函数

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');
},

Answer 2

我得到了另一个突出显示的解决方案。 因为 Anjayluh 的想法对我不起作用。

在 Vuetify 2.0.0

模板

<v-data-table 
  :headers="headers"
  :items="desserts"
  :class="[item.selected && 'selected']"
  @click:row="handleClick"
/>
...
</v-data-table>

和脚本方法

handleClick(row) {
    // set active row and deselect others
    this.desserts.map((item, index) => {
        item.selected = item === row

        this.$set(this.desserts, index, item)
    })

    // or just do something with your current clicked row item data
    console.log(row.sugar)
},

还有一个风格

.selected {
    background-color: red
}

Answer 3

这个解决方案最适合，也许对你有帮助，它适用于 vuetify 2.x。

{
  // inside Vue Component
  methods: {
    openLink(link) {
      console.log(`opened link ${link}`)
    }
  }
}

<v-data-table
  :options="{ openLink }"
>
  <template v-slot:body="{ items, options }">
    <tbody>
      <tr
        v-for="item in items"
        :key="item.id"
      >
        <td>
          <button @click="() => options.openLink(item)" />
        </td>
      </tr>
    </tbody>
  </template>
</v-data-table>

看：Data Table Api - slots.body 对我来说是解决这个问题的最佳方法。