青岛建设网站企业,淘宝客不建网站怎样做,小程序开发框架,wordpress建站系统视频教程背景
el-table组件中#xff0c;可以通过勾选某条数据来创建单据#xff0c;但是有些数据没有权限使用#xff0c;就需要禁用掉勾选的功能#xff0c;然后当鼠标悬浮在这一行的时候#xff0c;展示类似于toolTip的提示框。
除了当鼠标悬浮在某一行#xff0c;展示类似于…背景
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 :datatableData stylewidth: 100%cell-mouse-enterenterSelectionRowscell-mouse-leaveleaveSelectionRows
// ......
/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 } rowconst 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 valuetooltipDom.setAttribute(id, tooltip-${id})// 将浮层插入到body中document.body.appendChild(tooltipDom)
}// 删除tooltip
export function removeTips(row:any) {const { id } rowconst tooltipDomLeave document.querySelectorAll(#tooltip-${id})if (tooltipDomLeave.length) {tooltipDomLeave.forEach(dom {document.body.removeChild(dom)})}
