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组件
<el-table
:data="tableData"
style="width: 100%"
@cell-mouse-enter="enterSelectionRows"
@cell-mouse-leave="leaveSelectionRows"
>
// ......
el-table>
// 鼠标进入表格行的回调函数
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)
})
}