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

爱被打了一巴掌 2023-06-01 14:58 2阅读 0赞

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

一、实现tree结构的右键

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

![1492151-20190905163615422-1990064452.png][]

上代码

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

二、右键菜单的实现

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

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

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

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

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

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

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

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

转载于:https://www.cnblogs.com/zhige-1/p/11446520.html

[1492151-20190905163615422-1990064452.png]: /images/20230601/cb3be167e417404481545fe99e6132b4.png