关于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()方法。

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

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值