如何解决在vuetify v-data-table中使用@contextmenu事件
我正在尝试构建一个自定义上下文菜单,当右键单击v-data-table组件中的一行时会弹出该菜单。
我该如何实现?
解决方法
有两种方法可以做到这一点。
使用常规的 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 之类的槽定义时不会发出。
使用带有 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()
},
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。