Vue el-table怎么实现右键菜单功能

Vue el-table怎么实现右键菜单功能

这篇文章主要介绍了Vueel-table怎么实现右键菜单功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vueel-table怎么实现右键菜单功能文章都会有所收获，下面我们一起来看看吧。

实现的效果如下：

1.el-table和右键菜单视图代码

@row-contextmenu="rightClick"是右键点击事件

@row-click="clickTableRow"是每行单击事件

<el-tableborder:data="connectList"@row-contextmenu="rightClick"@row-click="clickTableRow"><el-table-columnlabel="ID"align="center"width="180"prop="id"/><el-table-columnlabel="目标"align="center"prop="url":show-overflow-tooltip="true"/><el-table-columnlabel="修改时间"align="center"width="180"sortableprop="updatatime"/><el-table-columnlabel="盘符"align="center"width="60"prop="drive"/></el-table><!--右键菜单--><divid="menu"class="menuDiv"><ulclass="menuUl"><liv-for="(item,index)inmenus":key="index"@click.stop="infoClick(index)">{{item.name}}</li></ul></div>

2.js方法代码

data(){return{//右键菜单menus:[{name:'编辑webshell',operType:1},{name:'删除webshell',operType:2},{name:'虚拟终端',operType:3},{name:'文件管理',operType:4}]}//methods部分：//table的右键点击当前行事件rightClick(row,column,event){letmenu=document.querySelector("#menu");//阻止元素发生默认的行为event.preventDefault();//根据事件对象中鼠标点击的位置，进行定位menu.style.left=event.clientX+10+"px";menu.style.top=event.clientY-30+"px";//改变自定义菜单的隐藏与显示menu.style.display="block";menu.style.zIndex=1000;},//table的左键点击当前行事件clickTableRow(row,column,event){letmenu=document.querySelector("#menu");menu.style.display="none";},//自定义菜单的点击事件infoClick(index){if(index===0){//dosomething}letmenu=document.querySelector("#menu");menu.style.display="none";},

3.css样式代码

.menuDiv{display:none;position:absolute;.menuUl{height:auto;width:auto;font-size:14px;text-align:left;border-radius:3px;border:none;background-color:#c4c4c4;color:#fff;list-style:none;padding:010px;li{width:140px;height:35px;line-height:35px;cursor:pointer;border-bottom:1pxsolidrgba(255,255,255,0.47);&:hover{//background-color:rgb(26,117,158);color:rgb(54,138,175);}}}}

关于“Vueel-table怎么实现右键菜单功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vueel-table怎么实现右键菜单功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注恰卡编程网行业资讯频道。