将 @contextmenu 事件与 vuetify v-data-table 一起使用

Question

我正在尝试构建一个自定义上下文菜单，右键单击 v-data-table 组件中的一行时会弹出该菜单。

我怎样才能做到这一点？

Answer 1

有两种方法可以实现这一点。

使用常规 v-data-table 行

只需将contextmenu:row事件侦听添加到v-data-table组件，然后享受右键单击时每行发出此事件的魔力。捕获这个事件并在JS上处理它。

<v-data-table :items="myItems"
              :headers="headers"
              @contextmenu:row="rightClickHandler"
              ...
/>

然后你可以对事件和发出该事件的项目执行任何你想要的操作

methods: {
  rightClickHandler(event, item) {
    // do something with event and/or item
    console.log(event, item)
  }
}

注意：当通过项目或正文等槽定义表行时，不会发出。

使用带item/body槽的表

当使用槽来自定义构建自己的表行时，您需要自己手动触发每一行上的事件

<v-data-table
  :headers="headers"
  :items="myItems"
  ...
  <template v-slot:body="{ items }">
    <tbody>
      <tr v-for="(item, index) in items"
          :key="item.id"
          @contextmenu="rightClick($event, item)"
          ...

在脚本方面，只需实现处理事件的函数以及被单击的项目

methods: {
  rightClick(event, item) {
    console.log(item)
    event.preventDefault()
  },