vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单
最近工作上要求在el-table的表格内屏蔽浏览器原生右键菜单,更换为自定义的菜单。期间走了不少弯路,也查阅了不少博客资料,最后终于做出来一个自己觉得还说的过去的比较像浏览器原生的自定义菜单(此处滑稽)。
首先,右击表格行可以弹出自定义菜单,选择下列菜单项可以给v-contextmenu-item添加@click方法,如下图
至此就可以显示了。但是我遇到了一个问题,就是我是利用div将整个表格包裹起来的,右击空白处同样会弹出此菜单。而我并不想这么做,我想实现的是如果表格内无数据,右击则不会弹出此菜单,所以利用了上图的v-contextmenu的disabled属性来控制菜单的显示。
其中rightCurrentContent是利用el-table的@rowRightClick方法来获取到改行第一列的Num
当右击该行时获取row中的第一列的值,然后为包裹表格的div添加