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

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

基于 @row-contextmenu=“” 方法

1. 首先,我们在表格组件中添加@row-contextmenu=""方法

   <el-table @row-contextmenu="rightClick">
   </el-table>
   

2. 然后我们需要有一个右击之后的弹出的菜单选择栏

   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" },
         ],
       }
   }
   

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";
       },