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

最新推荐文章于 2025-04-01 11:43:45 发布

我就是DaLing呀！

最新推荐文章于 2025-04-01 11:43:45 发布

阅读量2.2w

点赞数 17

文章标签： vue 鼠标移动事件 element-ui

本文链接：https://blog.csdn.net/weixin_42418774/article/details/103474820

版权

效果图：

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

 <div class="img_box">
        <div v-for="(img,index) in photoData" class="demo-image__preview"  @mouseenter="enter(index)" @mouseleave="leave()">
          <el-image
            class="img"
            :src="img.compressUrl"
            :preview-src-list="getSrcList(index)"
          >
          </el-image>
          <div v-if="seen&&index==current" class="btn_download">
            <el-button >下载</el-button>
            <el-button >删除</el-button>
          </div>
        </div>
      </div>

 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鼠标移入移出事件

效果：

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

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

<el-table :height="tableHeight" size="mini" :data="tableData"  @cell-mouse-leave="showClickIcon=false" @cell-mouse-enter="ncrFormat" style="width: 100%;background: #fff"border >
//这里的cell-mouse-leave鼠标移出，cell-mouse-enter鼠标移入
        <el-table-column prop="machineNumber" label="编号" show-overflow-tooltip >
            <template slot-scope="scope">
	            <el-button v-if="showClickIcon==true&&scope.row.id==rowid" @click.stop="showInfo=true" size="mini" type="primary" icon="el-icon-search"></el-button>
//判断rowid是否等于当前鼠标移动到的该行元素，是则会显示按钮图标，再对按钮图标编写点击事件
	              <div v-else>{{scope.row.machineNumber}}</div>
//否则显示该字段
	        </template>	
            </el-table-column>
            <el-table-column label="操作" width="80" fixed="right" show-overflow-tooltip>
                <template slot-scope="scope">
                   <el-button type="danger" size="mini" @click="delete(scope.row)">删 除</el-button>
                </template>
        </el-table-column>
</el-table>

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

 <el-dialog title="信息" :visible.sync="showInfo" width="40%" center>
//点击按钮弹出页面
</el-dialog>