时间戳

首页 > 解决方案 > 将 @contextmenu 事件与 vuetify v-data-table 一起使用

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

问题描述

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

我怎样才能做到这一点？

标签： vue.jsvuetify.js

解决方案

有两种方法可以做到这一点。

使用常规的 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插槽的表

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

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

推荐阅读