Element-UI中表格右键的右击事件-添加一个右击菜单选择栏 （vue+element）

Element-UI中表格的右击事件-添加一个右击菜单选择栏 （vue+element）

基于 @row-contextmenu=“” 方法

1. 首先,我们在表格组件中添加@row-contextmenu=""方法<el-table @row-contextmenu="rightClick"></el-table>
2. 然后我们需要有一个右击之后的弹出的菜单选择栏html部分：<divid="menu"class="menuDiv"><ulclass="menuUl"><liv-for="(item, index) in menus":key="index"@click.stop="infoClick(index)"><i:class="item.icon"></i> {{ item.name }} </li></ul></div>css部分：用了scss// 菜单样式 .menuDiv{display: none;position: absolute;.menuUl{height: auto;width: auto;font-size: 14px;text-align: left;border-radius: 4px;border: none;background-color: #ffffff;color: #606266;list-style: none;border: 1px solid #ebeef5;li{width: 140px;height: 35px;line-height: 35px;padding: 0 10px;cursor: pointer;border-bottom: 1px solid rgba(255, 255, 255, 0.47);&:hover{display: block;background-color: #ecf5ff;color: #7abbff;}}}}data中的数据data(){return{//右键菜单栏menus:[{name:"菜单一",operType:1,icon:"el-icon-upload2"},{name:"菜单二",operType:2,icon:"el-icon-folder-add"},{name:"菜单三",operType:3,icon:"el-icon-edit-outline"},{name:"菜单四",operType:4,icon:"el-icon-folder-remove"},{name:"菜单五",operType:5,icon:"el-icon-download"},],}}
3. 接着，我们就要写交互了。在methods中写：// 表格右击的功能rightClick(row, column, event){ event.preventDefault();let menu = document.querySelector("#menu");// 根据事件对象中鼠标点击的位置，进行定位 menu.style.left = event.clientX -258+"px"; menu.style.top = event.clientY -75+"px";// 改变自定义菜单的隐藏与显示 menu.style.display ="block"; menu.style.zIndex =1000;},讲解:event.preventDefault(); 这个代码是阻止默认的右击弹出框
4. 右键弹出了菜单栏，我们还需要隐藏它。这里我使用的方法是用左击点击表格使得菜单栏隐藏。方法各异，自由发挥在methods中写：// table的左键点击当前行事件clickRow(row, column, event){let menu = document.querySelector("#menu"); menu.style.display ="none";},
5. 最后就是我们需要点击菜单栏需要做的工作了。在methods中写：// 右击自定义菜单的点击事件infoClick(index){if(index ===0){// 要做的事情}let menu = document.querySelector("#menu"); menu.style.display ="none";},