循环出来的Elementui中的Popover弹出框,如何在外部触发Popover的弹出事件

本文解决ElementUI Popover组件在动态数组变化时,无法触发显示问题。通过在methods中添加ref属性和使用$nextTick确保DOM更新后,调用doShow()方法实现动态增加Popover并触发其显示。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Elementui的Popover基本使用,下面链接为官网介绍,就不做重复介绍了
关于Elementui基本使用,官网地址

重点:Popover的显示方法为doShow()

遇到的问题:Popover弹出框是循环出来的,如图

在这里插入图片描述

点击增加按钮让数组增加,所以弹出框也会增加,但不会触发点击事件,需求:增加按钮之后,同时出发Popover的点击事件

解决方案:给这个dom节点添加ref属性,在methods中
在这里插入图片描述
会打印出来循环出来所有的Popover,因为我用的添加数组的方法是,this.arr.splice(this.arr.length + 1, 0, { }

所以每次新增的时候,都会添加一个Popover,这时候直接获取数组是获取不到改变之后的,所以在this.$nextTick(() => { }) 里面获改变后的数组,然后通过this.$refs.arr[this.arr.length - 1].doShow()方法调用,即可正常显示。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值