Preface
Recently, the product asked me a requirement ————I want to implement the user's right clicktableWhen a certain row of , the function of the operation bar of that row is displayed. I think this demand is quite interesting, so I will share it with you here.
Technology stack: elementUI
Implementation ideas
To implement the right-click menu we need to define a menu bar component when the user clickstableWhen we process the display position and render the menu bar totablesuperior. Realize this firstrightKeyMenuComponents:
//
<template>
<div class="right-key-menu">
<div class="rightKeyMenuItem" @click="$emit('edit')">edit</div>
<div class="rightKeyMenuItem" @click="$emit('del')">delete</div>
</div>
</template>
<script>
//...neglect methods: {
onload (row, column,event) {
//Adjust the position of the menu let menu = ('#right-key-menu')
let betweenHeight = -
if (betweenHeight < 150) {
= -80 + 'px'
} else {
= -30 + 'px'
}
= + 20 + 'px'
// Listen to the dom click event ('click', this.$emit('rightClick'))
}
}
</script>
<style>
.right-key-menu {
display: block;
line-height: 34px;
text-align: center;
}
.right-key-menu:not(:last-child) {
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.right-key-menu {
position: absolute;
background-color: #fff;
width: 100px;
font-size: 12px;
color: #444040;
border-radius: 4px;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-radius: 3px;
border: 1px solid rgba(0, 0, 0, 0.15);
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
white-space: nowrap;
z-index: 1000;
}
.rightKeyMenuItem:hover {
cursor: pointer;
background: #66b1ff;
border-color: #66b1ff;
color: #fff;
}
</style>userightKeyClickComponents. We need to listen to the user's right-click on the table line. This function already has a corresponding method in the elementUI table:
row-contextmenu This event will be triggered when a row is right-clicked (row, column, event)
Trigger this method and pass all the parameters over. RevisevisableThe value of the menu bar component appears.
In the menu bar component, we make appropriate modifications to the height of the menu by obtaining the browser Y-axis position when clicking. So when we click differenttableOK.menuThe position will also change accordingly with the position from the browser's Y axis when the mouse is clicked.
// business-table
<template>
<div>
<el-table
:data="tableData"
@row-contextmenu="rowContextmenu"
border>
//...neglect</el-table>
<rightKeyMenu v-if="visable"
@rightClick="rightClick"
ref="menu"
@edit="handleEdit"
@del="handleDel">
</rightKeyMenu>
</div>
</template>
import rightKeyMenu from '@component/right-key-menu/index'
export default {
components: {
rightKeyMenu
},
methods: {
rowContextmenu (row, column, event) {
//If it has been turned on before, close it first. = false
setTimeout(()=>{
= true
},300)
// Block the default behavior of right-click ()
this.$nextTick(() => {
this.$(row,column,event)
})
},
rightClick() {
= false
// Cancel the mouse listening event Menu bar ('click', )
},
handleEdit () {
// ..do something
},
handleDel () {
// ..do something
}
}
}Sometimes the operation items of a list are not limited to modification and deletion. Therefore, we can use the slot to customize what needs to be displayed.
<template>
<div class="right-key-menu">
<div class="rightKeyMenuItem" @click="$emit('edit')">edit</div>
<div class="rightKeyMenuItem" @click="$emit('del')">delete</div>
<div class="rightKeyMenuItem"><slot name="more"></slot></div>
</div>
</template>So far. The function of the right-click menu of element is completed. The most important thing to achieve this requirement is to calculate the position of the right-click menu. Since different page tables are located differently,rightKeyClickThe component also needs to pass several parameters for optimization and adaptation. I won't go into details here. You can try it yourself.
at last
This is the article about the function of the element table component to implement the right-click menu. For more related element table right-click menu content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!