背景：

每个宝贝会有是否禁用标识，如果禁用，则不能禁止勾选，鼠标划过此宝贝时会悬浮提示文案。

简单的做法是在宝贝标题上用title去判断展示文案，比如

<p :title="!scope.row.accessAllowed?scope.row.reason: ''">{{ scope.row.title }}</p>

但是产品不同意，觉得这样不够醒目！！！要求在鼠标经过此行时就出现提示文案。哎。写吧。

效果：

实现方案：

在table上绑定事件

<el-table :data="tableData"
    :max-height="tableHeight" style="width:100%"
    v-loading="loading"
    highlight-current-row
    @cell-mouse-enter="handleMouseEnter"
    @cell-mouse-leave="handleMouseLeave"
    @sort-change="sortChange"></el-table>

js写法：

handleMouseEnter(row, column, cell, event) {
    if(!row.accessAllowed&&row.reason) {
        const { id } = row
        const tooltipDom = document.createElement('div')
        tooltipDom.style.cssText = `
            display: inline-block;
            max-width: 400px;
            max-height: 400px;
            position: absolute;
            top: ${event.clientY + 5}px;
            left: ${event.clientX}px;
            padding:5px 10px;
            overflow: auto;
            font-size: 12px;
            color: #595959;
            background: #fff;
            border-radius: 5px;
            z-index: 19999;
            box-shadow: 0 4px 12px 1px #ccc;    
        `    
        tooltipDom.innerHTML = row.reason
        tooltipDom.setAttribute('id', `tooltip-${id}`)
        document.body.appendChild(tooltipDom)
    }
},
handleMouseLeave(row, column, cell, event) {
    const { id } = row
    const tooltipDomLeave = document.querySelectorAll(`#tooltip-${id}`)
    if (tooltipDomLeave.length) {
        tooltipDomLeave.forEach(dom => {
            document.body.removeChild(dom)
        })
    } 
},