el-tree 鼠标右键加函数、根据level判断第几级

 //右键时触发的事件
    floderOption(e, data, n, t) {  
      // console.log('n.level==:',n.level)
      if (n.level === 1) {
        this.optionCardShow = false 
        this.optionCardX = e.x   // 让右键菜单出现在鼠标右键的位置
        this.optionCardY = e.y - 110
        this.optionData = data
        this.node = n // 将当前节点保存
        this.tree = t
        this.optionCardShow = true  // 展示右键菜单 
        document.addEventListener("click", this.OptionCardClose); 
      } else {
        this.optionCardShow = false 
        document.addEventListener("click", this.OptionCardClose);
      }
    }, 
    OptionCardClose(event) {
      var currentCli = document.getElementById("option-button-group");
      if (currentCli) {
        if (!currentCli.contains(event.target)) { //点击到了id为option-button-group以外的区域，就隐藏菜单
          this.optionCardShow = false;
        }
      }
    }, 

 <el-tree highlight-current :data='dataTree' node-key='id' @current-change='handleCheckChange' @node-contextmenu="floderOption"
                     default-expand-all ref='tree1'>
              <div class=' el-tree-node ' slot-scope='{ node, data }'>
                <div class='el-tree-node__content'>
                   <div @dblclick="rightAddBtn">
                     <div class='udpUrlClass'>
                         <div class="son">{{ node.label }}</div>
                     </div>
                  </div>
                </div>
              </div>
            </el-tree> 

今日分享：element-ui里面的树组件Tree

现在有一个需求：data数据有三层嵌套，只在第一级节点，完成鼠标右键，显示内容；

分析需求：两个内容，先完成点击节点，出现鼠标右键；再完成只有第一级节点

方法实现：Tree点击节点，鼠标右键@node-contextmenu="floderOption"

判断是节点是第几级别：通过node.level 

难点掌握：OptionCardClose 和 floderOption，菜单显示和菜单隐藏