vue如何在表格中实现右键菜单

<avue-crud
   ref="crud"
   :page.sync="detailPage"
   :data="tableData"
   :option="tableOption"
   v-loading="loading"
   @row-contextmenu="handleContextMenu"
   @size-change="sizeChange"
   @current-change="currentChange"
   @select="handleSelect"
   @select-all="handleSelectAll">
 </avue-crud>

handleContextMenu(item, index) {
      this.$contextmenu.destroy();
      this.$contextmenu({
        items: [
          {
            label: "属性",
            onClick: () => {
              // 记录当前右键操作
              store.commit("SET_RIGHT_TYPE", "viewResourceNature");
              this.$refs.attrBox.visible = true;
            },
          },
          {
            label: "标签设置",
            icon: "el-icon-discount",
            disabled: !(current.Editable),
            onClick: () => {
              // 记录当前右键操作
              store.commit("SET_RIGHT_TYPE", "setPictureTag");
              this.setTag(item);
            },
          },
          {
            label: "电子图册",
            divided: true,
            onClick: () => {
              // 记录当前右键操作
              store.commit("SET_RIGHT_TYPE", "electronicAtlas");
              this.$refs.electronicBox.visible = true;
            },
            children: [
              {
                label: "截取可视化区域",
                onClick: () => {
                  this.message = "截取可视化区域";
                }
              },
              { label: "截取全屏" }
            ]
          },
          {
            label: "渠道名称设置",
            onClick: () => {
              // 记录当前右键操作
              store.commit("SET_RIGHT_TYPE", "abilityNames");
              this.$refs.abnBox.visible = true;
            },
          }
        ],
        event,
        customClass: "resource-context-menu",
        zIndex: 999,
        minWidth: 200,
      });
      return false;
    }

{
	// 菜单内容
	item：[],
	// 自定义样式
    customClass: "resource-context-menu",
    // 层级
    zIndex: 999,
    // 最小宽度
    minWidth: 200,
}

this.$contextmenu.destroy();

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();
    }
}