elementui右键菜单实现

el-table添加@row-contextmenu="rightClick"

// table的右键点击当前行事件
    rightClick(row, column, event) {
      // 阻止浏览器右键默认
      event.preventDefault();
      // 当前行在编辑状态时 或者 有正在编辑的行
      if (!(this.currentRow.showRow || row.showRow) && row.patrolStatus === '未进行') {
        this.foo();
        // 定义变量接收该节点所对应的对象
        this.currentRow = row;
        this.menuVisible = true;
        // 获取当前右键点击table下标
        this.data.forEach((item, index) => {
          if (item.id === row.id) {
            this.currentRowIndex = index;
            return false;
          }
        });
        // 监听事件鼠标点击事件，若点击则隐藏菜单
        document.addEventListener('click', this.foo);
        this.$refs.card.$el.style.left = `${event.clientX + 20}px`;
        this.$refs.card.$el.style.top = `${event.clientY - 100}px`;
        
      }
    },
    foo() {
      this.menuVisible = false;
      // 及时关掉监听
      document.removeEventListener('click', this.foo);
    },

菜单样式不管，使用el-card

          

            编辑
          
          

            删除
          
        

保存当前行数据，点击调用card上的模拟菜单绑定的方法~注意间隙。