elementUI el-table实现鼠标悬浮某一行,在鼠标右侧展示提示信息

背景

el-table组件中,可以通过勾选某条数据来创建单据,但是有些数据没有权限使用,就需要禁用掉勾选的功能,然后当鼠标悬浮在这一行的时候,展示类似于toolTip的提示框。

除了当鼠标悬浮在某一行,展示类似于toolTip的提示框这一条el-table是没有提供配置项的,其他的都能够通过配置完成,那我们接下来看看如何实现鼠标悬浮某一行展示提示框的需求。

实现效果

具体实现

首先el-table有提供两个事件cell-mouse-enter和cell-mouse-leave,这两个事件分别在当单元格 hover 进入时以及当单元格 hover 退出时会触发,回调函数中能接收四个参数:row, column, cell, event。

我们可以通过cell-mouse-enter事件,在鼠标进入到当前行的时候,根据第一个参数row判断当前行是否需要进行提示。如果需要提示的话,我们可以获取第四个参数event,拿到当前触发hover事件的dom元素。然后动态生成一个提示框div定位到鼠标右侧,插入到body中。

然后通过监听cell-mouse-leave事件将这个元素从body中移除。

代码如下

html 复制代码
// table组件
<el-table 
 :data="tableData" 
 style="width: 100%"
 @cell-mouse-enter="enterSelectionRows"
 @cell-mouse-leave="leaveSelectionRows"
>
   // ......
</el-table>
javascript 复制代码
// 鼠标进入表格行的回调函数
enterSelectionRows: (row:any, column:any, cell:any, event:any) => {
  if (!row.hasAuth) {
       createTips(event, row, '请先在资产平台申请对应表查询权限')
        return
     }
 }
// 鼠标离开表格行的回调函数
leaveSelectionRows: (row:any) => {
      removeTips(row)
}


// 创建toolTip
export function createTips(el:any, row:any, value:any) {
  const { id } = row
  const tooltipDom = document.createElement('div')
  tooltipDom.style.cssText = `
        display: inline-block;
        max-width: 400px;
        max-height: 400px;
        position: absolute;
        top: ${el.clientY + 5}px;
        left: ${el.clientX}px;
        padding:5px 10px;
        overflow: auto;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #595959;
        background: #fff;
        border-radius: 5px;
        z-index: 19999;
        box-shadow: 0 4px 12px 1px #ccc;
      `
  tooltipDom.innerHTML = value
  tooltipDom.setAttribute('id', `tooltip-${id}`)
  // 将浮层插入到body中
  document.body.appendChild(tooltipDom)
}

// 删除tooltip
export function removeTips(row:any) {
  const { id } = row
  const tooltipDomLeave = document.querySelectorAll(`#tooltip-${id}`)
  if (tooltipDomLeave.length) {
    tooltipDomLeave.forEach(dom => {
      document.body.removeChild(dom)
    })
  }
相关推荐
苹果酱056733 分钟前
2020-06-23 暑期学习日更计划(机器学习入门之路(资源汇总)+概率论)
java·vue.js·spring boot·mysql·课程设计
Deepsleep.35 分钟前
react和vue的区别之一
javascript·vue.js·react.js
zqlcoding42 分钟前
使用el-table表格动态渲染表头数据之后,导致设置fixed的列渲染出现问题
前端·javascript·vue.js
爱吃的强哥1 小时前
vue3 使用 vite 管理多个项目,实现各子项目独立运行,独立打包
前端·javascript·vue.js
涵信1 小时前
第十节:性能优化高频题-虚拟DOM与Diff算法优化
javascript·vue.js·性能优化
拖孩1 小时前
【Nova UI】十一、组件库中 Icon 组件的测试、使用与全局注册全攻略
前端·javascript·vue.js·ui·sass
凉豆菌2 小时前
在html中如何创建vue自定义组件(以自定义文件上传组件为例,vue2+elementUI)
vue.js·elementui·html
广西千灵通网络科技有限公司3 小时前
基于 springboot+vue+elementui 的办公自动化系统设计(
vue.js·spring boot·elementui
YuShiYue5 小时前
pnpm monoreop 打包时 node_modules 内部包 typescript 不能推导出类型报错
javascript·vue.js·typescript·pnpm
一个专注写代码的程序媛5 小时前
为什么vue的key值,不用index?
前端·javascript·vue.js