鍍金池/ 問答/HTML/ vue element-ui table如何在鼠標(biāo)劃入某一行時讓該行的操作按鈕顯

vue element-ui table如何在鼠標(biāo)劃入某一行時讓該行的操作按鈕顯示隱藏

需求是在鼠標(biāo)劃入表格的某一行時，讓該行的操作按鈕顯示，劃出時再讓按鈕隱藏。如圖：

clipboard.png

在鼠標(biāo)移入某一行時讓修改和刪除按鈕顯示，移出該行時再隱藏修改刪除按鈕

回答
編輯回答
我以為

clipboard.png

可以拿到row,column,cell,event

然后再讓你的自定義<el-table-column>顯示即可。

2017年9月17日 04:31
編輯回答
玩控

我是這么做的

  • #1 取到數(shù)據(jù)之后遍歷一次數(shù)據(jù), 給每條數(shù)據(jù)加上一個字段 showBtn = false
  • #2 數(shù)據(jù)渲染的時候去用新加的字段showBtn控制按鈕的顯示
  • #3 然后根據(jù)樓上提供的 cell-mouse-enter 方法可以取到當(dāng)前行的數(shù)據(jù), 再去改變當(dāng)前數(shù)據(jù)的 showBtn 字段, 記得還要加上mouse-leave,給所有數(shù)據(jù)的showBtn字段全部設(shè)置為false
其實思路很簡單, 你要明白數(shù)據(jù)驅(qū)動視圖的意義, 這樣的話完全不用使用 $refs之類的去操作dom

希望幫助到你

2017年3月9日 12:59
編輯回答
疚幼
.u-btn{
    display: none;
  }
  .el-table__body tr:hover{
    .u-btn{
      display: inline;
    }
  }

1、給按鈕加上唯一的class，舉個栗子u-btn;
2、css加上就完事兒。

2018年9月16日 07:43
編輯回答
純妹
給他btn按鈕那個表格加一個ref屬性 ref = “aa”

然后表格劃過事件
調(diào)用的事件中加入
this.$refs.aa."btn表格的劃過事件"
2017年12月30日 16:00