--- theme: scrolls-light --- 「这是我参与2022首次更文挑战的第13天，活动详情查看：[2022首次更文挑战](https://juejin.cn/post/7052884569032392740 "https://juejin.cn/post/7052884569032392740")」。 ## 前言最近产品给我提了个需求 ————想要实现用户右键`table`的某一行时，显示该行操作栏的功能。觉得这个需求挺有意思的,特此分享给大家。技术栈: elementUI ## 实现思路要实现右键菜单我们需要定义一个菜单栏组件当用户点击`table`的某一行时，我们处理好显示位置再将菜单栏渲染到`table`上。先实现这个`rightKeyMenu`组件: ```javascript // right-key-menu.vue ``` 使用`rightKeyClick`组件。我们需要监听用户右键点击table行的操作，这个功能在elementUI table中已经有相应的方法了： > row-contextmenu 当某一行被鼠标右键点击时会触发该事件 (row, column, event) 触发这个方法然后将参数都传递过去。修改`visable`的值将菜单栏组件显现出来。在菜单栏组件中我们通过获取到当前点击时浏览器Y轴位置将menu的高度进行合适修改。这样当我们点击不同`table`行。`menu`的位置也会随着鼠标点击时距离浏览器Y轴的位置相应的进行变化。 ```javascript // business-table import rightKeyMenu from '@component/right-key-menu/index' export default { components: { rightKeyMenu }, methods: { rowContextmenu (row, column, event) { //如果之前已经打开了先关闭一下。 this.visable = false setTimeout(()=>{ this.visable = true },300) // 阻止右键默认行为 event.preventDefault() this.$nextTick(() => { this.$refs.menu.onload(row,column,event) }) }, rightClick() { this.visable = false // 取消鼠标监听事件菜单栏 document.removeEventListener('click', this.rightClick) }, handleEdit () { // ..do something }, handleDel () { // ..do something } } } ``` 有时候列表的操作项并不仅仅局限于修改和删除。因此我们可以使用插槽自定义需要显示的内容。 ```javascript ``` 至此。element右键菜单的功能就实现完成了。实现这个需求最主要的一点是要计算好右键菜单显示的位置。由于不同页面table所在位置不同，因此`rightKeyClick`组件还需要传递几个参数去进行优化适配。这里我就不在细说了。大家可以自己去试试。 ## 最后文章若有不足之处，还请大家批评指出。感谢您观看此篇文章希望能给个👍评论收藏三连！你的点赞就是我写作的动力。