element-ui tree右键菜单

style：

.tree_menu{
  position: fixed;
  display: block;
  z-index: 20000;
  background-color: #fff;
  padding:5px 0;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  box-shadow:0 2px 12px 0 rgba(0,0,0,.1);

  ul{
    margin:0;
    padding:0;
  }
  ul li{
    list-style: none;
    margin:0;
    padding:0 15px;
    font-size: 14px;
    line-height: 30px;
    cursor: pointer;
  }
  ul li:hover{
    background-color: #ebeef5
  }
}

html:

<el-tree
      :data="data"
      show-checkbox
      node-key="id"
      :props="defaultProps"
      @node-contextmenu="rightClick"
      @check="treeCheck"
    >
    </el-tree>
<div id="perTreeMenu" v-if="tmDisplay" class="tree_menu" :style="{...rightMenu}">
      <ul>
        <li><i class="el-icon-tickets"></i> 详情</li>
        <li><i class="el-icon-edit"></i> 编辑</li>
      </ul>
    </div>

js:

rightClick(e,data,node,comp){
      console.log('e:',e,'data',data)
      this.rightMenu = {top:e.pageY+'px',left:e.pageX+'px'}
      this.tmDisplay = true
      const self = this
      document.onclick=function(ev){
        if(ev.target!==document.getElementById('perTreeMenu')){
          self.tmDisplay = false
        }
      }
    },