vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单
vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单
最近工作上要求在el-table的表格内屏蔽浏览器原生右键菜单，更换为自定义的菜单。期间走了不少弯路，也查阅了不少博客资料，最后终于做出来一个自己觉得还说的过去的比较像浏览器原生的自定义菜单（此处滑稽）。
首先，右击表格行可以弹出自定义菜单，选择下列菜单项可以给v-contextmenu-item添加@click方法，如下图
至此就可以显示了。但是我遇到了一个问题，就是我是利用div将整个表格包裹起来的，右击空白处同样会弹出此菜单。而我并不想这么做，我想实现的是如果表格内无数据，右击则不会弹出此菜单，所以利用了上图的v-contextmenu的disabled属性来控制菜单的显示。
其中rightCurrentContent是利用el-table的@rowRightClick方法来获取到改行第一列的Num
当右击该行时获取row中的第一列的值，然后为包裹表格的div添加@contextMenu鼠标右键点击方法，方法名为rightClick,在其中做是否现实的判断
然后判断rightClickContent的内容是否为空（这里做到一半我发现一个很有趣的问题，在我在表格内右击后，在div外部再次右击，自定义菜单并不会消失，这并不符合我得想法，于是又开始继续修改，就有了下面调用的hide方法。）这里每次点击右键首先会执行div里的方法@contextmenu，再去执行table表格内的rowRightClick方法。这里为rightClickContent设置空内容的原因也是上面我添加在v-contextmenu内的控制:disabled属性的标志位。如果点击表格内容，则会在rowRightClick方法内给rightClickContent赋值，如果点击空白处，则会先执行div内的@contextmenu方法，则rowRightClick方法不会调用。再在rightClick方法中判断rightClickContent的值，如果为空则调用hide方法。
至此，基本已经完成我想要的功能了，但是又发现一个问题，就是我在表格内右击鼠标弹出后，如果鼠标左键点击el-table表头的过滤器（一般鼠标左键点击页面任意一处自定义菜单就会消失），而这货仍然存在。。。WTF？我想要的是不管在任何地方，只要鼠标左键点击就要它消失。于是开始了漫漫长路，最终发现在包裹此table的div标签内添加一个@mousedown方法就行了，该方法继续调用v-contextmenu菜单的hide方法，就可以了。
至此就完成了这个菜单。。。
这也是本人第一次在大佬云集的CSDN上写博客，也是人生第一个博客。目的也是为了自己能够将所出现的问题记录下来，以免再次再犯，主要也是看有没有遇到相同问题还未解决的朋友可以参考一下。毕竟编程萌新，文中有写的不对的地方还请大佬多多指教，谢谢。
以上是 vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单 的全部内容， 来源链接： utcz.com/z/374742.html
