Vue3 Element-Plus el-tree 右键菜单组件

参考代码：实现Vue3+Element-Plus(tree、table)右键菜单组件
这篇文章的代码确实能用，但是存在错误，修正后的代码：

1. <template>
2.     <div style="text-align: right">
3.         <el-icon size="12" color="#999" style="cursor: pointer"><Plus /></el-icon>
4.     </div>
5.     <el-tree
6.         :data="catalogTreeData"
7.         :props="{ label: 'label', children: 'children' }"
8.         :expand-on-click-node="false"
9.         ref="deptTreeRef"
10.         node-key="id"
11.         highlight-current
12.         default-expand-all
13.         @node-contextmenu="rightClick"
14.     />
15.     <div class="rightMenu" v-show="showMenu">
16.         <ul>
17.             <li v-for="(menu, index) in menus" @click="menu.click" :key="index">
18.                 <el-icon>
19.                     <component :is="menu.icon" />
20.                 </el-icon>
21.                 <span style="margin-left: 10px">
22.                     {{ menu.name }}
23.                 </span>
24.             </li>
25.         </ul>
26.     </div>
27. </template>
28. <script lang="ts" setup>
29. import { FolderAdd, Message, Plus, UserFilled } from '@element-plus/icons-vue'
30. import { markRaw } from 'vue'
31. const showMenu = ref(false)
33. const menus = ref<
34.     {
35.         icon: any
36.         name: string
37.         click: () => void
38.     }[]
39. >([])
41. const catalogTreeData = [
42.     {
43.         label: 'Level one 1',
44.         children: [
45.             {
46.                 label: 'Level two 1-1',
47.                 children: [
48.                     {
49.                         label: 'Level three 1-1-1'
50.                     }
51.                 ]
52.             }
53.         ]
54.     },
55.     {
56.         label: 'Level one 2',
57.         children: [
58.             {
59.                 label: 'Level two 2-1',
60.                 children: [
61.                     {
62.                         label: 'Level three 2-1-1'
63.                     }
64.                 ]
65.             },
66.             {
67.                 label: 'Level two 2-2',
68.                 children: [
69.                     {
70.                         label: 'Level three 2-2-1'
71.                     }
72.                 ]
73.             }
74.         ]
75.     },
76.     {
77.         label: 'Level one 3',
78.         children: [
79.             {
80.                 label: 'Level two 3-1',
81.                 children: [
82.                     {
83.                         label: 'Level three 3-1-1'
84.                     }
85.                 ]
86.             },
87.             {
88.                 label: 'Level two 3-2',
89.                 children: [
90.                     {
91.                         label: 'Level three 3-2-1'
92.                     }
93.                 ]
94.             }
95.         ]
96.     }
97. ]
99. // 右击方法
100. const rightClick = (event: MouseEvent, data: any, node: any, json: any) => {
101.     event.preventDefault()
102.     showMenu.value = false
104.     // 显示位置
105.     let menuPosition = document.querySelector('.rightMenu') as HTMLElement
106.     if (menuPosition) {
107.         menuPosition.style.left = event.clientX + 'px'
108.         menuPosition.style.top = event.clientY + 'px'
109.     }
111.     menus.value = [
112.         {
113.             icon: markRaw(FolderAdd), // 默认图标
114.             name: '新增子目录', // 默认名称
115.             click: () => {
116.                 console.log('新增子目录')
117.             }
118.         },
119.         {
120.             icon: markRaw(Message),
121.             name: '编辑',
122.             click: () => {
123.                 console.log('编辑')
124.             }
125.         },
126.         {
127.             icon: markRaw(UserFilled),
128.             name: '删除',
129.             click: () => {
130.                 console.log('删除')
131.             }
132.         }
133.     ]
135.     showMenu.value = true
136.     document.addEventListener('click', close)
137. }
139. function close() {
140.     showMenu.value = false
141. }
142. </script>
143. <style scoped>
144. .rightMenu {
145.     position: fixed;
146.     z-index: 99999999;
147.     cursor: pointer;
148.     border: 1px solid #eee;
149.     box-shadow: 0 0.5em 1em 2px rgba(0, 0, 0, 0.1);
150.     border-radius: 6px;
151.     color: #606266;
152.     font-size: 14px;
153.     background: #fff;
154. }
156. .rightMenu ul {
157.     list-style: none;
158.     margin: 0;
159.     padding: 0;
160.     border-radius: 6px;
161. }
163. .rightMenu ul li {
164.     padding: 6px 10px;
165.     border-bottom: 1px solid #c8c9cc;
166.     box-sizing: border-box;
167.     display: flex;
168.     align-items: center;
169.     justify-content: flex-start;
170. }
172. .rightMenu ul li:last-child {
173.     border: none;
174. }
176. .rightMenu ul li:hover {
177.     transition: all 0.5s;
178.     background: #ebeef5;
179. }
180. .rightMenu ul li:hover {
181.     transition: all 0.5s;
182.     background: #ebeef5;
183. }
185. .rightMenu ul li:first-child {
186.     border-radius: 6px 6px 0 0;
187. }
188. .rightMenu ul li:last-child {
189.     border-radius: 0 0 6px 6px;
190. }
191. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。