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鼠标经过显示图标,移出隐藏
基础教程推荐
猜你喜欢
- 浅析Bootstrap表格的使用 2023-12-14
- Ajax 动态载入html页面后不能执行其中的js快速解决方法 2023-02-14
- VUE编写可复用性模块 2023-10-08
- vue插件和组件的区别 2023-10-08
- html各种特殊字符转义对照表介绍 2024-12-13
- 纯javascript前端实现base64图片下载(兼容IE10+) 2023-12-28
- 如何使用整个html表更新数据库(PHP,MySQL) 2023-10-25
- 我如何用innerhtml中的ajax和php更新mysql数据库 2023-10-26
- javascript获取隐藏元素(display:none)的高度和宽度的方法 2024-03-10
- css line-height属性的使用技巧 2024-01-09
