Element-UI中表格右键的右击事件

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