el-tree右键添加弹窗

  <el-tree
          ref="tree"
          highlight-curren
          node-key="id"
          :data="tree"
          :props="defaultProps"
          :default-expand-all="true"
          :expand-on-click-node="false"
          @node-click="handleNodeClick"
          @node-contextmenu="rightClick"
        ></el-tree>

 showRightMenu控制显示隐藏

循环列表 

rightMenuList: [
        {
          id: 1,
          name: "添加公司",
          icon: "el-icon-edit-outline",
          color: "#409eff",
        },
        {
          id: 2,
          name: "编辑当前公司",
          icon: "el-icon-edit",
          color: "#67c23a",
        },
        {
          id: 3,
          name: "删除当前公司",
          icon: "el-icon-delete",
          color: "#f56c6c",
        },
      ],

<!-- 弹窗样式 -->
    <div class="right_menu" id="menu" v-show="showRightMenu">
      <ul>
        <li
          v-for="(item, index) in rightMenuList"
          :key="index"
          style="aligin-text: left"
          @click="addTree(item.id)"
        >
          <i
            :class="item.icon"
            :style="{ color: item.color }"
            style="font-size: 16px; margin-left: 7px"
          ></i>
          &nbsp; &nbsp;
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>

// 右键打开弹窗
    rightClick(event, data, node, obj) {
      this.showRightMenu = true;
      let menu = document.getElementById("menu");
      menu.style.left = event.clientX + 10 + "px";
      menu.style.top = event.clientY - 70 + "px";
      document.addEventListener("click", this.closeRightMenu);
    },
    // 关闭右键点击弹窗
    closeRightMenu() {
      this.showRightMenu = false;
      document.removeEventListener("click", this.closeRightMenu);
    },

 

//右键菜单
.right_menu {
  position: absolute;
  width: 140px;
  background: rgb(239, 239, 241);
  border: 1px solid rgb(241, 241, 241);
  border-radius: 2%;
  box-shadow: 0 2px 12px 0 rgb(0 0 0 / 30%);
}
.right_menu ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  border-radius: 2%;
}
.right_menu ul li {
  margin: 0 0 1px 0;
  color: rgb(77, 77, 73);
  text-align: left;
  font-size: 14px;
  padding-top: 4%;
  width: 100%;
  height: 25px;
  background: #fff;
  float: left;
  cursor: pointer;
}