这篇文章主要介绍了Vue el-table怎么实现右键菜单功能的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇Vue el-table怎么实现右键菜单功能文章都会有所收获，下面我们一起来看看吧。
实现的效果如下：
1.el-table和右键菜单视图代码
@row-contextmenu="rightClick"是右键点击事件
@row-click="clickTableRow"是每行单击事件
计算
安全
数据库
网络和加速
企业服务
<el-table
border
:data="connectList"
@row-contextmenu="rightClick"
@row-click="clickTableRow"
>
<el-table-column label="ID" align="center" width="180" prop="id"/>
<el-table-column label="目标" align="center" prop="url" :show-overflow-tooltip="true"/>
<el-table-column label="修改时间" align="center" width="180" sortable prop="updatatime"/>
<el-table-column label="盘符" align="center" width="60" prop="drive"/>
</el-table>
<!-- 右键菜单 -->
<div id="menu" class="menuDiv">
<ul class="menuUl">
<li
v-for="(item, index) in menus"
: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) {
let menu = 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) {
let menu = document.querySelector("#menu");
menu.style.display = "none";
},
// 自定义菜单的点击事件
infoClick(index) {
if (index === 0) {
// do something
}
let menu = 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: 0 10px;
li {
width: 140px;
height: 35px;
line-height: 35px;
cursor: pointer;
border-bottom: 1px solid rgba(255, 255, 255, 0.47);
&:hover {
// background-color: rgb(26, 117, 158);
color: rgb(54, 138, 175);
}
}
}
}关于“Vue el-table怎么实现右键菜单功能”这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对“Vue el-table怎么实现右键菜单功能”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注亿速云行业资讯频道。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
