Element-UI中表格的右击事件-添加一个右击菜单选择栏 (vue+element)
基于 @row-contextmenu=“” 方法
-
首先,我们在表格组件中添加@row-contextmenu=""方法
<el-table @row-contextmenu="rightClick"> </el-table>
-
然后我们需要有一个右击之后的弹出的菜单选择栏
html部分:
<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部分:用了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" }, ], } }
-
接着,我们就要写交互了。
在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(); 这个代码是阻止默认的右击弹出框
-
右键弹出了菜单栏,我们还需要隐藏它。这里我使用的方法是用左击点击表格使得菜单栏隐藏。方法各异,自由发挥
在methods中写:
// table的左键点击当前行事件 clickRow(row, column, event) { let menu = document.querySelector("#menu"); menu.style.display = "none"; },
-
最后就是我们需要点击菜单栏需要做的工作了。
在methods中写:
// 右击自定义菜单的点击事件 infoClick(index) { if (index === 0) { // 要做的事情 } let menu = document.querySelector("#menu"); menu.style.display = "none"; },