Shulou(Shulou.com)06/01 Report--

This article mainly introduces Vue el-table how to achieve the right-click menu function related knowledge, the content is detailed and easy to understand, the operation is simple and fast, has a certain reference value, I believe that everyone after reading this Vue el-table how to achieve right-click menu function article will have a harvest, let's take a look at it.

The results are as follows:

1.el-table and right-click menu view code

@ row-contextmenu= "rightClick" is a right-click event

@ row-click= "clickTableRow" is a per-row click event

{{item.name}}

2.js method code

Data () {return {/ / right-click menu menus: [{name: 'edit webshell', operType: 1}, {name:' delete webshell', operType: 2}, {name: 'virtual terminal', operType: 3}, {name: 'file management', operType: 4}]} / / methods section: / / right-click the current line event rightClick (row, column) of table Event) {let menu = document.querySelector ("# menu") / / prevent the default behavior of the element event.preventDefault (); / / locate menu.style.left = event.clientX + 10 + "px" according to the location of the mouse click in the event object; menu.style.top = event.clientY-30 + "px"; / / change the hiding and display of the custom menu menu.style.display = "block"; menu.style.zIndex = 1000 }, / / left-click the current line event clickTableRow (row, column, event) {let menu = document.querySelector ("# menu"); menu.style.display = "none";}, / / customize the menu click event infoClick (index) {if (index = 0) {/ / do something} let menu = document.querySelector ("# menu"); menu.style.display = "none";}

3.css style code

.menuDiv {display: none; position: absolute; .menuUl {height: auto; width: auto; font-size: 14px; text-align: left; border-radius: 3px; border: none; background-color: # c4c4c4; color: # fff; list-style: none; padding: 0 10px; li {width: 140px; height: 35px; line-height: 35px; cursor: pointer Border-bottom: 1px solid rgba (255,255,255,0.47); &: hover {/ / background-color: rgb (26,117,158); color: rgb (54,138,175);} this is the end of the article on "how Vue el-table implements the right-click menu function". Thank you for reading! I believe that everyone has a certain understanding of the knowledge of "how to achieve right-click menu function in Vue el-table". If you want to learn more knowledge, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.