<template>
<div class = "app-main">
<div class="app-container">
<el-table
v-loading="loading"
:data="list"
@row-contextmenu="rightClick"
@row-click="clickTableRow"
>
<el-table-column label="备注" align="center" prop="remark" />
</el-table>
<pagination
v-show="total > 0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
/>
<!-- 右键菜单 -->
<div id="menu" class="menuDiv">
<ul class="menuUl">
<li
v-for="(item, index) in menus"
:key="index"
@click.stop="infoClick(index)"
>
{
{ item }}
</li>
</ul>
</div>
</div>
</div>
</template>
<script>
export default {
name: "test",
data() {
return {
// 遮罩层
loading: false,
list: [
{
remark: "备注1",
},
{
remark: "备注2",
},
],
// 总条数
total: 0,
queryParams: {
},
//右键菜单
menus: ["右键菜单"],
};
},
created() {
},
methods: {
// table的右键点击当前行事件
rightClick(row, column, event) {
var menu = document.querySelector("#menu");
//阻止元素发生默认的行为
event.preventDefault();
var tempClickObj = this.getPoint(event.target);
//获取我们自定义的右键菜单
// console.log(event.target.parentElement.offsetTop);
// 根据事件对象中鼠标点击的位置，进行定位
menu.style.left = tempClickObj.l + 40 + "px";
menu.style.top = tempClickObj.t - 100 + "px";
// 改变自定义菜单的隐藏与显示
menu.style.display = "block";
menu.style.zIndex = 1000;
// console.log(row, column);
},
// table的左键点击当前行事件
clickTableRow(row, column, event) {
var menu = document.querySelector("#menu");
menu.style.display = "none";
},
// 自定义菜单的点击事件
infoClick(index) {
this.$alert(
"确定要" +
this.menus[index] +
"吗",
{
confirmButtonText: "确定",
callback: (action) => {
var menu = document.querySelector("#menu");
if (action === "confirm") {
alert("点击了确定")
} else {
done();
}
menu.style.display = "none";
},
}
);
},
//获取鼠标右键点击地点
getPoint(obj) {
//获取某元素以浏览器左上角为原点的坐标
var t = obj.offsetTop; //获取该元素对应父容器的上边距
var l = obj.offsetLeft; //对应父容器的上边距
//判断是否有父容器，如果存在则累加其边距
while ((obj = obj.offsetParent)) {
//等效 obj = obj.offsetParent;while (obj != undefined)
t += obj.offsetTop; //叠加父容器的上边距
l += obj.offsetLeft; //叠加父容器的左边距
if (obj.className == "app-main") {
// alert("!!")
//到标签页住容器就跳出
break;
}
}
return {
t: t, l: l };
},
},
};
</script>
.menuDiv {
display: none;
position: absolute;
}
.menuUl {
height: auto;
width: auto;
font-size: 14px;
text-align: left;
border-radius: 3px;
border: 1px solid #c1c1c1;
background-color: #ffffff;
list-style: none;
padding: 0;
}
.menuUl li:hover {
background-color: #11a983;
color: white;
}
.menuUl li {
text-align: center;
width: 100px;
height: 30px;
line-height: 30px;
}
Rendering:
