row-contextmenu 当某一行被鼠标右键点击时会触发该事件 row, column, event
重要代码
//右键点击事件
rightClick(row, column, event) {
console.log(arguments);
var menu = document.querySelector("#menu");
event.preventDefault();
//获取我们自定义的右键菜单
// 根据事件对象中鼠标点击的位置,进行定位
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
// 改变自定义菜单的隐藏与显示
menu.style.display = "block";
console.log(row, column);
// 获取当前右键点击table下标
this.tableData.forEach((item, index) => {
if (item.bugid === row.bugid) {
//这里判断相等的条件可以自己改为该行数据的唯一键
this.currentRowIndex = index;
return false;
}
});
this.setCurrent(row);
},
全部代码
<template>
<div>
<el-table
ref="singleTable"
:data="tableData"
highlight-current-row
@row-click="clickTableRow"
@row-contextmenu="rightClick"
style="width: 100%"
>
<el-table-column type="index" width="50"> </el-table-column>
<el-table-column property="date" label="日期" width="120">
</el-table-column>
<el-table-column property="name" label="姓名" width="120">
</el-table-column>
<el-table-column property="address" label="地址"> </el-table-column>
</el-table>
<div id="menu">
<ul>
<li @click="infoClick"><span>菜单1</span></li>
<li>
<span>菜单2</span> <span class="iconfont"></span>
<ul>
<li><span>菜单1</span></li>
<li><span>菜单2</span></li>
<li><span>菜单3</span></li>
</ul>
</li>
<li><span>菜单3</span></li>
</ul>
</div>
</div>
</template>
<script>
export default {
data() {
return {
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
currentRowIndex: 0,
};
},
methods: {
// 自定义菜单的点击事件
infoClick(index) {
this.$alert(
"当前table的下标为" + this.currentRowIndex,
{
confirmButtonText: "确定",
callback: (action) => {
var menu = document.querySelector("#menu");
menu.style.display = "none";
},
}
);
},
// table的左键点击当前行事件
clickTableRow(row, column, event) {
var menu = document.querySelector("#menu");
menu.style.display = "none";
// this.tableData.forEach((item, index) => {
// if (row.name === item.name) {
// this.radio = index;
// }
// })
},
// 右键点击事件
rightClick(row, column, event) {
console.log(arguments);
var menu = document.querySelector("#menu");
event.preventDefault();
//获取我们自定义的右键菜单
// 根据事件对象中鼠标点击的位置,进行定位
menu.style.left = event.clientX + "px";
menu.style.top = event.clientY + "px";
// 改变自定义菜单的隐藏与显示
menu.style.display = "block";
console.log(row, column);
// 获取当前右键点击table下标
this.tableData.forEach((item, index) => {
if (item.bugid === row.bugid) {
//这里判断相等的条件可以自己改为该行数据的唯一键
this.currentRowIndex = index;
return false;
}
});
this.setCurrent(row);
},
setCurrent(row) {
console.log("高亮" + row);
this.$refs.singleTable.setCurrentRow(row);
},
},
};
</script>
<style scoped>
#menu {
position: absolute;
display: none;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
background: #ffffff;
cursor: pointer;
color: #606266;
width: 200px;
border: 1px solid #e4e7ed;
/* margin: 50px auto; */
font-size: 13px;
}
#menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#menu ul li {
padding: 0px 10px;
height: 30px;
line-height: 30px;
position: relative;
box-sizing: border-box;
text-indent: 8px;
}
#menu ul li .iconfont {
float: right;
}
#menu ul li ul {
display: none;
position: absolute;
left: 200px;
top: 0px;
width: 200px;
border: 1px solid #e4e7ed;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
}
#menu ul li ul li {
background-color: #fff;
}
#menu ul li:hover {
background-color: #ecf5ff;
}
#menu ul li:hover ul {
display: block;
}
</style>