循环多个el-popover的手动显示/隐藏问题

最新推荐文章于 2024-07-19 11:42:07 发布

原创最新推荐文章于 2024-07-19 11:42:07 发布 · 2.4k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #elementui

VUE 专栏收录该内容

36 篇文章

订阅专栏

本文探讨了如何在Vue中使用el-popover实现多个弹出框的动态显示和隐藏，包括通过$refs管理并调用其方法来控制单个popover的开关。适合前端开发者了解和解决实际项目中的交互问题。

循环多个el-popover的手动显示/隐藏问题

<div v-for="item in dataList" :key="item.id">
	<el-popover
	          :ref="'popoverRef_' + item.id"
	          placement="right-start"
	          width="200"
	          trigger="click">
	          <el-button slot="reference" size="mini" type="primary">按钮<i class="el-icon-d-arrow-right el-icon--right"></i></el-button>
	          <div>
	            测试111111111111111
	          </div>
	   </el-popover>
</div>

关闭某个popover代码

this.$refs['popoverRef_' + item.id][0].doClose() // 关闭
this.$refs['popoverRef_' + item.id][0].doShow() // 打开

关注博主即可阅读全文

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

蜗牛与藤曼

关注关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

el-popover的循环写法，visible和属性virtual-ref

jieweiwujie的博客

10-09

459

【代码】el-popover的循环写法，visible和属性virtual-ref。

Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）

🏆 前端领域优质创作者

09-12

1万+

vue3elementplus气泡卡片el-popover组件，vue3Popover气泡卡片怎么手动关闭，elementplusel-popover手动关闭，Elementplus饿了么组件库中el-popover气泡框弹出框手动关闭详细教程，elementplus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，elementplus解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡

参与评论您还未登录，请先登录后发表或查看评论

1 条评论

你叫我改代码我就改代码 2024.08.16
你怎么可以吧这玩意儿放到循环，人才

element中的Popover提示框如何循环使用

JCat的博客

12-04

8846

前言很久没有写博客了，总结一下前几天遇到的一个需求中的知识点吧，element 中的Popover提示框在表格或ul页面中如何循环使用；在用Popover提示的时候遇见了几个问题，记录一下；正文一、解析官方popover的使用方法官网：element-popover <el-popover placement="bottom" title="标题" wid...

列表页多个el-popover，(只需要弹出一个，vue3,ele-plus)

weixin_46965237的博客

07-19

1744

列表页多个el-popover，只需要显示一个弹框

element-ui 解决循环出多个el-popover点击其中一个则其它都关闭

MISS_zhang_0110的博客

06-10

4990

element-ui解决循环出多个Popover点击其中一个则其它都关闭

el-popover 循环多个点击不出现

12-28

当在 Vue.js 中使用 Element UI 的组件时，如果遇到 `el-popover` 在循环渲染的多个元素上点击不正常工作的情况，通常是因为这些 popover 缺乏唯一标识符。给每个动态显示隐藏的元素添加唯一的键值可以帮助区分不同...

element-plus v-for el-popover显示隐藏

12-28

为了在使用 `Element Plus` 的项目中通过 `v-for` 实现多个 `el-popover` 组件并分别控制其显示和隐藏，可以采用以下方法： #### 数据绑定与事件处理创建一个数组来存储各个 popover 的状态，并将其与模板中的数据...

el-table自定义表头#header 下使用el-popover设定手动开关，但是点击打开两个popover弹窗

热门推荐

小新的博客

08-24

1万+

el-popover 在 v-for 中的基础使用 <div v-for='item in 100'> <el-popover placement="bottom" title="标题" width="200" trigger="click" content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"> <el-button slot="reference

element 表格里，每一行都循环使用el-popover组件，关闭按钮失效问题如何解决？

浮生的博客

03-02

1504

代码如下，拿去就用： <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <style> .item:hover

【elementui】el-popover在列表里循环使用,取消的doClose无效解决办法重置密码功能

DecorateCC的博客

11-24

2671

在使用elementui的Popover 弹出框时，需求是在table列表里使用，循环出来，无法取消。

主动手动控制el-popper的显示和隐藏

疑问搜索动手解决记录

06-22

1万+

element-ui官方示例项目里的需求两个关联处的代码结构实现思路通过1处的点击,来控制右下角的铃铛处显示popper弹出框 , 网上搜寻资料查询到 ,想手动实现主动控制它的显示和隐藏, 组件上挂载的有方法 doShow()和doClose() 于是在popper弹出框上写了一个ref节点 , 在1中通过this找到这个节点去调取节点上挂载的方法 ,就可以实现主动调取了 , 但是当我找到这个节点的时候 , 调取this.$refs.bottomElPopover.doShow()却丝毫不起

vue el-popover实现循环+close

---

07-05

1330

重点 <template> <section> <el-button v-for="(item,index) in List" :key="index" @click="butEvent(scope.$index)"> <el-popover :ref="`popover-${index}`" > <el-button><el-link @click="$refs[`popover

elment-ui table固定列el-popover出现多个

是夜色太荒芜的专栏

06-27

3643

table固定列el-popover出现多个解决办法:ref="popover-${data.id}" 触发popover时设置document.getElementById(this.refs[key].refs[key].refs[key].refs.popper.id).style.display = ‘none’ <el-popover v-model="data.popShow" v-permission="permission.del"

el-popover多个，点击一个关闭全部

qq_34631220的博客

07-09

414

【代码】el-popover多个，点击一个关闭全部。

多个el-popover点击不弹窗问题

qq_41429765的博客

05-13

979

el-popover不可用v-if设置隐藏只能用v-show <el-popover placement="bottom" width="260" trigger="click" :ref="`node-popover-${scope.$index+scope.row.cardId}`" display="flex" flex-wrap="wrap"> <span v-for="(item,index) in list" :key="index" style="ma

使用element中el-popover组件手动控制开关的特殊方式

qq_34811855的博客

02-20

877

【代码】使用element中el-popover组件手动控制开关的特殊方式。