Question

我想在单击表行时调用editItem函数。当前发生的事情是我单击表格行，但它不显示详细信息页面。但是，当我将此点击事件放在特定的表数据上时，将调用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函数

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方法中的值进行操作的方法。我还手动突出显示了所单击的行，因为我没有找到一种行之有效的方法。这里是handleClick方法的示例。像这样

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

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

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

Answer 2

此解决方案最适用于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对我来说是解决此问题的最佳途径。

Answer 3

我得到了另一个解决方案。因为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
}

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

3 个答案: