vue3.0 element-plus 不同版本 el-popover 循环优化

最新推荐文章于 2025-04-18 10:34:50 发布
最新推荐文章于 2025-04-18 10:34:50 发布
阅读量3k 收藏 8
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaomanonyo/article/details/132299274
版权

表格内循环el-popover 

渲染以后的页面，数据量很大的时候页面会卡，生成的代码：

解决思路：将el-popover提出来，不参与循环，让el-popover只渲染一次

 

1、以1.1.0-beta.24版为例（低版本）

红色下划线部分是关键点

 

 

v-popover的值与el-popover的ref值要一致

2、以2.3.9版为例（当前新版本）

与低版本不同， v-popover被弃用了

以官方文档为例

:virtual-ref  可以直接传dom，这样变得更简单了，主需要把需要操作的控件对应的dom直接赋值给变量，传给:virtual-ref就行，举例：

 

 

 


 

 

 

 

_Subsequently
关注
Vue3 - Element Plus 气泡卡片 Popover 手动关闭，支持 v-for 循环出来的多个弹框（el-popover 点击其他区域关闭弹出框，通过点击按钮手动触发关闭隐藏气泡弹框）
王二红
09-12 7792
vue3elementplus气泡卡片el-popover组件，vue3Popover气泡卡片怎么手动关闭，elementplusel-popover手动关闭，Elementplus饿了么组件库中el-popover气泡框弹出框手动关闭详细教程，elementplus气泡弹框el-popover如何点击按钮手动进行隐藏关闭，elementplus解决循环出多个el-popover点击其中一个则其它都关闭，v-for循环多个气泡弹框如何实现关闭各自的弹框，页面v-for循环出来的气泡
vue3 Element-Plus封装的el-tree-select的使用
宁波阿成的博客
03-25 4010
vue3 Element-Plus封装的el-tree-select的使用
ElementPlus 循环Popover合并优化
fdshjdsjhadskj的博客
07-12 873
因为el-popover组件默认了隐藏时间200ms，所以，有频率需求的，可以通过调节hide-after参数来调节。确实满足了需求，但是，简单思考了一下可能存在的问题，于是去扒了一下DOM。由于el-popover文档内没有virtual-ref的描述，尝试了几次之后，发现这玩意绑。这哪行啊，表格每页数量还是能选的，哪天产品脑子一抽，来个1000,5000，岂不是玩蛋。上代码，为了容易从DOM中观测，给他起个名字叫。起因：表格内td内容需要扩展展示！于是，翻了一下api，挨。这玩意有用，琢磨一下试试。
Element-Plus中el-popover气泡卡片样式不生效
最新发布
wuhen_n的博客
04-18 589
Element-plus+scss开发时，在时（删除scoped作用域关键字）后，样式生效。</</</上述结构中，popover-content等class直接在vue文件中定义的，为什么一定要提升到全局变量呢？
el-table中 el-popover 性能优化
qq_45747074的博客
03-11 1909
场景：在 el-table 中使用 el-popover ,出现了 loading 加载卡顿的问题，接口返回的数据的时间大概是 140ms ，所以不是接口慢的原因；因为 el-popover 会渲染出真实的 dom 元素 所以在页面渲染的时候会出现el-table loading 卡顿的情况。最重要的一点是，采用这种方式，会出现 重复点击该列的目标对象的时候，会出现 visiblePopover 和 trigger 不同步的问题，表现为 el-popover 闪烁一次；抽离的 el-popover。
Vue3中使用element plus中的el-popover弹出框，实现弹出框的位置跟随鼠标点击的位置进行显示
y6868的博客
09-10 2879
打开element plus官网我们发现，一般的popver用法就是让这个组件绑定一个button按钮，然后点击，悬浮或者别的方式让其展示。这两天接到个新需求，要求当用户点击一个元素时，让popover弹窗的位置跟随鼠标点击的位置进行显示。我们点击元素框，popver出现，当我们点击右上角“”x“”时关闭，再次点击元素内别的地方，popver再次出现在点击的位置，至此，该功能改造完成！此时我们不难想到，要求实现鼠标跟随，就得获取鼠标点击的位置，当获取到鼠标点击的位置的时候，我们把(
el-popover(vue3 总结)
qq_38210427的博客
08-09 1245
移入到el-tooltip，后边的el-popover消失了。解决： 不让他移入，只在标签上能看提示，移入消失。第二步： 设置样式， 在。
vue3实现在el-tree中复用el-popover组件
阳光男孩的博客
08-01 265
【代码】vue3实现在el-tree中复用el-popover组件。
vue3 element-plus 日期选择器 el-date-picker 汉化
且听风吟的博客
12-12 3821
vue3 element-plus 日期选择器 el-date-picker 汉化
element-ui-vue2-el-popover-trigger为manual时的显示与隐藏处理-typescript实例
天河书阁 - VicRestart
06-20 2192
该方案一般用于处理在默认情况下，在Popover中单击再打开新的popover元素时会导致外部的popover元素消失，所以简单粗暴的用下面方式进行处理了一下。
关于在vue3 ＜script setup＞＜/script＞中使用＜el-popover＞＜/el-popover＞调用不显示或显示位置不对的问题
de_yi_xaio的博客
09-11 1636
第二种方式我用的v-show，想的是既然不能直接使用这个组件那就直接自己写一个，但是这边又出现了新问题，当我使用的v-show的时候，element中的Popover弹出框这个组件直接在页面上不显示了，这就把人搞得很郁闷无语。到最后也是成功解决这个在vue3 中使用调用不显示或显示位置不对的问题。
vue3.0 element-plus （el-popover）多手柄调用解决方案
qq_20820295的博客
11-01 3976
vue 3.0 element-plus 多个手柄控制一个el-popover
ElementPlus通过事件隐藏el-popover组件
cjy19990914的博客
02-28 164
elementPlus
Vue3气泡卡片（Popover）
Vue Amazing UI（Vue3 + TypeScript + Vite）组件库唯一开发维护者
03-27 1809
点击/鼠标移入元素，弹出气泡式的卡片浮层，支持：自定义样式；不同的触发方式；从浮层内关闭；自定义过渡动画时间；延迟显示隐藏；隐藏箭头等；总之，功能丰富，简单易用😁😁
vue3 Element-UI实现el-popover拖拽功能以及拖动右下角边框实现拉伸弹框大小功能
cgn1705050221的博客
12-01 603
最近有个需求是要在原先el-popover图片预览框上做修改，能随意拖拽整个el-popover和点击el-popover框右下角能够拉伸整个框的大小。头一次弄这个找了好多，发现基本都是基于el-dialog改造的，el-popover很少，有也是自定义指令，这个我尝试过不知道为啥一直没效果，所以换了另一个方法实现了，做下记录。
循环多个el-popover的手动显示/隐藏问题
qq_40407998的博客
08-06 2400
循环多个el-popover的手动显示/隐藏问题
【element-plus】el-popover 点击按钮关闭弹出框
热门推荐
最是人间留不住，朱颜辞镜花辞树。
11-27 1万+
但是如果绑定了visible，那么弹出框所有的弹出隐藏都必须手动控制 ，也没有点击空白处隐藏弹出框了。所以还是不设置visible属性。需求：用户点击按钮，弹出框出现，弹出框里有确认&取消按钮，点击确认&取消&其他区域，弹出框消失。链接：https://www.jianshu.com/p/3b2380a3920d。可以通过绑定弹出框的ref，来通过ref的value.hide()实现手动隐藏。商业转载请联系作者获得授权，非商业转载请注明出处。
el-popover在列表里循环使用，关闭不了????
Hassan的小博客!
12-07 1492
el-popove关闭不了，doClose()也关闭不了
element-plus v-for el-popover显示隐藏
12-28
### Element Plus 使用 `v-for` 循环控制 `el-popover` 组件的显示和隐藏 为了在使用 `Element Plus` 的项目中通过 `v-for` 实现多个 `el-popover` 组件并分别控制其显示和隐藏，可以采用以下方法： #### 数据绑定与事件处理 创建一个数组来存储各个 popover 的状态，并将其与模板中的数据进行双向绑定。对于每一个由 `v-for` 渲染出来的项，都需要有一个独立的状态变量用于管理该特定 popover 是否可见。 ```html <template> <div class="example"> <!-- 假设 items 是要遍历的数据列表 --> <ul> <li v-for="(item, index) in items" :key="index"> {{ item.name }} <!-- 每个 el-popover 对应于 items 数组的一项 --> <el-button @click="togglePopover(index)">点击</el-button> <el-popover ref="popovers" placement="top-start" title="标题" width="200" trigger="manual" :visible.sync="popoverVisible[index]" > <p>这是一些内容。</p> <div style="text-align: right; margin-top: 8px;"> <el-button size="mini" type="primary" @click="closePopover(index)">关闭</el-button> </div> </el-popover> </li> </ul> </div> </template> <script> export default { name: &#39;ExampleComponent&#39;, data() { return { items: [ {name: "Item One"}, {name: "Item Two"} ], popoverVisible: [] // 存储每个 popover 的可见性状态 }; }, methods: { togglePopover(idx){ this.$set(this.popoverVisible, idx, !this.popoverVisible[idx]); const popoversRef = this.$refs.popovers; if (Array.isArray(popoversRef)) { let instance = popoversRef[idx]; if (!instance.doShow && this.popoverVisible[idx]) { setTimeout(() => { instance.show(); }, 0); } } }, closePopover(idx){ this.$set(this.popoverVisible, idx, false); const popoversRef = this.$refs.popovers; if (Array.isArray(popoversRef)){ let instance = popoversRef[idx]; if(instance.doClose){ instance.hide(); } } } }, mounted(){ // 初始化 popoverVisible 数组长度等于 items 数量 this.items.forEach((_, i) => { this.$set(this.popoverVisible, i, false); }); } }; </script> ``` 上述代码展示了如何利用 Vue.js 和 Element Plus 来动态地管理和展示多个 `el-popover` 实例。注意这里的 `ref="popovers"` 被用来获取所有的 popover 实例以便手动调用它们的方法[^1]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值