Element ui el-tree 右键菜单

<!--树组件增减右键方法-->
<el-tree
    @node-contextmenu="openMenu"
>

</el-tree>

<!--右键显示的菜单组件-->
<div v-show="treeRightMenuShow" class="tree_rightmenu" :style="{...rightTreeMenuStyle}">
    <el-menu class="el-menu-vertical-demo" @select="selectMenuNode" >
        <el-menu-item index="1" style="font-size: 20px;">
            <span slot="title">取消</span>
        </el-menu-item>
    </el-menu>
</div>

data() {
    return {
        treeRightMenuShow: false,
    }
}

openMenu(event,data,node) {
	this.treeRightMenuShow = true
	//防止右键菜单底部被覆盖 --可以自己根据右键菜单的高度调整
	let jianPx = 0
	if(document.documentElement.clientHeight - event.pageY < 200){
		jianPx = 200
	}
	//右键菜单的位置
	this.rightTreeMenuStyle = { top: event.pageY - jianPx + 'px', left: event.pageX + 'px' }
	//点击页面其他地方关闭右键菜单
	document.addEventListener('click',(ev)=>{
		this.hideRightMenu()
	})
},
hideRightMenu(){
	this.treeRightMenuShow = false
	//关闭点击页面其他地方关闭右键菜单的监听
	document.removeEventListener('click', this.hideRightMenu)
},

::v-deep .tree_rightmenu {
  position: fixed;
  width: 10%;
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
  z-index: 1000;
}

参考文章：Element UI中el-tree 添加右键菜单的方法，附带问题和解决方案_element-uiplus树形控件el-tree右键自定义菜单实现节点增删改-CSDN博客