elementUI中的popover嵌套popover弹窗不能自动关闭
组件中有个弹窗el-popover,这个弹窗里面又引入弹窗el-popover,这样相当于是popover嵌套,导致的问题就是子popover中的弹窗打开第二个的时候第一个不能自动关闭,就是这样
解决方法:
popover内部嵌套popover的方法,在外层popover的内容上添加click事件(注意是否需要.native),用this.$refs.XXX.doClose()方法关闭,同时触发内部popover的reference,需要添加click事件阻止事件冒泡,两者缺一不可(不阻止事件冒泡,就会造成内部popover打不开–实际上是打开了又关掉了)
直接上代码
<el-table-column label="状态" width="180"><template slot-scope="scope"> <div class="num"><el-popoverplacement="bottom"width="180"trigger="click"><div style=" border-bottom:1px solid #000;margin-bottom:5px" @click="tableTwoPopoverClick(scope.row)"><div class="status-item" v-for="(item,index) of statuslist" :key="index"> <el-popoverplacement="bottom-start" trigger="click":ref="`Pop${scope.row.id}`"@show="handleStatusWarn(scope.row,index)"><div class="ColorBox"><div class="ColorBoxItem">1</div><div class="ColorBoxItem">2</div><div class="ColorBoxItem">3</div></div> <div slot="reference"><div class="monday-style-clickable" ><div class="color-option-box" :style="`margin-bottom:10px;background-color:${item.color}`">**</div></div> </div></el-popover> </div> </div> <div slot="reference"><div>{{scope.row.name }}</div></div></el-popover> </div></template> </el-table-column>//关闭其他popover
//给嵌套的子el-popover加ref,这样就能找到子popover。获取所有循环出来的el-popover,如果这个el-popover的索引值和当前弹出的索引值相同,则不关闭,否则关闭弹窗
handleStatusWarn(val,index){var e =window.event || arguments.callee.caller.arguments[0];e.stopPropagation(); let eleList = this.$refs[`Pop${val.id}`]eleList.forEach((i,j)=>{if(j != index){i.doClose()}})
},
//点击其他地方,popover消失,如果不写点击页面的其他地方,弹窗不会消失
tableTwoPopoverClick(val){let eleList = this.$refs[`Pop${val.id}`]eleList.forEach((i,j)=>{ i.doClose() })
}
修改后
elementUI中的popover嵌套popover弹窗不能自动关闭相关推荐
- vue解决element-ui中循环产生的popover中的内容手动点击完操作后隐藏
1.想要功能--如下图:既点击弹窗中的列表项之后,弹窗popover隐藏 2.解决方法-没有使用回调时 在el-popover中加属性 :ref="popover-${scope.$inde ...
- Vue:element-ui中表格过长内容隐藏显示
一.el-table表格 在使用VUE显示后台数据时,经常会遇到数据过长,显示出来的效果很难看,如下图所示: 上图中,红框框出的内容由于长度过长,占据了三行空间,如果内容更多的话,占据行数就更多了,表 ...
- java弹窗 触发事件_关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法...
好久没见了 在项目中遇到一个小小的需求,总结了一下! 详细我就不介绍了,相信大家用过的话,很了解.详见文档-----------> http://element-cn.eleme.io/#/zh ...
- 关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法
关于ElementUI中MessageBox弹框的取消键盘触发事件(enter,esc)关闭弹窗(执行事件)的解决方法 参考文章: (1)关于ElementUI中MessageBox弹框的取消键盘触发 ...
- element-ui中message弹框提示的使用
element-ui中message弹框提示的使用 1.按需导入的element-ui中的message import { Message } from 'element-ui' 2.进行全局挂载: ...
- 前端Element-UI中show-overflow-tooltip属性不生效
项目场景: 使用Element-UI中的el-table对获取的属性数据进行展示 问题描述 el-table表格中设置show-overflow-tooltip属性,鼠标悬浮后,tooltip文本提示 ...
- php foreach嵌套foreach,php中foreach怎么嵌套foreach PHP中foreach函数用法?
foreach的使用方法小编不是很明确,分享达人指教一下.foreach (array_expressforeach($array as $key) { if(xxxx) { break; //bre ...
- vue实战(1)——解决element-ui中upload组件使用多个时无法绑定对应的元素
解决element-ui中upload组件使用多个时无法绑定对应的元素 以前写的项目关于图片上传的都是单张或几张图片上传(主要是基于vue的element),图片路径都是固定写的,所以遇见过列表中多个 ...
最新文章
- 薛定谔的猫跳进了生物学界,化学家表示:没有我可能办不到
- ESFramework网络通信框架介绍之(2)――网络通信消息NetMessage
- c语言程序大型案例分析,C语言程序设计习题解析与应用案例分析(第2版)
- 张萍萍山东大学计算机科学系毕业生,并行驰骋,放“码”来战!看先导杯大奖赛上山大风采...
- 1.7Oob 继承关系中构造方法的使用
- 微服务治理框架的选择:对比Spring Cloud和Istio
- python编程语言模块_Python基础编程常用模块汇总
- SpringMVC之@RequestMapping注解及其衍生注解详解
- SDR与DDR的区别
- (转载)Http Module 介绍
- 「小程序JAVA实战」小程序开源搜索组件(53)
- Tapestry 5 资料
- 如何认识和处理ISO14001标准中“相关方”概念(转载)
- Java 下载 Excel模板
- C语言 汉字码表 STM32 拼音输入法
- OpenTCS打造移动机器人交通管制系统(五)
- EF Core 新特性——Owned Entity Types
- 【三年前端开发的思考】如何有效地阅读需求?
- 给LSTM网络训练的数据添加标签(三维数组的一维增加数据)
- 2021年中国皮革行业市场现状分析,PU合成革趋势明显,汽车皮革是关键需求「图」
热门文章
- 接口推送数据原理_数据同步组件(Canal)在珍爱网的应用与实践
- 文献阅读:RoFormer: Enhanced Transformer with Rotary Position Embedding
- 从零开始创建一个vue项目 1
- 青岛市初中计算机考试成绩查询,2021年青岛市初中学业水平考试成绩查询入口http://edu.qingdao....
- 移动运营商离网挽留的策略制定(二)
- Blender学习笔记(建模#3:点操作)
- 手撕数据结构—双向循环带头链表
- 餐饮行业如何打开市场
- PHP语言的四大优势和八大特性
- springboot 集成quartz