el-table添加@row-contextmenu="rightClick"
// table的右键点击当前行事件
rightClick(row, column, event) {
// 阻止浏览器右键默认
event.preventDefault();
// 当前行在编辑状态时 或者 有正在编辑的行
if (!(this.currentRow.showRow || row.showRow) && row.patrolStatus === '未进行') {
this.foo();
// 定义变量接收该节点所对应的对象
this.currentRow = row;
this.menuVisible = true;
// 获取当前右键点击table下标
this.data.forEach((item, index) => {
if (item.id === row.id) {
this.currentRowIndex = index;
return false;
}
});
// 监听事件鼠标点击事件,若点击则隐藏菜单
document.addEventListener('click', this.foo);
this.$refs.card.$el.style.left = `${event.clientX + 20}px`;
this.$refs.card.$el.style.top = `${event.clientY - 100}px`;
}
},
foo() {
this.menuVisible = false;
// 及时关掉监听
document.removeEventListener('click', this.foo);
},
菜单样式不管,使用el-card
<el-card class="box-card" ref="card" v-show="menuVisible" >
<div class="edit" @click="edit()">
编辑
</div>
<div class="delete" @click="remove()" >
删除
</div>
</el-card>
保存当前行数据,点击调用card上的模拟菜单绑定的方法~注意间隙。