vue.js - 将@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 槽的表格

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

<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()
  },