vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出

 效果图：

 注：@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鼠标移入
        
            	
            
            
                
        

js

data(){
    return{
          showClickIcon:false,
          showInfo:false,
          rowid:'',
          rowData:[],
    }
}
//鼠标移入事件
ncrFormat(row){
       this.showClickIcon=true
	   this.rowid=row.id   //赋值行id，便于页面判断
	   this.rowData=row   //把行数据赋值，用于后续操作
      	},

 
//点击按钮弹出页面