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

Posted 2023-02-16

【中文标题】如何向 v-data-table 添加点击事件？

【英文标题】：How can I add a click event to the v-data-table?

【发布时间】：2020-01-21 08:07:30

【问题描述】：

我想在点击表格行时调用 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函数

【问题讨论】：

这解决了你的问题：codepen.io/nsiggel/pen/KRdGgE

我实际上首先从这里的示例代码中得到了这个想法，但它似乎不适用于我。如果您注意到我们的模板非常相似，尽管我错过了这个 @click="editItem(props.item) 但即使在添加它之后我的模板也无法正常工作

我已尝试在我的应用程序上运行相同的代码 ，但该事件仍然无法在此处运行。会不会是 vuetify 版本的问题？

您能否制作一个可以重现您的问题的 codepen 示例？

我不知道该怎么做

【参考方案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');
,

【讨论】：

highlightClickedRow(value) 应该是 highlightClickedRow(event) 或者第二行 let tr = event.target.parentNode; 应该是 let tr = value.target.parentNode;

@SimonThiel 如何让事件对象突出显示ClickedRow(event)。从事件 obj 访问目标时出现“无法读取未定义的属性 'parentNode'”错误。我该如何解决这个问题？

如果有人有兴趣查看工作示例，下面是链接。 codepen.io/mshrestha/pen/VwavGQa

【参考方案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

【参考方案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 对我来说是解决这个问题的最佳方法。

【讨论】：

这种方法会篡改表格在不同视口上的响应能力，因为您要覆盖默认样式。如果您 a) 不介意页面响应性或 b) 愿意设计自己的响应式样式，则可以这样做

当然可以？我用于发布产品，并且对这种方法没有任何问题。