效果图：

注：@mouseenter="enter(index)" @mouseleave="leave()"   重点

下载

删除

data() {

return {

seen:false,

current:0

}

},

//鼠标移入移出

enter(index){

this.seen = true;

this.current = index;

},

leave(){

this.seen = false;

this.current = null;

}

element-ui表格el-table鼠标移入移出事件

效果：

可以先去官网查看文档说明：

鼠标移入该行元素就会出现按钮或者图标(自定义)。

//这里的cell-mouse-leave鼠标移出，cell-mouse-enter鼠标移入

//判断rowid是否等于当前鼠标移动到的该行元素，是则会显示按钮图标，再对按钮图标编写点击事件

{{scope.row.machineNumber}}

//否则显示该字段

删 除

js

data(){

return{

showClickIcon:false,

showInfo:false,

rowid:'',

rowData:[],

}

}

//鼠标移入事件

ncrFormat(row){

this.showClickIcon=true

this.rowid=row.id //赋值行id，便于页面判断

this.rowData=row //把行数据赋值，用于后续操作

},

//点击按钮弹出页面