vue element-ui table如何在鼠标划入某一行时让该行的操作按钮显示隐藏

Question

需求是在鼠标划入表格的某一行时，让该行的操作按钮显示，划出时再让按钮隐藏。如图：

在鼠标移入某一行时让修改和删除按钮显示，移出该行时再隐藏修改删除按钮

Answer 1

.u-btn{
    display: none;
  }
  .el-table__body tr:hover{
    .u-btn{
      display: inline;
    }
  }

1、给按钮加上唯一的class，举个栗子u-btn;
2、css加上就完事儿。

Answer 2

我是这么做的

• #1 取到数据之后遍历一次数据, 给每条数据加上一个字段 showBtn = false
• #2 数据渲染的时候去用新加的字段showBtn控制按钮的显示
• #3 然后根据楼上提供的 cell-mouse-enter 方法可以取到当前行的数据, 再去改变当前数据的 showBtn 字段, 记得还要加上mouse-leave,给所有数据的showBtn字段全部设置为false

其实思路很简单, 你要明白数据驱动视图的意义, 这样的话完全不用使用 $refs之类的去操作dom

---

希望帮助到你

Answer 3

可以拿到row,column,cell,event

然后再让你的自定义<el-table-column>显示即可。

Answer 4

给他btn按钮那个表格加一个ref属性 ref = “aa”

然后表格划过事件
调用的事件中加入
this.$refs.aa."btn表格的划过事件"

Answer 5

我也想知道如何实现