element tree树结构 “右键自定义菜单”_el-tree右键菜单

1. 页面结构

<el-tree
  :data="data"
  :props="defaultProps"
  node-key="id"
  accordion    <!-- 手风琴-->
  @node-click="handleNodeClick"   <!-- 点击事件 -->
  @node-contextmenu="youjian"   <!-- 右键事件-->
>
<!-- 插槽  拿到tree 的 lable 根据钩端的state来标识状态-->
  <span class="custom-tree-node" slot-scope="{ node, data }">
      <span :style="{color:data.state == 0?'':'red'}">
          {{node.label}}
      </span>              
  </span>
</el-tree>
 <!-- 右键菜单-->
<ul id="menu" class="menu" v-show="menuVisible">
  <li class="menu__item" @click="handleSelect(1)">平级添加</li>
  <li class="menu__item" @click="handleSelect(2)" v-if="datacopy.level!=3">下级添加</li>
  <li class="menu__item" @click="handleSelect(3)">修改</li>
  <li class="menu__item" @click="handleSelect(4)">禁用</li>
</ul>

1. 数据

data() {
    return {
      data: [],  //树结构数据
      datacopy: {},  //右键拿到当前点击元素的值
      datacopy2: "",
      defaultProps: {  // 将键改为数据库返回的元素名称
        children: "childrens",
        label: "productTypeName",
      },
      menuVisible: false
    };

3. 右键菜单

//产品类别的右键菜单
 youjian(MouseEvent, object, Node, element) {
   this.menuVisible = false; // 先把模态框关死，目的是 第二次或者第n次右键鼠标的时候 它默认的是true
   this.menuVisible = true; // 显示模态窗口，跳出自定义菜单栏
   this.datacopy = {
     //右键的数据赋值
     id: object.sfid,
     level: Node.level,
     parseId: object.parentId,
     state: object.state,
     productTypeName: object.productTypeName,
   };
   var menu = document.querySelector("#menu");
   menu.style.left = 150 + "px";   //菜单距离左边的像素
   menu.style.top = event.currentTarget.offsetTop + "px";//菜单距离顶部的像素
   document.addEventListener("click", this.foo); // 给整个document添加监听鼠标事件，点击任何位置执行foo方法
 },
 foo() {
   // 取消鼠标监听事件 菜单栏
   this.menuVisible = false;
   document.removeEventListener("click", this.foo); // 要及时关掉监听，不关掉的是一个坑，不信你试试，虽然前台显示的时候没有啥毛病，加一个alert你就知道了
 }

4. 右键菜单的方法

handleSelect(key) {
 //key是点击的第几个方法
 //右键的时候取到当前点击的元素值this.datacopy   通过  this.datacopy.level知道自己点的是第几级  同级添加id为0 子级添加id为父级id  
 }