element-plus表格添加简单右键

实现如下

2. <template>
3.   <main class="mainClass"  >
5.     <el-table :data="tableData" style="width: 100%"
6.     @row-contextmenu="rowContextmenu"
7.     @cell-contextmenu="cellContextmenu"
8.     @contextmenu.prevent
9.     >
10.     <el-table-column type="index" :index="indexMethod" />
11.     <el-table-column prop="date" label="Date" width="180" />
12.     <el-table-column prop="name" label="Name" width="180" />
13.     <el-table-column prop="address" label="Address" />
14.   </el-table>
15.   
16.   </main>
18.   <el-menu
19.     :default-active="1"
20.     class="el-menu-demo"
21.     mode="vertical"
22.     :collapse="isCollapse"
23.     v-show="menuShow"
24.     @close="hideMenu"
25.     @open="openItem"
26.     ref="menuRef"
27.     :style="{ left: left + 'px', top: top + 'px' }"
28.   >
29.     <el-menu-item index="1">Processing Center</el-menu-item>
30.     <el-sub-menu index="2">
31.       <template #title>Workspace</template>
32.       <el-menu-item index="2-1">item one</el-menu-item>
33.       <el-menu-item index="2-2">item two</el-menu-item>
34.       <el-menu-item index="2-3">item three</el-menu-item>
35.     </el-sub-menu>
36.   </el-menu>
37.   
38. </template>
40. <script setup>
42. import { watch ,ref } from 'vue';
44. const activeIndex = ref('0')
45. const menuShow = ref(false)
46. const isCollapse = ref(true)
47. const menuRef = ref(null)
48. const left = ref(0)
49. const top = ref(0)
52. const tableData = [
53.   {
54.     date: '2016-05-03',
55.     name: 'Tom',
56.     state: 'California',
57.     city: 'Los Angeles',
58.     address: 'No. 189, Grove St, Los Angeles',
59.     zip: 'CA 90036',
60.     tag: 'Home',
61.   },
62.   {
63.     date: '2016-05-02',
64.     name: 'Tom',
65.     state: 'California',
66.     city: 'Los Angeles',
67.     address: 'No. 189, Grove St, Los Angeles',
68.     zip: 'CA 90036',
69.     tag: 'Office',
70.   },
71.   {
72.     date: '2016-05-04',
73.     name: 'Tom',
74.     state: 'California',
75.     city: 'Los Angeles',
76.     address: 'No. 189, Grove St, Los Angeles',
77.     zip: 'CA 90036',
78.     tag: 'Home',
79.   },
80.   {
81.     date: '2016-05-01',
82.     name: 'Tom',
83.     state: 'California',
84.     city: 'Los Angeles',
85.     address: 'No. 189, Grove St, Los Angeles',
86.     zip: 'CA 90036',
87.     tag: 'Office',
88.   },
89. ]
91. function cellContextmenu(row,column,divstr,event)
92. {
93.   //第4个参数才是event
94.   console.log("cell contextenu",arguments)
95.   showMenu(event)
96. }
98. function rowContextmenu(row,column,event)
99. {
100.   //第3个参数才是event
101.   console.log("row contextenu",arguments)
102. }
105. function hideMenu()
106. {
107.   menuShow.value = false;
108. }
109. function showMenu(e)
110. {
111.   menuShow.value = true;
112.   left.value = e.clientX+1;
113.   top.value = e.clientY+1;
114.   //阻止默认行为  @contextmenu.prevent 同效果
115.   e.preventDefault();
116. }
119. </script>
122. <style scoped>
123. .mainClass
124. {
125.   width: 500px;
126.   height: 500px;
127.   background-color: #f0f0f0;
128. }
129. .el-menu-demo
130. {
131.   position: absolute;
132.   left: 0;
133.   top: 0;
134.   z-index: 100;
135.   width: 140px;
136.   /* background-color: rgb(167, 184, 184); */
137. }
138. </style>

复制代码

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