el-table操作显示图标，鼠标移入显示弹窗

1、效果图

2、代码

operatingMenuclick是弹窗的回调函数

            <el-table-column prop="address" label="操作"><template slot-scope="scope">    <el-dropdownclass="dropdown"trigger="hover"placement="right-start"@command="(command) => {operatingMenuclick(command, scope.row);}"><!-- 这里是显示的图标 --><div class="operating-button"><imgclass="button-icon"src="@/assets/icons/personalSpace/ic_more_grey@2x.png"alt="加载失败!"/></div><el-dropdown-menu slot="dropdown"><!-- jurisdiction等于1、2、3的时候显示 --><el-dropdown-itemv-if="['3', '2', '1'].includes(scope.row.jurisdiction)"command="0"><span class="text">下载</span></el-dropdown-item><el-dropdown-itemv-if="['3', '2', '1'].includes(scope.row.jurisdiction)"command="1"><span class="text">转发到薪友</span></el-dropdown-item><el-dropdown-itemv-if="['3', '2', '1'].includes(scope.row.jurisdiction)"command="2"><span class="text">详细信息</span></el-dropdown-item><el-dropdown-itemcommand="3"><span class="text">重命名</span></el-dropdown-item><el-dropdown-itemcommand="4"><span class="text">收藏</span></el-dropdown-item></el-dropdown-menu></el-dropdown></template></el-table-column>

3、弹窗的回调函数

    operatingMenuclick(e, row) {switch (e) {case "0":console.log(e,'下载')break;case "1":console.log(e,'转发到薪友')break;case "2":break;case "3":break;case "4":break;}},

el-table操作显示图标，鼠标移入显示弹窗相关推荐

elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息
目的:elementUI表格头添加图标-鼠标移入显示el-tooltip提示信息项目经理要求表格头部添加一个图标,鼠标移入提示用户字段包含的内容信息,以前没有开发过,故总结一下. 添加方法: 方法一 ...
vue 移入显示_vue鼠标移入显示点赞图标，移出隐藏点赞图标，现在我想点击点赞图标，鼠标移出不会隐藏图标，怎么做？...
@mouseover="showLike(i)" @mouseleave="hideLike(i)"> @click="likePoint(i) ...
table tr省略后鼠标移入显示相应信息_赤峰市2020年初中毕业生信息技术与实验操作考试总体实施细则...
赤峰市初中毕业生信息技术与实验操作考试总体实施细则为切实做好全市初中毕业生信息技术与物理.化学.生物实验及初二生物实验操作考试(以下简称"信实考试")工作,特制定本实施细则: 一 ...
table tr省略后鼠标移入显示相应信息_中考来了，人机对话、信息技术考试要求看过来...
半岛记者魏海洋今年的中考将拉开大幕,九年级英语听说人机对话考试(以下简称"人机对话考试")将于4月20日(周六)至21日(周日)进.八年级信息技术考试将于4月22日(周一)进行 ...
CSS实线鼠标移入显示隐藏div
用CSS中的 hover 事件,实线鼠标移入显示隐藏元素. 效果如下: 代码如下: <!DOCTYPE html> <html><head><meta cha ...
echarts-坐标轴名称过长省略，鼠标移入显示全部
坐标轴名称过长省略,鼠标移入显示全部一.效果图二.解决思路三.代码一.效果图二.解决思路创建一个div用于展示全称,鼠标悬浮坐标轴之上该div显示,反之隐藏第一步:为了让坐标轴响应和触发 ...
超出长度显示省略号，鼠标移入显示全部内容
超出长度显示省略号,鼠标移入显示全部内容 //这里用的是element组件,可以替换<el-popoverwidth="300"popper-class="wbs- ...
纯CSS实现鼠标移入显示图标效果
1.效果预览在淘宝或京东商城我们经常看到这样的效果:鼠标移动除某一个位置时出现下拉菜单,或者显示一个图标,那么这是如何实现的呢?我们今天就用CSS来实现鼠标移入时显示图标的一个效果. 下面是我们这次 ...
显示内容长时，显示部分内容，鼠标移入显示全部内容
实现思想: 在页面内放入一个Div, 调用lable的onMouseover,onMouseout 事件,然后用JS去实现显示部分内容在原有位置还是显示全部内容在Div中. 后台代码: str ...
js + jquery 两栏Tab鼠标移入显示/隐藏的效果（详）
学习文献: 必须要掌握的原生JS实现JQuery 了解了这些才能开始发挥jQuery的威力 - 谦行 – JavaScript和jQuery两款TAB选项卡示例 -- 西门 jquery原创分享社区 ...

el-table操作显示图标，鼠标移入显示弹窗

el-table操作显示图标，鼠标移入显示弹窗相关推荐

最新文章

热门文章