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鼠标经过显示图标,移出隐藏
基础教程推荐
猜你喜欢
- Electron调用外接摄像头并拍照上传实现详解 2024-02-08
- javascript history对象(历史记录)使用方法(实现浏览器前进后退) 2024-02-10
- shell-script – 用于反转HTML文件中数千个元素的排序顺序的正确工具 2023-10-25
- 使用CSS3编写灰阶滤镜来制作黑白照片效果的方法 2024-04-07
- 带参数的function 的自运行效果代码 2024-01-09
- Jquery中$.ajax()方法参数详解 2022-10-17
- 浅谈CSS在前端优化中一些值得注意的关键点 2024-03-10
- 如何提示用户打开Cookie? 2024-04-15
- VS2010超赞的扩展辅助工具使用总结 2024-04-01
- Uncaught TypeError: Cannot read properties of undefined (reading ‘install‘)报错 2022-11-02