element中Tree结构右键实现自定义的菜单(一)

　　　整理最近开发过程遇到的坑，还有一些自己想要记录分享的。大概包括Tree结构：右键菜单，节点的增删改和移动，还有记录一个多层数据嵌套数据，结构不渲染的问题；表格结构：表格的上下移动，修改，还有一些小知识点。本章主要记录tree节点 右键菜单的功能。

一、实现tree结构的右键

　　element中提供了现成的api，node-contextmenu.而且提供了四个参数。可以通过右键拿到data，node节点，event（判断位置），还有节点。

　　上代码

  @node-contextmenu="rightClick"
  rightClick(){
   this.menu=true//让菜单显示
   document.removeEventListener("click", this.Listen);//添加监听，监听鼠标事件
  }

　　

二、右键菜单的实现

　　第一种，你可以自己定义div，设计样式，规定大小。需要提醒的是，你需要设置自定义属性，原因是，判断你点击的菜单功能是什么。

　　第二种，利用element中的NavMenu组件，这样可以省去一些样式的设置，menu中index属性，也是作为判断菜单功能的依据，而且提供现成的api

　　

  　　　　　　　　 <div v-show="menu">
                  <el-menu
                    id="menu" 
                    @select="handleSelect"
                    text-color="#000"
                  >
                    <el-menu-item index="1" class="menuItem">
                      <span slot="title">新建</span>
                    </el-menu-item>
                    <el-menu-item index="2" class="menuItem">
                      <span slot="title">修改</span>
                    </el-menu-item>
                    <el-menu-item index="3" class="menuItem">
                      <span slot="title">删除</span>
                    </el-menu-item>
                  </el-menu>
                </div>

　　通过select事件，可以拿到你点击的菜单功能，进行相应的操作就ok了

 handleSelect(key) {
     if（key==1）{
      console.log('这是新建功能');
    }else if（key==2）{
        console.log('这是修改功能');
    }
}        

　　对了 还有一个重要的点，就是对鼠标的监听事件，开始写的时候，因为没有写这个监听，老是踩坑，后来参考了网上大佬的的写法解决了。

　　需要监听你鼠标的事件，如果你点击别的地方，及时将菜单关闭

Listen() {
      this.menu = false;
      document.removeEventListener("click", this.Listen); 
},

　　后记：下一篇具体写菜单操作，包括新建，修改，删除，上移，下移。