elementui tree鼠标右击显示menu

最近的项目做权限管理涉及到比较多树形结构，在这里分享一种鼠标右击树节点显示菜单的方法，效果图如下。（网上看了很多其他方法，感觉太繁琐，或者说不适合自己的项目）

1、tree鼠标右击方法

官方文档给出了鼠标右击的方法，直接拿来用就是了， @node-contextmenu=“rightClick”。

2、tree懒加载

menu是用的 scoped slot来实现的，传入了node和data。为了方便menu定位，首先给树节点加上了相对定位，给menu加绝对定位，menu的样式大家随意发挥了，menu的click事件要阻止冒泡 @click.stop，不然点击menu你只能看树在做伸展运动！。
html代码

<el-tree
          style="position:relative"
          ref="tree"
          node-key="gndm"
          :default-expanded-keys="['1']"
          :props="defaultProps"
          lazy
          :load="loadNode"
          show-checkbox
          @node-click="handleNodeClick"
          @check-change="handleCheckChange"
          @node-contextmenu="rightClick"
        >
          <span class="custom-tree-node" slot-scope="{node, data}">
            <span>{{node.label}}</span><!--显示节点名称-->
            <!-- 树节点menu -->
            <div v-show="data.showMenuFlag" class="tree-menu">
              <span class="tree-btn" >增加</span>
              <span class="tree-btn" >增加子节点</span>
              <span class="tree-btn" >插入</span>
              <span class="tree-btn" @click.prevent="removeNode(node,data)">删除</span>
            </div>
          </span>
        </el-tree>

树的加载直接看代码吧，写的比较繁琐，因为没有控制显示menu的flag，循环了一遍子节点，加上flag，略有影响性能，子节点不是很多可以忽略，（request是封装的axios方法，且采用了代理地址）

loadNode(node, resolve) {
      if (node.level === 0) {
      //request是封装的axios
        request.post("/glyygn/inittree", {}).then(res => {
          if (res.data.head.errorCode === 0) {
            console.log("初始化功能树", res.data.body);
            return resolve(res.data.body);//初始化根节点
          }
        });
      } else {
      //根据节点key请求子节点
        let par = {
          sjgnDm: node.key
        };
        request.post("/glyygn/getchildnode", par).then(res => {
          if (res.data.head.errorCode === 0) {
            console.log("查询下一级功能树", res.data.body);
            //循环加flag
            res.data.body.forEach(ele => {
              ele.showMenuFlag = false;
            });
            resolve(res.data.body);
          } else {
            errorNotice(res.data.head.errorMsg);//封装的报错
          }
        });
      }
    }

3、鼠标右击事件

鼠标右击主要有两点，第一个是要把上次右击的data暂存起来，以便右击另一个节点的时候取消上次的右击menu，不然会出现n个menu；第二个是要加一个事件监听，以便点击其他地方时取消menu，直接看代码吧。

	rightClick(event, data, node, self) {
      this.temData.showMenuFlag = false;//将上次保存的节点数据的showMenuFlag设false，取消上次右击菜单
      data.showMenuFlag = true;//显示菜单
      document.addEventListener("click", this.listenEvent);//增加事件监听，以便点击其他地方取消右击菜单
      this.temData = data;//把该节点的数据暂存起来
    },
	listenEvent() {
      this.predata.showMenuFlag = false;
      document.removeEventListener("click", this.listenEvent);
    } 

大概就这么多吧，不知道有没有漏，本人也是小白，这个是自己摸索的方法，有更好方法的小伙伴或者有不懂的发邮件吧！附上邮箱[email protected]