背景

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中移除。

代码如下

// table组件

:data="tableData"

style="width: 100%"

@cell-mouse-enter="enterSelectionRows"

@cell-mouse-leave="leaveSelectionRows"

>

// ......

// 鼠标进入表格行的回调函数

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)

})

}

原文链接：

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。