element-ui中hover-row 失效的解决方案

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

原创最新推荐文章于 2024-06-27 14:09:40 发布 · 7.8k 阅读

11 ·

CC 4.0 BY-SA版权

文章标签：

#element-ui #table表格 #鼠标滑过 #hover-row

vue 同时被 2 个专栏收录

4 篇文章

订阅专栏

element

2 篇文章

订阅专栏

本文详细介绍了在 Element-UI 的 table 组件中，使用纯 CSS 控制按钮隐藏显示的技巧。当鼠标滑过表格行时，会触发 hover-row 效果，但在某些环境下此效果可能失效。文章分享了一个有效的解决方案，并提供了双重样式的保障策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在本地调试。element-ui的table组件的鼠标滑过效果，用纯css控制按钮的隐藏显示，
鼠标滑过会有hover-row，这个属性，但是在老大和其他同事的电脑上不显示，当时找了好半天，才发现hover-row失效了，在网上找到如下解决方法。

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    .center_del {
      display: block;
      width: 90px;
      text-align: right;
    }
    .center_del_btn {
      display: block;
      width: 90px;
    }
  }

但还是保留了我本地的样式进行双重保障‘；

  .el-table__row {
    &.hover-row {
      .center_del {
        display: block;
      }
      .center_del_btn {
        text-align: right;
        display: block;
      }
    }
  }

哪里有问题望大佬指证；