Vue3 Element-Plus el-tree 右键菜单组件
参考代码：实现Vue3+Element-Plus(tree、table)右键菜单组件这篇文章的代码确实能用，但是存在错误，修正后的代码：
<template>
<div style="text-align: right">
<el-icon size="12" color="#999" style="cursor: pointer"><Plus /></el-icon>
</div>
<el-tree
:data="catalogTreeData"
:props="{ label: 'label', children: 'children' }"
:expand-on-click-node="false"
ref="deptTreeRef"
node-key="id"
highlight-current
default-expand-all
@node-contextmenu="rightClick"
/>
<div class="rightMenu" v-show="showMenu">
<ul>
<li v-for="(menu, index) in menus" @click="menu.click" :key="index">
<el-icon>
<component :is="menu.icon" />
</el-icon>
<span style="margin-left: 10px">
{{ menu.name }}
</span>
</li>
</ul>
</div>
</template>
<script lang="ts" setup>
import { FolderAdd, Message, Plus, UserFilled } from '@element-plus/icons-vue'
import { markRaw } from 'vue'
const showMenu = ref(false)
const menus = ref<
{
icon: any
name: string
click: () => void
}[]
>([])
const catalogTreeData = [
{
label: 'Level one 1',
children: [
{
label: 'Level two 1-1',
children: [
{
label: 'Level three 1-1-1'
}
]
}
]
},
{
label: 'Level one 2',
children: [
{
label: 'Level two 2-1',
children: [
{
label: 'Level three 2-1-1'
}
]
},
{
label: 'Level two 2-2',
children: [
{
label: 'Level three 2-2-1'
}
]
}
]
},
{
label: 'Level one 3',
children: [
{
label: 'Level two 3-1',
children: [
{
label: 'Level three 3-1-1'
}
]
},
{
label: 'Level two 3-2',
children: [
{
label: 'Level three 3-2-1'
}
]
}
]
}
]
// 右击方法
const rightClick = (event: MouseEvent, data: any, node: any, json: any) => {
event.preventDefault()
showMenu.value = false
// 显示位置
let menuPosition = document.querySelector('.rightMenu') as HTMLElement
if (menuPosition) {
menuPosition.style.left = event.clientX + 'px'
menuPosition.style.top = event.clientY + 'px'
}
menus.value = [
{
icon: markRaw(FolderAdd), // 默认图标
name: '新增子目录', // 默认名称
click: () => {
console.log('新增子目录')
}
},
{
icon: markRaw(Message),
name: '编辑',
click: () => {
console.log('编辑')
}
},
{
icon: markRaw(UserFilled),
name: '删除',
click: () => {
console.log('删除')
}
}
]
showMenu.value = true
document.addEventListener('click', close)
}
function close() {
showMenu.value = false
}
</script>
<style scoped>
.rightMenu {
position: fixed;
z-index: 99999999;
cursor: pointer;
border: 1px solid #eee;
box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);
border-radius: 6px;
color: #606266;
font-size: 14px;
background: #fff;
}
.rightMenu ul {
list-style: none;
margin: 0;
padding: 0;
border-radius: 6px;
}
.rightMenu ul li {
padding: 6px 10px;
border-bottom: 1px solid #c8c9cc;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
}
.rightMenu ul li:last-child {
border: none;
}
.rightMenu ul li:hover {
transition: all 0.5s;
background: #ebeef5;
}
.rightMenu ul li:hover {
transition: all 0.5s;
background: #ebeef5;
}
.rightMenu ul li:first-child {
border-radius: 6px 6px 0 0;
}
.rightMenu ul li:last-child {
border-radius: 0 0 6px 6px;
}
</style>
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]