关于el-table中添加右键菜单及悬浮提示

本文章主用作记录本人开发所遇问题，方便查阅，也希望能对他人有轻微帮助。

         由于做的项目是单页面web项目，所以用到的模板都差不多，特别是显示数据时el-table用的最多，所以就把这个组件进行了再封装，这样有表格的地方就可以继承该模板实现，大大的减轻了代码量，简洁了页面。由于是再封装的组件，原生的属性和方法都需要先在组件定义好，在通过emit传值到其子页面。

        本文提到的主要用到右击事件（row-contextmenu），左键单击事件（row-click）以及鼠标移入移出事件   （cell-mouse-enter/cell-mouse-leave） 

el-table地址：Table 表格 | Element Plus

在页面新建以下代码：

div(id="menu" class="menu")
    ul(class="menuUl")
        li(v-for="(item, index) in menus" :key="index")
            |{{ item }}
div(class="dpop" id="dpop")
    |鼠标右键弹出操作菜单

 注释：id用来绑定元素，class用来设置样式。

在css样式当中设置：（其他样式可根据自身情况设置）

display: none; //隐藏元素
position: absolute; 
top: 0;
left: 0;

然后接下来就是在方法中定义：

mouseEnter() {
    (document.querySelector('表格的类名') as any).onmouseover = function (e: any) {
        const dpop = document.querySelector("#dpop") as any
        dpop.style.left = e.clientX - 根据自身需要设置的偏移量 + "px"
        dpop.style.top = e.clientY - xxx + "px"
        dpop.style.display = "block" //设置元素的样式为显示
     }
}

mouseLeave() {
    const dpop = document.querySelector("#dpop") as any
    dpop.style.display = "none" //设置元素隐藏
}

tableClickHandle() { //左键事件是为了当点击菜单其他地方时关闭菜单
    const menu = document.querySelector("#menu") as any
    menu.style.display = "none"
}

rightClickHandle(row: any) {
    (document.querySelector('表格的类名') as any).oncontextmenu = function (e: any) {
        //阻止浏览器显示表格行的原右键事件
        e.preventDefault()
        const menu = document.querySelector("#menu") as any
        // 根据事件对象中鼠标点击的位置，进行定位
        menu.style.left = e.clientX - xxx + "px"
        menu.style.top = e.clientY - xxx + "px"
        // 改变自定义菜单的隐藏与显示
        menu.style.display = "block"
     }
}

注释： "表格的类名"：此处设置的是根据自身需要用到的表格范围来定义。另外因为是web应用，在右键时我们还需要把浏览器原本的右击事件阻止。所以用到preventDefault()方法。

以上就可以实现一个简单的右键菜单和悬浮提示。有不足请指出。