问题：右击表格，弹出自定义菜单进行特殊操作

一、安装（地址：https://github.com/GitHub-Laziji/menujs）

npm install vue-contextmenujs

main.js

import Contextmenu from 'vue-contextmenujs'
Vue.use(Contextmenu)

二、表格

这里我是用的是umyui，基于element-ui的表格,使用表格API（row-contextmenu）

    <ux-grid border
      ref="saleBill"
      :data="saleBill"
      show-overflow
      size="small"
      @row-contextmenu="handleContextMenu">
    </ux-grid>

JS部分

mounted() {
    // 先把浏览器自带的右键功能屏蔽掉
   this.$nextTick(() => {
     // 禁止右键
     document.oncontextmenu = new Function("event.returnValue=false");
   });
   // 监听页面滚动事件
   window.addEventListener('scroll', this.handleScroll, true)
 },
beforeDestroy() {
  // 离开页面时，清除页面滚动事件
  window.removeEventListener('scroll', this.handleScroll, true)
  this.$nextTick(() => {
    // 放开对浏览器右键的禁止
    document.oncontextmenu = new Function();
  });
},
methods: {
    // 页面滚动时清除右键菜单，避免位置混淆
    handleScroll () {
      this.$contextmenu.destroy();
    },
    handleContextMenu(item, index) {
      this.$contextmenu.destroy();
      this.$contextmenu({
        items: [
          {
            label: "属性",
            onClick: () => {
              //进行其他操作
            },
          },
          {
            label: "标签设置",
            icon: "el-icon-discount",
            disabled: !(current.Editable),
            onClick: () => {
              //进行其他操作
            },
          },
          {
            label: "渠道名称设置",
            onClick: () => {
              //进行其他操作
            },
          }
        ],
        event,
        customClass: "resource-context-menu",
        zIndex: 999,
        minWidth: 200,
      });
      return false;
    }
}

效果如下：