Element-UI中表格的右击事件-添加一个右击菜单选择栏 (vue+element)
<el-table @row-contextmenu="rightClick">
</el-table>
右键菜单
<div id="menu" class="menuDiv">
<ul class="menuUl">
<li
v-for="(item, index) in menus"
:key="index"
@click.stop="infoClick(index)"
>
<i :class="item.icon"></i> {{ item.name }}
</li>
</ul>
</div>
css
// 菜单样式
.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" },
],
}
}
在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(); 这个代码是阻止默认的右击弹出框
右键弹出了菜单栏,我们还需要隐藏它。这里我使用的方法是用左击点击表格使得菜单栏隐藏。方法各异,自由发挥
// table的左键点击当前行事件
clickRow(row, column, event) {
let menu = document.querySelector("#menu");
menu.style.display = "none";
},
最后就是我们需要点击菜单栏需要做的工作了。
// 右击自定义菜单的点击事件
infoClick(index) {
if (index === 0) {
// 要做的事情
}
let menu = document.querySelector("#menu");
menu.style.display = "none";
},