vue elementui table表格右键鼠标 自定义菜单内容

Element组件 table表格 右键鼠标 自定义菜单（效果图在文字末尾）

1、基于elementui组件 table表格组件；
2、右键任何位置 跟随鼠标位置跳转菜单；
3、类似于window鼠标右键一样的效果；

给表格组件绑定右键事件@row-contextmenu=“rightClick”；
注意阻止弹出浏览器默认的菜单栏，即使用 e.preventDefault();

代码如下：

html部分：

<el-table 
      border 
      stripe 
      size="small"
      style="width: 100%;"
      highlight-current-row
      @row-contextmenu="rightClick"
      :data="data1"
      ref="labelTableRef">
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="name" label="名称1"></el-table-column>
      <el-table-column prop="name" label="名称2"></el-table-column>
      <el-table-column prop="name" label="名称3"></el-table-column>
    </el-table>
    
     <!-- 右键菜单内容 -->
    <div v-show="menuVisible" ref="menuRef">
      <div id="menu" class="menu">
        <div class="menu_item first">在新标签页中打开链接</div>
        <div class="line"></div>
        <!-- <div class="menu_item" @click="newWindowOpenLink">在新窗口中打开链接</div> -->
        <div class="menu_item second">复制链接地址</div>
      </div>
    </div>

js部分：

data() {
    return {
      data1: [{name: '名称1'},{name: '名称2'},{name: '名称3'},{name: '名称4'},],
      menuVisible: false,
    }
  },
mounted () {
    document.addEventListener('click',this.bodyCloseMenu)
  },
  // 在页面注销前，将点击事件给移除
  beforeDestroy() {
    document.removeEventListener('click',this.bodyCloseMenu)
  },
 methods: {
    rightClick (row, column, event) {
      this.menuVisible = false
      this.menuVisible = true
      var menu = document.querySelector('#menu')
      event.preventDefault();  // 阻止浏览器默认右键事件
      menu.style.left = event.pageX - 40 + 'px'  // MouseEvent.clientX获取鼠标点击的坐标，在该处新增加的menu填充的位置
      menu.style.top = event.pageY - 50 + 'px'
    },
    bodyCloseMenu(e) {
      let self = this
      if (this.$refs.menuRef && !this.$refs.menuRef.contains(e.target)) {
        if (self.menuVisible === true) {
          self.menuVisible = false
        }
      }
    },
 }

css部分：

<style lang="scss" scoped>
.menu {
  position: absolute;
  border-radius: 3px;
  border: 1px solid #E4E7ED;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
  background-color: #FFF;
  padding: 8px 0;
  z-index: 9;
}
.menu_item {
  // display: block;
  padding: 5px 60px 0px 25px;
  font-size: 12px;
  white-space: nowrap;
  cursor: pointer;
}
.menu_item:hover {
  background-color: #eee;
}
.first {
  padding-bottom: 5px;
}
.second {
  padding-top: 5px;
}
.line {
  border-bottom: 1px solid #E4E7ED;
}
</style>

效果图如下：