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利用:row-style="rowClass"设置指定行变色
el-table表格显示selection多选时对某些复选框设置禁止选中
el-table表格实现多选功能(全选/指定选中/取消选中)
标签: el-table
上面是“el-table鼠标经过显示图标,移出隐藏”的全面内容,想了解更多关于 vuejs 内容,请继续关注web建站教程。
当前网址:https://ipkd.cn/webs_2169.html
workflows工作流
- 一张严重受损的宇宙飞船的照片ComfyUI工作流
- 一个威武雄壮的战士ComfyUI工作流
- 丛林里坐着一尊佛像
- 一只蓬松柔软的圆形半鳄梨玩偶
- 坐落在白雪覆盖的广阔平原上2只可爱的雪豹
- 骨骼般的恶魔修女ComfyUI工作流
- 图生图局部重绘ComfyUI工作流
- 一只由水晶制成的蜂鸟
猜你喜欢
声明:本站提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请发送到邮箱:admin@ipkd.cn,我们会在看到邮件的第一时间内为您处理!