element ui tree结构双击单机右键事件

<el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
          @node-contextmenu="rightClick"
          default-expand-all
        >
        </el-tree>


<!-- 右键菜单 -->
    <div id="menuyuan" class="menuDiv">
      <ul class="menuUl">
        <li
          v-for="(item, index) in menus"
          :key="index"
          @click.stop="infoClick(index)"
        >
          <i :class="item.icon"></i> {{ item.name }}
        </li>
      </ul>
    </div>

1、以上是html  包括右键菜单

2、data中

      //双击
      nodeCount: 0,
      preNodeId: null,
      curNodeId: null,
      nodeTimer: null,
      
       //右键
      currentData: "",
      currentNode: "",
      menuVisible: false,
      firstLevel: false,
      Node: {},

      menus: [
        { name: "菜单一", operType: 1, icon: "el-icon-tickets" },
        { name: "二", operType: 2, icon: "el-icon-folder-opened" },
        { name: "三", operType: 3, icon: "el-icon-folder-add" },
        { name: "四", operType: 4, icon: "el-icon-refresh-right" },
        { name: "五", operType: 5, icon: "el-icon-close" },
      ],

3、methods中

    //双击
    handleNodeClick(data, node, prop) {
      //这里可以调用单击事件
        //这是单击隐藏右键菜单
      let menu = document.querySelector("#menuyuan");
      menu.style.display = "none";


      // console.log(data, node, prop);
      this.nodeCount++;
      if (this.preNodeId && this.nodeCount >= 2) {
        this.curNodeId = data.$treeNodeId;
        this.nodeCount = 0;
        if (this.curNodeId == this.preNodeId) {
          this.compile(node);
          this.curNodeId = null;
          this.preNodeId = null;
          return;
        }
      }
      this.preNodeId = data.$treeNodeId;
      this.nodeTimer = setTimeout(() => {
        this.preNodeId = null;
        this.nodeCount = 0;
      }, 300);
    },


// 右击的功能
rightClick(event, object, Node, element) {
      this.Node = Node
      this.currentData = object;
      this.currentNode = Node;
      if (Node.level === 1) {
        this.firstLevel = true;
      } else {
        this.firstLevel = false;
      }
      this.menuVisible = true;
      let menu = document.querySelector('#menuyuan')
      // /* 菜单定位基于鼠标点击位置 */
      menu.style.left = event.clientX + 20 + "px";
      menu.style.top = event.clientY - 25 + "px";
      menu.style.display = "block";
    },
    // 右击自定义菜单的点击事件
    infoClick(index) {
      if (index === 0) {
        // 属性
        console.log("属性");
      }else if(index === 1){
        
      }else if(index === 2){
        
      }else if(index === 3){
       
      }else if(index === 4){
        
      }
      let menu = document.querySelector("#menuyuan");
      menu.style.display = "none";
    },

4、给右键菜单加个样式

.menuDiv {
    display: none;
    position: absolute;
    .menuUl {
      height: auto;
      width: auto;
      font-size: 14px;
      text-align: left;
      border-radius: 4px;
      border: none;
      background-color: #ffffff;
      color: #606266;
      list-style: none;
      border: 1px solid #ebeef5;
      li {
        width: 140px;
        height: 35px;
        line-height: 35px;
        padding: 0 10px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, 0.47);
        &:hover {
          display: block;
          background-color: #ecf5ff;
          color: #7abbff;
        }
      }
    }
  }

个人使用的一些总结，使用中发现问题随时反馈