1,在表格外面添加menu组件
<a-menu class="menustyle" :style="menuStyle" v-if="menuVisible">
<a-menu-item>
<a @click="lookBuilding(recordRow)">查看</a>
</a-menu-item>
<a-menu-item>
<a @click="BuildingDelete(recordRow)" class="red">删除</a>
</a-menu-item>
</a-menu>
2,在data中添加如下代码
menuVisible: false,
menuStyle: {
position: "absolute",
top: "0",
left: "0",
zIndex: 1,
borderRadius: "5px",
border: "1px solid #eee"
},
recordRow: [],
customClick: record => ({
on: {
contextmenu: e => {
e.preventDefault();
this.menuVisible = true;
this.recordRow = record;
this.menuStyle.top = e.clientY + "px";
this.menuStyle.left = e.clientX + "px";
document.addEventListener("click", this.cancelClick);
}
}
})
3,在methods中添加如下方法:
//取消右键菜单
cancelClick() {
this.menuVisible = false;
document.body.removeEventListener("click", this.cancelClick);
},
4,完成: