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

最新推荐文章于 2024-08-23 16:28:47 发布

星期一天气雨

最新推荐文章于 2024-08-23 16:28:47 发布

阅读量3.9k

点赞数 2

文章标签： vue.js

本文链接：https://blog.csdn.net/qq_42450258/article/details/117743601

版权

需求是在table中移入某一行时显示编辑按钮

在这里插入图片描述

使用Element中的hover事件

element中table的hover事件
HTML在table中使用
在这里插入图片描述

按钮上使用显示参数和控制行参数id判断，如图示

  <span v-show="showEditFileNameButton&&rowId==scope.row.id"><i class="el-icon-edit"></i ></span>

js的方法

  //鼠标移入单元格事件
  private mouseEnter(row: any) {
    this.showEditFileNameButton = true;
    this.rowId=row.id   //赋值行id，便于页面判断
  }
  //鼠标移出单元格事件
  private mouseLeave(row: any) {
    this.showEditFileNameButton = false;
    this.rowId=""
  }

总结：之前老想着在表格的data每个子对象中添加一个参数判断，造成的结果是hover的时候没有效果，只能在点击的时候参数发生改变，这个暂时没有发现原因，却没想到这简单的方法，记录一下我这pig脑子