el-popover加el-table问题现象记录

最新推荐文章于 2024-11-08 18:09:13 发布
原创 最新推荐文章于 2024-11-08 18:09:13 发布 · 557 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #前端 #javascript

文章描述了一个在使用el-table展示数据并结合popover显示详细信息时遇到的问题，即点击某些行的popover没有响应。问题出现在文件上传和图片筛选后，怀疑是非图片文件的popover代码干扰。通过条件渲染（v-if）只在文件类型为图片时生成popover，问题得到了解决。

        简单记录一下问题,问题已经解决了，但不知道根本原因,欢迎大佬解惑

        背景：使用el-table显示多行数据,每行数据点击显示popover，但有时会出现popover点击无反应

1.文件上传时点击生效

 2.单独筛选图片后点击不生效

因为只有图片使用popover，其他格式文件不使用,但写代码时都生成了popover，所以怀疑是这方面干扰 

3.修正代码，使用v-if不渲染不需要popover的部分,kind指代文件种类,只在文件为图片时渲染生成

 4.问题解决

 

Z_Pro7
关注
Vue.js前端框架教程14：Vue悬浮组件el-popover和
Cachel Wood的博客
12-20 1282
el-popover允许自定义挂载节点，可以通过ref属性和$refs来操作。< el-button ref = " target " type = " primary " > 点击我 < el-popover ref = " popover " placement = " top " > < p > 这是一个自定义挂载节点的Popover
el-popover的循环写法，visible和属性virtual-ref
jieweiwujie的博客
10-09 477
【代码】el-popover的循环写法，visible和属性virtual-ref。
解决el-table中使用el-popover组件弹窗显示关闭问题
qq_41623635的博客
06-16 5078
【代码】解决el-table中使用el-popover组件弹窗显示关闭问题。
el-popover 在el-table 中 会出现不显示情况
weixin_45143856的博客
11-10 5372
el-popover 在table 不显示
关于el-table+el-input+el-propover的封装
qq_50276105的博客
11-11 1545
在实现单选功能过程中，运用selection-change会发生反复触发以及反复调用函数的情况，就是通过api,clearSlection()和toggleRowSelection()改变的勾选状态也会触发selection-change绑定的方法。4、勾选数据后，因为分页过多，原先选好的数据容易被埋没，在el-input里手动删除或添加触发input事件，el-table根据原有数据能检索到对应数据。5、若不通过勾选选择信息，手动添加，触发input事件，可一边输入一边检索是否存在所输入的数据。
el-popover放在el-table中点击无反应问题
Z_Gleng的博客
04-24 1209
我们想在table中给btn加弹框但是 el-popover点击按钮没有任何反应。:通过插槽去添加这个组件el-popover的id是否绑定了一个值。给每个el-popover都加上单独的id。代码 给每个组件都绑定ref。通过他的id去控制关闭。
el-table某一列嵌套使用el-popover,使用click触发，导致页面下拉框组件无法触发弹框关闭（解决办法）
weixin_38345306的博客
08-01 1762
el-table某一列嵌套使用el-popover,使用click触发，导致页面下拉框组件无法触发弹框关闭（解决办法）
Debug-012-el-popover 使用 doClose() 关闭窗口不生效的处理方案
LM0916的博客
05-28 1832
这个方法是可以替代v-model="visible"来控制显示隐藏的（显示用doShow()这个方法）只要还是因为是在列表中，内容比较多，感觉用不了这个动态绑定v-model='visible + scope.row.id' 这种写法，但我记得好像失败了，最终选择了用doClose()的方案。看了好几篇博文，基本用的都是一种方法，但是他们给出的原因都是表格懒加载导致，可是我也没加这个属性，所以不能说服我，还说VUE不能检测到ref的值变化 不能触发视图更新（这个感觉靠点谱，但是视频1为什么行呢？
＜el-popover＞可以展示select change改变值的时候popover 框会自动隐藏
最新发布
在路上`的博客
11-08 1165
Vue3的 element-plus 相对于 Vue2 的 element-ui，popover组件的实现方式有较大变化：不使用vue-popper，而是直接用el-tooltip来实现。element-plus的 popover 组件内部如果使用了el-select组件，需要确保 el-select 的 teleported 值为false，否则会出现展开select下拉框时，popover组件自动收起。
解决Element UI 组件el-popover图片溢出屏幕可视区域问题（popover定位问题）
weixin_41308436的博客
05-04 6746
分析原因 不固定popver大小，想让图片自适应完整显示时会出现这个情况。 原因：是图片未加载完成，即图片的宽高未确定，el-popover就已经初始化完成了，弹出的位置已确定。等图片加载完，内容撑开了，但是el-popover位置还是原来的，所以会溢出屏幕可视区域。 解决方法 等待img加载完成后更新一下el-popver this.$refs.popover.updatePopper() demo代码 非完整组件代码，仅供参考 <template> <el-popover .
el-table中el-popover失效问题
jl15988
11-16 3418
使用框架有很多未知可能性，所以我们尽量使用比较规范的代码。如上述问题，即使不添加fixed属性，表格也会渲染很多el-popover组件，这个时候的绑定值是不可靠的，因为表格渲染多少行，就需要绑定多少个值，另外尽量不要绑定到数据表格的数据上，容易造成错乱。
解决 el-table使用 el-popover 点击没反应 bug
放弃不难，但坚持一定很酷！
04-26 2772
解决 el-table使用 el-popover 点击没反应 bug
使用 el-popover 组件 + el-table 组件实现 ElementUI 动态渲染表格功能
微光无限的博客
03-27 3527
使用 el-popover 组件 + el-table 组件实现 ElementUI 动态渲染表格功能
Vue Popover 弹出框在table列表中的使用
weixin_39587654的博客
04-04 8413
本职是纯Java后端, 最近刚学Vue的萌新, 说得不对勿喷, 如果有更好的建议, 希望能在评论里看到你的留言 背景: 最近在自己做一个前端项目 (纯个人娱乐), 在table中希望对删除操作做一个弹窗提醒, 最初直接从ElementUI库中找到Popover弹窗代码之后, 直接复制到项目中, 遇到了如下的坑: 1. 列表中每一项都需要单独的visible变量来控制展示, 如果直接粘过去, ...
element使用el-table和el-popover结合使用，实现鼠标移入标题栏显示气泡卡片
m0_64785232的博客
07-15 1495
实现思路：使用插槽：可以通过标记顺序来看,可以忽略序号1上方的代码（这边我是根据需求，进行了一个文字通过状态值进行了显示判断）
element ui 中el-table中使用v-if造成组件复用问题---之---el-table 中使用el-popover 无法弹出问题
MISS_zhang_0110的博客
06-06 1949
表格是element-ui通过循环产生的，而vue在dom重新渲染时有一个性能优化机制，就是相同dom会被复用，所以，通过column-key去标识一下当前行是唯一的，不许复用就行了。本人猜测是：v-if会导致updated生命周期执行，会覆盖上面的v-if的生命周期，导致上次的生命周期后的逻辑触发不了但是是错误的，不管是v-if还是v-show生命周期是一样的。在v-for或者v-if切换标签时，多个相同的标签被渲染，如果不添加key来区分则会出现复用的情况。
Element 表格嵌套el-popover 多个popover切换时数据动态变化
不同场景下的水平居中
09-13 3537
要点： （1）点击时触发 popover trigger="click" （2）展示 / 隐藏 popover @show="contentDetail(scope.row, scope.$index)" @hide="hidePopover(scope.row, scope.$index)" （3）切换 popover 时，在请求新数据时先要清空一下数据 this.spanArr = [] this.position = 0 this.planList = [] （4）根据数据动态合并单元格 原理如：ht
Vue+Element 解决Popover弹出框在table列表中的问题（弹出多个弹框 || 关闭弹框失败）
fyydashen的博客
10-13 4947
在使用Vue+ElementUI做项目的过程中，在table列表中使用Popover弹出框出现的BUG让我头都大了，官网没有给出具体的解决方案，于是在百度这片肥沃的土壤里寻找答案。试了好多种方案，最终在下面博客的评论里找到了解决办法。 参考博客 下面贴出我的代码 局部代码： <!-- 删除用户弹窗 --> <el-popover placement="top" width="160" :ref="`deluser-popover-${scope.$index}`"> .
elementUI 在Table中使用Popover弹出删除确认框
热门推荐
lllsj的博客
06-28 1万+
Popover组件在table中使用,跟官网的会有些差别,用官方的会出现点击删除 不弹出问题.搜了好久,找到这两种解决方案 pClose()方法关闭Popover 方法1: <el-popover placement="top" title="确定删除？" width=...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值