el-tree 添加鼠标右键菜单_el-tree 右键菜单

实现效果：

关键方法:@node-contextmenu="rightClick"  

页面渲染代码如下：

<!-- 右键菜单 -->
				<div class="right_menu" id="menu" v-show="showRightMenu">
					<ul>
						<li v-for="(item,index) in rightMenuList" :key="index">
							<span><img :src="item.imgurl" alt="" style="width:16px;height:16px;"></span>
							&nbsp;
							<span>{{item.name}}</span>
						</li>
					</ul>
				</div>

数据定义：

//右键菜单
			showRightMenu:false,
			rightMenuList:[
				{id:1,name:"轨迹回放",imgurl:require("@/assets/images/shouye/guiji.png")},
				{id:2,name:"车辆追踪",imgurl:require("@/assets/images/shouye/zhuizong.png")},
				{id:3,name:"实时视频",imgurl:require("@/assets/images/shouye/video.png")},
				{id:4,name:"历史视频",imgurl:require("@/assets/images/shouye/his_video.png")},
				{id:5,name:"常用命令",imgurl:require("@/assets/images/shouye/q.png")},
				{id:6,name:"部标命令",imgurl:require("@/assets/images/shouye/mingling.png")},
				{id:7,name:"车辆资料",imgurl:require("@/assets/images/shouye/ziliao.png")},
				{id:8,name:"修改备注",imgurl:require("@/assets/images/shouye/update.png")},
				{id:9,name:"查看街景",imgurl:require("@/assets/images/shouye/jiejing.png")},
				{id:10,name:"原始数据",imgurl:require("@/assets/images/shouye/data.png")},
			],

 js逻辑：

rightClick(event,data,node,obj){
			if(data.flag==='car'){
				this.showRightMenu = true
				let menu = document.getElementById('menu')
				menu.style.left = event.clientX -150 + 'px'
				menu.style.top = event.clientY -200 + 'px'
				document.addEventListener('click', this.closeRightMenu)
			}
		},
		closeRightMenu() {
			this.showRightMenu = false
			document.removeEventListener('click', this.closeRightMenu)
		},

css样式：

//右键菜单
  .right_menu{
    position: absolute;
    width: 120px;
    height: 300px;
    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%;
    height: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: center;
    font-size: 14px;
    padding-top:4%;
    width:100%;
    height:9.7%;
    background: #fff;
    float: left;
}

参考文章https://blog.csdn.net/HH18700418030/article/details/103608027