1、template代码
<el-table:data="listData" @cell-mouse-enter="cellMouseEnter" @cell-mouse-leave="cellMouseLeave">
<el-table-column label="更新时间" align="center" prop="risExamUpdateTime" >
<template slot-scope="scope">
<span>{{ scope.row.risExamUpdateTime}}
<i class="el-icon-refresh" v-if="scope.row.hoverFlag" @click="set"></i>
</span>
</template>
</el-table-column>
</el-table>
2、js代码
//鼠标移入显示图标
cellMouseEnter(row) {
let Arr = JSON.parse(JSON.stringify(this.listData));
for (let index = 0; index < Arr.length; index++) {
const element = Arr[index];
// 匹配滑过的当前行
if (element.id === row.id) {
element["hoverFlag"] = true;
} else {
element["hoverFlag"] = false;
}
}
this.listData = JSON.parse(JSON.stringify(Arr));
},
//鼠标移出隐藏图标
cellMouseLeave() {
for (let index = 0; index < this.listData.length; index++) {
const element = this.listData[index];
element["hoverFlag"] = false;
}
},
//点击图标方法
set(){}
以上是编程学习网小编为您介绍的“el-table鼠标经过显示图标,移出隐藏”的全面内容,想了解更多关于 vuejs 内容,请继续关注编程基础学习网。
织梦狗教程
本文标题为:el-table鼠标经过显示图标,移出隐藏


基础教程推荐
猜你喜欢
- 极酷的三层分离的标准滑动门导航菜单 2023-12-30
- 原生JS实现轮播效果+学前端的感受(防止走火入魔) 2024-03-10
- Vue实现当前页面刷新的4种方法举例 2024-01-07
- JS设置获取cookies的方法 2024-01-29
- 一文详解如何根据后端返回的url下载json文件 2023-12-19
- vue项目开发中什么情况下可以用到slot 2025-01-13
- vue如何在父组件中调用子组件的方法 2023-10-08
- javacript获取当前屏幕大小 2023-11-30
- HTML+CSS实现导航条下拉菜单的示例代码 2022-09-21
- 推荐20家国外的脚本下载网站 2023-12-21