element表格组件实现右键菜单的功能

// right-key-menu.vue 
<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">编辑</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">删除</div>
  </div>
</template>
<script>
 //...忽略
  methods: {
        onload (row, column,event) {
           //调整菜单出现的位置
          let menu = document.querySelector('#right-key-menu')
          let betweenHeight = document.body.clientHeight - event.clientY
          if (betweenHeight < 150) {
            menu.style.top = event.clientY -80 + 'px'
          } else {
            menu.style.top = event.clientY -30 + 'px'
          }
          menu.style.left = event.clientX + 20 + 'px'
          // 监听dom的click事件
          document.addEventListener('click', this.$emit('rightClick')) 
       }
        }
  </script>      
<style>
.right-key-menu {
  display: block;
  line-height: 34px;
  text-align: center;
}
.right-key-menu:not(:last-child) {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.right-key-menu {
  position: absolute;
  background-color: #fff;
  width: 100px;
  font-size: 12px;
  color: #444040;
  border-radius: 4px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  white-space: nowrap;
  z-index: 1000;
}
.rightKeyMenuItem:hover {
  cursor: pointer;
  background: #66b1ff;
  border-color: #66b1ff;
  color: #fff;
}
</style>

// business-table
<template>
<div>
<el-table
 :data="tableData"
  @row-contextmenu="rowContextmenu"
  border> 
 //...忽略
</el-table>
<rightKeyMenu v-if="visable"
              @rightClick="rightClick" 
              ref="menu" 
              @edit="handleEdit"
              @del="handleDel">
              </rightKeyMenu>
 </div>
</template>
import rightKeyMenu from '@component/right-key-menu/index'
export default {
   components: {
      rightKeyMenu
    },
    methods: {
      rowContextmenu (row, column, event) {
        //如果之前已经打开了先关闭一下。
          this.visable = false
        setTimeout(()=>{
          this.visable = true
        },300)
        // 阻止右键默认行为
        event.preventDefault()
        this.$nextTick(() => {
          this.$refs.menu.onload(row,column,event)
        })
      },
      rightClick() { 
        this.visable = false
        // 取消鼠标监听事件 菜单栏
        document.removeEventListener('click', this.rightClick)
      },
      handleEdit () {
        // ..do something
      },

      handleDel () {
       // ..do something
      }
    }
  }

<template>
  <div id="right-key-menu" class="right-key-menu">
    <div class="rightKeyMenuItem" @click="$emit('edit')">编辑</div>
    <div class="rightKeyMenuItem" @click="$emit('del')">删除</div>
    <div class="rightKeyMenuItem"><slot name="more"></slot></div>
  </div>
</template>