vue在表格中实现右键菜单

✍️ 作者简介: 一个每天中午去打篮球和锻炼的前端开发。

🐈‍⬛ 两只猫🐱和一只狗的铲屎官🐶

🧣 微博: GuoJ阝阝（fu）

前言

最近公司的管理系统又要添加新功能，需求是为表格数据添加右键菜单，操作当前选中行的属性。
刚开始想的是直接控制DOM树生成一个HTML编写的菜单，挂载到右键点击的位置。

但是我觉得vue这么强大，肯定有右键组件，肯定比自己写的好看。不查不知道，一查居然发现vue原生支持右键菜单，当机立断，用原生右键菜单。

安装

npm install vue-contextmenujs

一、实现效果

老规矩，先来个成果图，有需要再往下看。
在这里插入图片描述

二、使用步骤

1、表格实现

我的表格用的是avue-crud，暂时不详细介绍这个表格组件了，总之就是功能很强大，比el-table强大的多。下边的属性介绍一下：

page：表格的页码显示，包括currentPage、pageSize、total等等。
data：表格数据
option：表格属性配置
v-loading：加载动画
@row-contextmenu：对表格数据的右键操作
@size-change：对每页展示多少条数据的改变操作
@current-change：翻页操作
@select：选中操作
@select-all：全选操作

<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>

这些操作可以参考avue官网，具体怎么设置先不细说了，主要介绍右键菜单。
和右键菜单对应的就是@row-contextmenu方法，监听了对表格数据的右键点击事件。我们在这个方法里绑定生成菜单的函数，我这里起的名字是handleContextMenu

2、生成右键菜单

表格做好了，右击事件也绑定好了，接下来就是生成右键菜单。

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

生成右键菜单要调用this.$contextmenu()方法。参数是一个对象：基本包含以下属性：

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

从我的例子也能看出来，最重要的是item属性，配置的是右键菜单中的每一项。
item中可以设置：

菜单名称：label：“菜单名称”
菜单前置图标：icon：“el-icon-discount”
菜单底部分割线：divided：true
菜单点击事件：onClick: () => {}
子菜单：children：[]

每次生成新的右键菜单前，先把旧的销毁。

this.$contextmenu.destroy();

3、监听鼠标滚动事件，清除右键菜单

突然发现有这么个问题：当列表数据过多时，我们需要滚动表格去查看下面的数据，这时候右键菜单的位置就和表格的数据对不上了。
这时候需要加个鼠标滚动事件的监听，当鼠标滚轮事件发生时，清除右键菜单。
代码实现如下：

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

总结

以上就是今天分享的内容，如果对您有帮助，请点赞支持。