右键点击树组件中的节点，弹出增删改的菜单，要求菜单总是在点击位置的附近

目标
右键点击树组件中的节点，弹出增删改的菜单，要求菜单总是在点击位置的附近先添加一个树
<template><div><el-tree<!-- 绑定数据 -->:data="tree"highlight-currentnode-key="id":props="{children: 'children',label: 'name'}"ref="tree"></el-tree></div>
</template>
添加数据
export default {data() {return {tree: [{id: 1,name: '北京',children: [{id: 5,name: '朝阳',children: [{id: 17,name: '双塔',children: []},{id: 18,name: '龙城',children: []}]},{id: 6,name: '丰台',children: [{id: 19,name: '新村',children: []},{id: 20,name: '大红门',children: []},{id: 21,name: '长辛店',children: [{id: 22,name: '东山坡',children: []},{id: 23,name: '北关',children: []},{id: 24,name: '光明里',children: []},{id: 25,name: '赵辛店',children: []},{id: 26,name: '西峰寺',children: []}]}]},{id: 7,name: '海淀',children: []},{id: 8,name: '房山',children: []},{id: 10,name: '顺义',children: []}]},{id: 2,name: '上海',children: [{id: 11,name: '黄埔',children: []},{id: 12,name: '徐汇',children: []}]},{id: 3,name: '广州',children: [{id: 13,name: '荔湾',children: []},{id: 14,name: '白云',children: []},{id: 15,name: '越秀',children: []},{id: 16,name: '南沙',children: []}]}]}}
}
具体效果添加右键菜单
组件的官网https://element.eleme.cn/#/zh-CN/component/tree事件	解析	参数
node-contextmenu	当某一节点被鼠标右键点击时会触发该事件	共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-click	节点被点击时的回调	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-expand	节点被展开时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
node-collapse	节点被关闭时触发的事件	共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身
添加菜单部分的页面
<div v-show="showTreeMenu" class="treeMenu"><div @click="addOrg"><i class="el-icon-plus" style="color: #1e9fff"></i>增加子分组</div><div @click="editOrg"><i class="el-icon-edit" style="color: #fcc465"></i>修改分组名称</div><div @click="deleteOrg"><i class="el-icon-delete" style="color: red"></i>删除分组及子分组</div>
</div><style lang="less" scoped>
.treeMenu {font-size: 14px;position: fixed;padding: 2px 0px 5px;z-index: 99999; // 为了显示再最上层top: 50%;left: 50%;background-color: rgba(255, 255, 255, 0.9);overflow: hidden; // 溢出的部分隐藏border-radius: 5px; // 圆角border: 1px solid #e6ebf5;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);div {padding: 2px 10px;box-sizing: border-box;text-align: left;}div:hover {background-color: #eee;cursor: pointer;}
}
</style>
注：菜单默认不显示，最好不要嵌套太深，并且记得设置 z-index 避免被覆盖，其他样式根据自己需求都可以调整添加事件部分
<script>
export default {methods: {addOrg() {console.log('添加子分组')},editOrg() {console.log('修改分组名称')},deleteOrg() {this.$confirm(`删除 [${this.contextNode.name}] 分组、下级子分组 <br>是否继续?`, '提示', {dangerouslyUseHTMLString: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(console.log('删除分组及下级子分组'))}}
</script>
给树组件添加事件和对应的数据
<template><div><el-tree:data="tree"highlight-currentnode-key="id":props="{children: 'children',label: 'name'}"<!-- 添加打开节点的事件 -->@node-expand="openTreeNode"<!-- 添加关闭节点的事件 -->@node-collapse="closeTreeNode"ref="tree"<!-- 添加右键的事件 -->@node-contextmenu="openTreeMenu"></el-tree></div>
</template><script>
export default {methods: {openTreeMenu(event, data, node, target) {console.log(event, data, node, target)this.showTreeMenu = true // 显示菜单this.contextNode = data // 存储数据document.querySelector('.treeMenu').setAttribute('style', `top:${event.clientY + 10}px;left:${event.clientX + 10}px;`)document.addEventListener('click', this.closeTreeMenu)document.addEventListener('contextmenu', this.closeTreeMenu)},closeTreeMenu() {this.showTreeMenu = false // 关闭菜单document.removeEventListener('click', this.closeTreeMenu)document.removeEventListener('contextmenu', this.closeTreeMenu)},openTreeNode(data) {console.log('节点被展开')this.showTreeMenu = falseconsole.log(data)},closeTreeNode(data) {console.log('节点被关闭')this.showTreeMenu = falseconsole.log(data)}},data() {return {showTreeMenu: false,contextNode: {},tree: [{id: 1,name: '北京',children: [{id: 5,name: '朝阳',children: [{id: 17,name: '双塔',children: []},{id: 18,name: '龙城',children: []}]},{id: 6,name: '丰台',children: [{id: 19,name: '新村',children: []},{id: 20,name: '大红门',children: []},{id: 21,name: '长辛店',children: [{id: 22,name: '东山坡',children: []},{id: 23,name: '北关',children: []},{id: 24,name: '光明里',children: []},{id: 25,name: '赵辛店',children: []},{id: 26,name: '西峰寺',children: []}]}]},{id: 7,name: '海淀',children: []},{id: 8,name: '房山',children: []},{id: 10,name: '顺义',children: []}]},{id: 2,name: '上海',children: [{id: 11,name: '黄埔',children: []},{id: 12,name: '徐汇',children: []}]},{id: 3,name: '广州',children: [{id: 13,name: '荔湾',children: []},{id: 14,name: '白云',children: []},{id: 15,name: '越秀',children: []},{id: 16,name: '南沙',children: []}]}]}}
}
</script>
效果完整代码
<template><div><el-tree:data="tree"highlight-currentnode-key="id":props="{children: 'children',label: 'name'}"@node-expand="openTreeNode"@node-collapse="closeTreeNode"ref="tree"@node-contextmenu="openTreeMenu"></el-tree><div v-show="showTreeMenu" class="treeMenu"><div @click="addOrg"><i class="el-icon-plus" style="color: #1e9fff"></i>增加子分组</div><div @click="editOrg"><i class="el-icon-edit" style="color: #fcc465"></i>修改分组名称</div><div @click="deleteOrg"><i class="el-icon-delete" style="color: red"></i>删除分组及子分组</div></div></div>
</template><script>
export default {methods: {addOrg() {console.log('添加子分组', this.contextNode)},editOrg() {console.log('修改分组名称', this.contextNode)},deleteOrg() {this.$confirm(`删除 [${this.contextNode.name}] 分组、下级子分组 <br>是否继续?`, '提示', {dangerouslyUseHTMLString: true,confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',center: true}).then(console.log('删除分组及下级子分组', this.contextNode))},openTreeMenu(event, data, node, target) {console.log(event, data, node, target)this.showTreeMenu = true // 显示菜单this.contextNode = data // 存储数据document.querySelector('.treeMenu').setAttribute('style', `top:${event.clientY + 10}px;left:${event.clientX + 10}px;`)document.addEventListener('click', this.closeTreeMenu)document.addEventListener('contextmenu', this.closeTreeMenu)},closeTreeMenu() {this.showTreeMenu = false // 关闭菜单document.removeEventListener('click', this.closeTreeMenu)document.removeEventListener('contextmenu', this.closeTreeMenu)},openTreeNode(data) {console.log('节点被展开')this.showTreeMenu = falseconsole.log(data)},closeTreeNode(data) {console.log('节点被关闭')this.showTreeMenu = falseconsole.log(data)}},data() {return {showTreeMenu: false,contextNode: {},tree: [{id: 1,name: '北京',children: [{id: 5,name: '朝阳',children: [{id: 17,name: '双塔',children: []},{id: 18,name: '龙城',children: []}]},{id: 6,name: '丰台',children: [{id: 19,name: '新村',children: []},{id: 20,name: '大红门',children: []},{id: 21,name: '长辛店',children: [{id: 22,name: '东山坡',children: []},{id: 23,name: '北关',children: []},{id: 24,name: '光明里',children: []},{id: 25,name: '赵辛店',children: []},{id: 26,name: '西峰寺',children: []}]}]},{id: 7,name: '海淀',children: []},{id: 8,name: '房山',children: []},{id: 10,name: '顺义',children: []}]},{id: 2,name: '上海',children: [{id: 11,name: '黄埔',children: []},{id: 12,name: '徐汇',children: []}]},{id: 3,name: '广州',children: [{id: 13,name: '荔湾',children: []},{id: 14,name: '白云',children: []},{id: 15,name: '越秀',children: []},{id: 16,name: '南沙',children: []}]}]}}
}
</script><style lang="less" scoped>
.treeMenu {font-size: 14px;position: fixed;padding: 2px 0px 5px;z-index: 99999;top: 50%;left: 50%;background-color: rgba(255, 255, 255, 0.9);overflow: hidden;border-radius: 5px;border: 1px solid #e6ebf5;box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);div {padding: 2px 10px;box-sizing: border-box;text-align: left;}div:hover {background-color: #eee;cursor: pointer;}
}
</style>