Java-Vue行信息右键菜单

Java-Vue行信息右键菜单

1.触发事件

@rightClick="rightClick"
@handleRow="clickTableRow"

2.右键点击当前行事件

rightClick(row) {
    this.rightRow = row.val;
    let menu = document.querySelector("#menu");
    //阻止元素发生默认的行为
    row.event.preventDefault();
    // 根据事件对象中鼠标点击的位置，进行定位
    menu.style.left = row.event.clientX - 190 + "px";
    menu.style.top = row.event.clientY - 100 + "px";
    // 改变自定义菜单的隐藏与显示
    menu.style.display = "block";
    menu.style.zIndex = 9999;
}, 
//左键点击当前行
clickTableRow(row, column, event) {
    let menu = document.querySelector("#menu");
    menu.style.display = "none";
},

3.右键菜单

<!-- 右键菜单 -->
<div id="menu" class="menuDiv">
    <ul class="menuUl">
    <li
        v-for="(item, index) in menus"
        :key="'cd' + index"
        @click.stop="infoClick(item.operType)"
    >
        {{ item.name }}
    </li>
    </ul>
</div>