el-popover无法点击、点击没反应、不能正常唤起弹出框

最新推荐文章于 2024-07-26 16:54:09 发布

JianZhen✓

最新推荐文章于 2024-07-26 16:54:09 发布

阅读量2.9k

点赞数 2

分类专栏： bug 文章标签： vue.js 前端 javascript html elementui

本文链接：https://blog.csdn.net/aZHANGJIANZHENa/article/details/130806846

版权

bug 专栏收录该内容

9 篇文章 1 订阅

订阅专栏

文章描述了一个在项目中遇到的问题，即使用element-ui的el-popover组件时，当列表被刷新或状态更新后，点击操作按钮无法唤出弹窗。问题的根本原因是v-if在组件未完全渲染时导致的。解决方案是使用v-show替代v-if来控制显示隐藏，确保DOM元素的存在，从而修复了弹窗无法触发的问题。

摘要由CSDN通过智能技术生成

项目场景：

在这里插入图片描述

表格内操作按钮点击后，刷新列表更新按钮显示状态

问题描述

`点击更新状态后的那条数据操作按钮。
发现element-ui的el-popover无法点击唤出弹窗，但刷新页面就可以正常点击进行操作。即el-popover刷新列表后无法点击

原因分析：

 <el-popover
                  :ref="`node-popover-adjust-download-${missions.id}`"
                  placement="right"
                  v-model="missions.isVisible"
                >
                  <p
                    v-if="!!missions.publishDep"
                    @click="
                      handleDownload(missions);
                      missions.isVisible = false;
                    "
                    style="color:var(--mainColor);cursor: pointer;"
                  >
                    下载风险提示函反馈单
                  </p>
                  <p
                    style="color:var(--mainColor);cursor: pointer;"
                    @click="
                      downNow(missions);
                      missions.isVisible = false;
                    "
                  >
                    下载风险事前评估表
                  </p>
                  <!-- 已提交已整改加有附件就可以下载 -->
                  <span
                    v-if="
                      missions.attachmentType === 1 &&
                        (!getSubmitStatus(missions) ||
                          (loginUl.depType === 1 && loginUl.orgId === 7))
                    "
                    style="pointer-events: auto;"
                    slot="reference"
                    class="handle download"
                    title="下载"
                  ></span>
                </el-popover>

点击操作按钮将v-if里的判断变成true,把下载按钮放出来后发现无法点击，但页面刷新就可以正常点击-唤醒弹窗，所以我认为是组件没实时监测到判断里值的变化

解决方案：

组件需要等页面渲染完成后才能拿到DOM元素，这是由于dom的渲染机制导致，所以不再销毁与重建，而是使用display让元素进行显示隐藏，问题终于解决，此问题与ref与v-if不能连用问题一样，解决办法是使用v-show代替v-if

 <span
                    v-show="
                      missions.attachmentType === 1 &&
                        (!getSubmitStatus(missions) ||
                          (loginUl.depType === 1 && loginUl.orgId === 7))
                    "
                    style="pointer-events: auto;"
                    slot="reference"
                    class="handle download"
                    title="下载"
                  ></span>