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

最新推荐文章于 2024-04-08 13:59:57 发布

西瓜有点饿

最新推荐文章于 2024-04-08 13:59:57 发布

阅读量1.1k

点赞数 9

CC 4.0 BY-SA版权

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

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

背景：

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

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