[element-ui]el-table 当单元格 hover 进入时有文字提示效果

最新推荐文章于 2024-06-27 14:09:40 发布

西瓜有点饿

最新推荐文章于 2024-06-27 14:09:40 发布

阅读量710

点赞数 8

分类专栏： element-ui 文章标签： elementui

本文链接：https://blog.csdn.net/xxuxioxx/article/details/135676822

版权

element-ui 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

文章讲述了如何在电商项目中，根据产品需求，使用Vue框架的ElementUI中的el-table组件，为禁用的宝贝添加鼠标悬停时的提示文案，通过JavaScript实现动态显示和隐藏提示框。

摘要由CSDN通过智能技术生成

背景：

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

简单的做法是在宝贝标题上用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)
        })
    } 
},